プログラミング言語 - JavaScriptの記事一覧
Painterro - Webアプリケーションにペイント機能を追加
Webアプリケーションの中にペイント機能を取り入れたいと思ったことはないでしょうか。たとえばユーザがアップロードした画像に対して、ペイントで加工できるようにしたり、お絵かき機能を取り入れるといった具合です。今回紹介するPainterroはWeb用のペイントプラグインになります。単体での利用ではなく、Webアプリケーショ...
wafxr - Web上でSEを生成
ゲームなどで使われるSE（サウンド・エフェクト）はフリーのものもあれば、商用でも販売されています。最近であればYouTuberなどもそうした音声を利用しています。動画やゲームにひと味加えてくれる大事な存在です。そんなSEをWeb上で自動生成できるのがwafxrになります。## wafxrの使い方メイン画面です。!
Origami Simulator - 折り紙をWebGLでシミュレーション
折り紙は日本のみならず、世界中で愛されている存在です。1枚の紙から、技巧を凝らして折ることでさまざまな造形を可能にします。中には、どうやって折ったのか分からないものも多数あります。そんな折り紙をシミュレーションできるソフトウェアがOrigami Simulatorになります。## Origami Simulatorの使...
TwitGrid - Twitterをマルチカラムでまとめてチェック
Twitterで色々な情報を収集している人たちはTweetDeckを利用しているでしょう。便利なサービスですが、もっとシンプルでいいのにと思うことがあります。情報が多すぎて、混乱します。そこで使ってみたいのがTwitGridです。表示したいユーザを並べていくだけの簡単なTwitterリーダーです。## TwitGrid...
LocalCDN - 有名なライブラリをローカルで読み込む
jQueryをはじめ、有名なライブラリがCDNによって配信されています。URLが共通化されることでキャッシュが有効になったり、CDNによる配信で高速ダウンロードされるというメリットがある一方で、利用者のプライバシーが脅かされています。今回紹介するLocalCDNはCDNから配信されるライブラリのURLをローカルのものに...
yogAI - AIの力でヨガのポーズをチェック
コロナウイルスの影響があって、自宅でストレッチやヨガを行うコンテンツが人気だそうです。ヨガは通う人たちは強者なイメージがあって、素人だと何となく気後れしてしまっていたかも知れません。動画であれば、人の目を気にせず、誰でもヨガにチャレンジできます。そんなヨガで大事なのは正しい姿勢が取れているかどうかです。ぜひyogAIを...
sheet2gmap - GoogleシートとGoogleマップを簡単に連携
Googleマップではユーザがカスタマイズしてピンを立てたり、情報を付与する機能があります。便利なのですが、使うためにはJavaScript SDKを使いこなさなければなりません。また、データをどこかに保存しておく必要もあります。そのため利用を控えてしまっていないでしょうか。今回紹介するsheet2gmapは世界一簡単...
Nokia Composer - 昔懐かしいノキアの着信音を作成
ノキアはMicrosoftに買収されたり、フランス企業に買収されたりと様々な遍歴を経た企業です（via Wikipedia
Resume builder - JSONから履歴書/レジュメを生成
日本でいえば履歴書、海外ではレジュメは就職や転職の際によく使われます。一般的な履歴書では情報が足りないのか、多くの場合業務経歴書なども求められます。開発者の場合、経験が重視されることが多いので、どういったプロジェクトにどういったポジションで関わっていたのかを明記することでしょう。今回紹介するResume builder...
MONOSPACE - 1KBという制限の中で作られたWebアニメーション
今はメモリもストレージも潤沢にあり、リッチなアプリケーション開発が容易です。しかし、制約があるからこそ新しいアイディアが見つかることもあります。ファミコンなどは数KB程度でゲームを実現しており、スーパーマリオの雲と草の形は同じで色が違うだけというのは有名な話です。これもメモリやストレージを削減するための工夫につながって...
Johari - Electron製の画像ビューワー
画像ビューワーにも様々な目的があります。一つ一つの写真を綺麗に見たいというものもあれば、大量の写真を分かりやすくカテゴライズしたい、高速で閲覧したいといった具合です。それぞれ目的に合わせてツールを使い分けると、より生産性が高まります。今回紹介するJohariは大量の写真に向いたソフトウェアです。写真をまとめてフォルダの...
QR-to-QR - QRコードを使ってデバイス間で情報を送受信
デバイス間で情報をやり取りするのは意外と面倒です。特に自分のデバイスではなく、ほかのデバイスとの情報交換がとても面倒です。デバイスは目の前にあるのに画面に映した文字を入力してもらったり、メールを送ったりします。これは本当にストレスです。そこで使ってみたいのがQR-to-QRです。QRコードを使ってデバイス間で情報のやり...
metricPlease - ヤード/フィートをメートル法に変換するブックマークレット
単位というのは生活に結びついています。たとえば温度は華氏と摂氏があります。日本にいる場合は摂氏で生活しているはずで、旅行先などで華氏の温度表示があっても感覚として分かりづらかったりします。日本では尺、貫、坪などの表現がありますが、外国人には分かりづらいことでしょう。世界的にはメートル法が使われている中、アメリカでは今な...
CyTube - みんなでオンライン動画を一緒に観る
面白くないコンテンツであっても、ほかの人たちと一緒に見ると楽しくなるという有名な話があります。たとえばニコニコ動画では、非同期性を動画コメント機能に組み込んでおり、みんなで笑い合うことで何も面白くない動画であっても楽しいコンテンツに仕立て上げました。それに対して、今回紹介するCyTubeは同期を重視した動画プレイヤーに...
Wireflow - Webサイトのユーザフロー/ワイヤーフローを自由に作成
Webサイトを作る際にユーザフロー（ワイヤーフロー）を作ります。Webサイトの画面を並べて、リンク先をつないでいくことで、フローを明確にします。そして目的のページまでたどり着くのに深くなりすぎていないか、分かりづらい流れになっていないかなどをチェックできます。今回紹介するWireflowはWeb上か簡単にワイヤーフロー...
google-it - Googleの検索結果をJSONで保存
Googleの検索結果はSEOを行う上で大事な指標になります。毎日決まった言葉で検索して、その準備を記録している方もいるのではないでしょうか。Googleの検索結果は実行すでデバイスごとに最適化されているので、全員が同じという訳ではありませんが、蓄積することに意味があります。今回紹介するgoogle-itはGoogle...
webimgo - 画像をバッチ処理でサイズ変更&最適化
画像をまとめて変換したい時はよくあります。たとえば提案資料を作っていて、Webサイトのスクリーンショットをたくさん取得したものの、それをサイズ変更したい時です。異なる画像フォーマットも合わさったりすると、とても面倒です。今回紹介するwebimgoはバッチ処理で画像サイズの変換、そして最適化をまとめて行ってくれます。##...
markdown-backup - Markdown内のリモート画像ファイルをダウンロード
Markdownファイルはローカルに蓄積されるので、いつまでも手元にあると安心しがちです。しかし、内容によっては突然変わることがあります。それはリモートにある画像の場合です。リモートサーバ上でファイル削除されてしまえば、その表示内容が変わってしまいます。そうした不測の事態を防げるのがmarkdown-backupです。...
Pac-Man Maze Generation - パックマン風ゲーム用の迷路を自動生成
パックマンといえばGoogleが作成した際、世界中の人たちの生産時間を奪い去ったとして有名です。シンプルなだけにハマりやすく、熱中する人が多いゲームとなっています。自分でもパックマンのようなゲームを作ってみたいと考える人たちは大勢います。その際、まず必要になるのがゲーム画面です。今回はパックマンの画面を自動生成できるP...
Keyboard Simulator - Web上でキーボードのデザインを確認
最近はキーボードを自作する方が増えています。また、これまでようにキーが整然と並んだものだけでなく、特徴的なものもあります。キーボードの入力速度は生産性に大きく関わるので、キーボードの使い勝手は大きな要素になります。Keyboard Simulatorはそんなキーボードのデザインを3D空間で確認できるソフトウェアになりま...