プログラミング言語 - JavaScriptの記事一覧
Translate side by side - 翻訳前後の文章を横並びで表示するGoogle Chrome機能拡張
Google翻訳を使って英語ページを日本語にしている人は多いかと思います。そんな時、変な訳にぶつかって原文を確認したいと思うこともあるでしょう。Google翻訳ではページ全体の翻訳または原文表示の2パターンしかサポートされていません。これは不便です。そこで使ってみたいのがTranslate side by sideです...
WebGL Fluid Simulation - 流体の動きをシミュレーション
流体の動きは実に不思議です。そもそも私たちに最も身近である水ですら、とても不思議な特性を持ち合わせています。水の上に水彩絵の具を垂らして、それが広がっていく様子を楽しんだり、紙に写し取ったりして遊んだ経験は誰もがあるのではないでしょうか。そんな流体の動きをシミュレートしたのがWebGL Fluid Simulation...
Zdog - SVGやCanvasにドロー
Illustratorなどで描いたキャラクターも、そのままでは単なる絵と変わりません。SVGであれば、JavaScriptを使ってインタラクティブな操作が実現します。そうすれば、画像とは違った楽しみ方が生まれるでしょう。今回紹介するZdogはJavaScriptでイラストを描き、3Dのように回転もできるライブラリです。...
sqleton - SQLiteのデータベース構造をSVGで可視化
データベース設計を定期的に確認することで、全体が分かりづらくなっていないか、不要なカラムが追加されていないかなど健康状態をチェックできます。そんな時、Excelなどではなくビジュアル化されていると分かりやすいでしょう。そこで使ってみたいのがsqletonです。データベース構造をSVGファイルにしてくれます。## sql...
drawgon - Web上でドロー
Web上で絵を描こうと思うとCanvasタグを使って行います。そして、そこに描かれた情報は画像としてダウンロード可能です。しかし、ベクターデータとして（SVGとして）欲しい場合もあるでしょう。そこで使ってみたいのがdrawgonです。Web上で使えるドローイングアプリケーションです。## drawgonの使い方最初にサ...
a2hs.js - iOSでもAdd to Home Screen
PWAに注目が集まっていますが、Androidに比べてiOSの対応は今なお微妙です。アプリケーションのようにインストールできるのですが、その手順も分かりづらく、インストールを促すバナーも出せません。これではiOS向けにはなかなか普及しないでしょう。それを若干でも改善できるのがa2hs.jsです。iOS向けにユーザビリテ...
get-browser - デスクトップ/スマートフォンのWebブラウザを特定
かつてあったブラウザ戦争はなくなり、ほぼWebKit一強になりつつあります。そんな中、スマートフォンやタブレットなど画面解像度やサイズの多様性が生まれており、その中で開発者が対応すべきことも増えています。どのWebブラウザからのアクセスなのか、特定に苦労している人も多いのではないでしょうか。そこで使ってみて欲しいのがg...
imfunniee - 開発者向けポートフォリオテンプレート
開発者であれば自分のポートフォリオを持つべきです。それは個人のアイデンティティになり、転職時などにも有利に働きます。幸いGitHubのリポジトリはポートフォリオに使えるコンテンツになります。後は自己紹介やブログなどがあれば完璧でしょう。そこで使ってみたいのがimfunnieeです。GitHub Pagesで公開できるポ...
iru - Markdownをそのまま使うCMS
これまで、MarkdownをベースにWebサイトを作るソフトウェアは多数ありました。その多くはコマンドが用意されており、MarkdownコンテンツをHTMLに変換するものだったと思います。つまり静的サイト向けの使い方でした。今回紹介するiruはMarkdownファイルを読み込んで表示するタイプのWebサイトです。システ...
Hovercraft - Preziのようにページが切り替わるHTMLスライド
プレゼンテーションというと、退屈なスライドが並んでいて、切り替え時にちょっとしたアニメーションが起きる程度と思っているかも知れません。もっと聴衆の目を引くスライドを作ってみたいと思う方はPreziを使っていたりします。しかし、あれはデスクトップで動作するソフトウェアです。Webならもっと公開やシェアも手軽にできるのに…...
hackaru - シンプルな作業時間測定アプリ
集中して仕事をするためには、時間に厳しくなくてはいけません。単位時間のパフォーマンスを上げていくことで、より生産性を高められるようになります。そのためにはまず、現在の時間の使い方を可視化しなければなりません。そのために時間管理ソフトウェアがあります。実行しているアプリケーション単位で厳しく時間測定できるものもありますが...
SwiftWasm - Webブラウザ上でSwiftを実行
WebAssemblyへの注目が集まっており、それ故に様々な試みが行われています。計算処理の高速化、Canvasを書き換えることでゲームに用いたり、JavaScriptを全く書かずにWebアプリケーションも開発できるようになります。そんな中、プログラミング言語をWebブラウザ上で動かそうと言う試みも増えています。今回は...
Fusuma - Markdownを使ったHTMLスライド
HTMLでスライドを作る場合、アニメーションやロゴの配置ではなく、コンテンツに集中して作れます。さらに記法がMarkdownであればスライドを作るのが苦手な人であっても問題ありません。さくさくと作れるでしょう。今回は新しいHTMLスライドのFusumaを紹介します。便利な機能がたくさん詰まっています。## Fusuma...
Goodbye geocities.jp - 消失したGeocitiesのデータをWeb Archiveから発掘
懐かしのホームページホスティングサービス、Geocitiesが終了しました。無料スペースのサービスは99〜00年当時数多く存在しており、その中でも最大級だったのがGeocitiesです。その膨大な数のサイトは移転したり、そのままネットの渦に飲み込まれて消えてしまいました。そんな消えてしまったホームページを掘り起こしてく...
Medium Zoom - Medium風に画像をズーム
Mediumは人にとって読みやすい、使いやすいUI/UXにこだわっています。様々な工夫がされており、それははっきりと分かるものもあれば、細かすぎて気付かないものもあるでしょう。しかしそういった細部にこそ神が宿るものです。今回紹介するMedium Zoomは画像のズーム表示をMediumライクに表現してくれるライブラリで...
HumanizeDuration.js - ミリ秒を読みやすい文字列に変換
JavaScriptではstrftimeのような関数もなく、日付を文字列で出力するのは面倒です。他の言語とは異なり、時間はミリ秒単位で、換算するのも手間がかかります。そのため、日付を扱うライブラリが充実しています。今回はミリ秒を人が読みやすい形にしてくれるライブラリ、HumanizeDuration.jsを紹介します。...
Transmission - 車のギア変更をビジュアル化
ビジュアル化は理解を助けてくれます。文字だけでは実物が思い浮かばなかったり、具体的な場所が分からないことも、一つの画像や動画があるだけで理解度が全く変わってきます。作成するのはテキストよりも大変ですが、その効果は大きいと言えるでしょう。今回紹介するTransmissionは車のギア変更をビジュアル化してくれるという面白...
Save Page State - ページの内容をアーカイブ
未知の情報を探すのは得意なWeb検索ですが、既知の情報を探すのは意外と面倒です。前持って知っている情報がノイズになってしまい、キーワードをミスしてうまく検索できないのです。そもそも検索結果のページからリンクで辿っている場合、そのページのランクが低くて検索結果上位に出てこない可能性もあります。そこで後で気になる可能性があ...
color-image-app - 色の持つイメージから新しいカラーリングを生成
色を決めるのは大変です。そのため、様々な補助ツールが存在します。写真からカラーパレットを抽出したり、有名なWebサービスと同じカラーリングを提示してくれるものなど様々です。それらを駆使してなお、良い色が決められないという人は多いでしょう。そこで使ってみて欲しいのがcolor-image-appです。色を表現から生成しま...
All Contributors - プロジェクト協力者をたたえよう
オープンソースで大事なのは協力者です。コードを書いてくれる人だけでなく、ドキュメントやサポート、デザインなど様々な人たちが関わってプロジェクトは成り立っています。彼らの活躍なくしてオープンソース・ソフトウェアは成り立ちません。そんな協力者たちを可視化し、たたえるためのソフトウェアがAll Contributorsです。...