プログラミング言語 - JavaScriptの記事一覧
twemoji-image-picker - twemojiをmacOSの絵文字ピッカー風に選択
絵文字は色々な場面で使われます。時には画像として利用したくなるかも知れません。しかしAppleなどが提供している絵文字は著作権もあるのでおいそれと使えません。そういう時にはオープンな絵文字アイコンを使うのが良いでしょう。今回紹介するtwemoji-image-pickerはTwitterの提供するtwemoji
WhatsApp Clone PWA - WhatsApp風のUIを備えたメッセージアプリ
アメリカでメッセージングアプリと言えばWhatsAppが一番シェアを持っているでしょう。日本では様相が異なるので情報が届きづらいですが、アメリカ人の知り合いが多い人は使っているかも知れません。そんなWhatsApp風のUIをPWA（Progressive Web App）で再現したのがWhatsApp Clone PW...
Division By Zero - ドット絵で懐かしいアクションゲーム
最近の高機能、高解像度なグラフィックスを伴ったゲームも良いですが、ファミコン時代のレトロなゲームも楽しいものです。多少理不尽な作りであったり、厳密ではない物理エンジンも楽しさの一要素です。今回紹介するDivision By Zeroはそんな懐かしいファミコン風のゲームです。Webブラウザですぐに遊べます。## Divi...
Smile - 実行できるアスキーアート
世の中にはどう作っているのか分からないものがあります。例えば山手Quine
Squirrel Byte - JsonLogicを使ったデータエクスプローラ
REST APIで検索を作るのは意外と面倒です。GETパラメータの中に検索条件を設定しますが、複雑になればなるほど簡単ではなくなります。すべてANDなら良いですが、ORまで追加しようと思うと実装が大変です。そんな中登場したのがJsonLogic
Improve YouTube! - YouTubeのUI/UXを改善するブラウザ機能拡張
YouTubeには毎日たくさんの動画がアップロードされています。飽きることなく閲覧し、毎日観ている人もいるでしょう。それだけにYouTubeの使いづらい点が気になったりするかも知れません。今回紹介するImprove YouTube!はYouTubeのUI/UXを改善してくれる機能がたくさん詰まったブラウザ機能拡張です。...
Foxql - ブロックチェーンを使ったソーシャルネットワーク
インターネットにおいてプライバシーは大きな課題です。情報漏洩はもちろんのこと、GAFAなどに情報が吸い上げられている状況は、多くの国で懸念されています。インターネットはもっと自由であるべきです。今回紹介するFoxqlはP2Pをベースにしたソーシャルネットワークです。スケーラブル、そして自分のデータを自分で管理できるのが...
Web-Minecraft - 機能が多めのWebブラウザ用Minecraftクライアント
Minecraftを遊ぶ場合、専用のアプリケーションやスマートフォン/タブレットアプリなどを利用します。ちょっと試したいというだけにしては敷居が高いかも知れません。インストーラーをダウンロードしている内に気が変わってしまう可能性もあります。そこで使ってみたいのがWeb-Minecraftです。Webブラウザで遊べるMi...
"git clone" as a PWA - ブラウザでGitHubからclone
PWAはWebアプリケーションながら、まるでローカルアプリケーションのようなUIや機能を実現する技術群になります。HTML5のAPIもどんどん増えており、それらを使うことでローカルアプリケーションと同じような操作が行えるようになっています。今回紹介する"git clone" as a PWAはその一例です。File S...
Yahoo!ニュースの元記事を探す - Yahoo!ニュースから元記事へジャンプするユーザスクリプト
Yahoo!ニュースでは各メディアから提供されたニュース記事が掲載されています。しかし画像などの情報が抜け落ちていたり、リンクがなかったりと情報不足になっていることが良くあります。その結果、元記事を探したりする人も多いのではないでしょうか。そこで使ってみたいのがYahoo!ニュースの元記事を探すです。Yahoo!ニュー...
mk.js - Web上でストリートファイター風ゲーム
Web上で提供されるゲームというとパズルゲームが多いように思います。あまり高速な動作を必要とされないゲームであれば作りやすいでしょう。しかしJavaScriptも高速化しており、他のジャンルでも十分ゲーム開発が可能になっています。今回紹介するmk.jsはCanvasベースのファイティングゲームになります。## mk.j...
nginxbeautifier - nginxの設定ファイルを整形
nginxは多くのWebサービスで利用されています。かつてはApacheが主流でしたが、今はnginxの方が利用が多いような気がします。設定ファイルが独特ですが、複雑な条件も記述できるのが便利です。そんなnginxの設定ファイル、色々書きすぎてゴチャゴチャになったらnginxbeautifierを使って整形しましょう。...
Better GitHub - GitHubのコードリーディング体験を改善
GitHubは今や開発者にとってなくてはならないツールです。単にコードリポジトリとしてだけでなく、Web上でコードを閲覧する機会も多いはずです。そんな時、デフォルトの表示で満足しているでしょうか。自分好みのフォントを使ってコードリーディングをしたい、そんな方はBetter GitHubを使ってみましょう。## Bett...
MouseView.js - マウスの動きをトラッキングしてヒートマップ化
閲覧者やユーザがWebサイト、Webアプリケーションをどう操作したのかを知りたいと思ったことはないでしょうか。使って欲しい機能がちゃんと認識されているのか、見て欲しい情報が見られているのか把握したいと思うことでしょう。そんな目的で使えそうなのがMouseView.jsです。マウスの動きをトラッキングし、ヒートマップで表...
Numi - シンプルで汎用的な計算機
計算機は四則演算だけで十分ではありません。対数や三角関数など計算式は数多くあります。メートルとフィートなど、相互に変換する計算式もあるでしょう。Googleを用いて計算している人もいるはずです。そんな計算に使えるのがNumiです。シンプルで素敵な計算機です。## Numiの使い方計算内容は左側にテキストで記述します。!
Poulette - 自然な色の融合を作り出すカラーパレット
新しい色彩を考える時には、カラーパレットがよく使われます。多彩な色が並んでいる中、感性に合わせて色を選択するのですが、あまりにも多いと迷ってしまうでしょう。似通った色の中から、ほんの少し緑がかったもの、青っぽいものを選択したいなどニーズは色々とあるはずです。そんな時に使ってみて欲しいのがPouletteです。## Po...
htmbox - htmlxを使ったDropbox風のUI
何かの技術をアピールする際にデモアプリを作るのは良い方法です。何ができるのか想像するのは難しいですが、デモアプリを見ることで学べることは多いでしょう。たとえばRailsはブックマークサービスのようなものを10分で作ったりして、その開発効率をアピールしていました。今回紹介するhtmboxはHTMLでAjaxを扱いやすくす...
Codeist - Webのコードをすぐに試せるプレイグラウンド
フロントエンド開発の便利な点は、Webブラウザじ実装されているJavaScriptエンジンでコードをすぐに実行、確認できることでしょう。HTMLやCSSをデバッグすることもでき、開発がさくさくと進められます。そんなフロントエンド開発時にちょっとしたプレイグラウンドが欲しかったらCodeistを使ってみましょう。## C...
Remote Mob - リモートで使えるモブプログラミング用タイマー
モブプログラミングは複数人集まって、わいわいがやがやしながら行うプログラミングです。ペアプログラミングの複数人版とも言えます。一つのタスクを成し遂げる際に、指摘をリアルタイムに行えるので情報共有にも役立ちます。そんなモブプログラミングをリモートで行えるのがRemote Mobです。リモートワークが隆盛の現在、試してみる...
Copenhagen - 高機能なWeb埋め込み型プログラミングエディタ
Web上でユーザにコードを書いてもらう機能を用意するとします。その際、ただのテキストエリアを配置するのは良くありません。ハイライトもありませんし、Tabキーを押すと別なコントロールにフォーカスが移動したとしたら、使う気も失せてしまいます。Webページに埋め込める高機能なエディタが欲しければ、Copenhagenの利用を...