プログラミング言語 - JavaScriptの記事一覧
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です。...
tetris - 遊びすぎに注意。Webブラウザベースのテトリス
Webブラウザ上で動くゲームは危険です。ダウンロードしたり、インストールする手間もなく、すぐに遊べてしまいます。普段ずっと使っているWebブラウザなので、常に立ち上がっており、いつだって遊べてしまうでしょう。今回紹介するtetrisはWebブラウザ上で動くテトリスです。これはとても危険な存在と言えるでしょう。## te...
Webring Starter Kit - 懐かしのウェブリングを現代に蘇らせる
かつてインターネットにはウェブリングという仕組みがありました。まだまだWebサイトが少なかった頃、そして検索エンジンもそれほど便利ではなかった頃に、趣味を同じくするサイト同士で巡回してもらうための仕組みです。相互リンク的なもののグループ版とも言えます。そんなウェブリングを現代に復活させたのがWebring Starte...
bento-starter - PWAを学ぶ、実装するのに参考にしたいスターターキット
PWA（Progressive Web Apps）というキーワードに注目が集まっていますが、実際のところ何からはじめれば良いのか分からない人は多いのではないでしょうか。PWAは固有の技術を指し示すものではないので、特に分かりづらいでしょう。そこで参考にしたいのがbento-starterです。PWAとは何か、を学ぶのに...
Uix Kit - 120を超えるコンポーネントが用意されたBootstrap互換のUIキット
Webデザインテンプレートを用いることで、素敵なWebサイトを簡単に構築できます。しかし、このテンプレート作成者の想定範囲内の使い方であれば問題ないのですが、ちょっとしたカスタマイズにも対応しておらず、一から探し直すなんてこともよくあります。そういった点においてBootstrapの汎用性は高く、利用者も多いのです。しか...
JS Cloudimage 360 View - 自由に360度させられる商品ビューワー
正面からの商品画像だけで購入を決めるのは難しい製品は多数あります。左右や後ろからの写真を見てはじめて自分の納得いくものかどうか判断するでしょう。しかしそのために動画を見るのは面倒です。今回紹介するJS Cloudimage 360 Viewは様々な角度から撮影した商品画像を使って360度回転できるウィジェットを生成しま...
ローカルファイルリンク有効化 - Google Chromeからローカルファイルへアクセス
Webブラウザはユーザの安全性を第一に考えて作られています。インターネット上には悪意をもった人たちがたくさんおり、Webブラウザからアクセスしただけで被害に遭うのは問題があります。しかし、安全性を考慮しすぎると利便性が失われます。Google Chromeではデフォルトでは file:// は使えません。これはローカル...
mdne - Lispが実行できるMarkdownエディタ
Markdownエディタは無数に存在します。あらゆるプログラミング言語で作られて、WebやWindowsなどおあらゆるプラットフォームに対して作られています。多くは2ペインになっており、機能差も殆どありません。そんな中で目立つためには特徴的な機能が必要です。mdneはコードが実行できる点が特徴なMarkdownエディタ...