MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 最近人気のWeb Font。元々ブラウザは対応していたものの、ネットワーク経由でサイズの大きなフォントファイルの送信を控えていました。しかし最近はネットワークも高速化し、他のメディアも十分に大きくなってきたことで現実的になっています。 Googleが配布しているWeb Fontがありますが、そうしたWeb Fontをダウンロードしてくれるライブラリがwebfont-dlです。 webfont-dlの使い方 インストールはnpmで行います。 npm install -g webfont-dl 使い方はWeb FontのURLとスタイルシートを指定するだけです。 $ webfont-dl "http://fonts.googleapis.com/css?family=Crimson+T

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ハンズオンや技術者向けのセミナーなどで画面を共有したいと思うことがあります。それはデスクトップの場合もありますが、ターミナル操作の場合もあります。 サーバ構築系などでターミナル操作を見て欲しいと思ったら、ズームなどを使うのではなくtermshareを使ってみると面白そうです。 termshareの使い方 termshareのインストールはワンライナーです。 curl -sL https://termsha.re/download/$(uname -s) | tar -C /usr/local/bin -zxf - 使い方も簡単で、 termshare を実行するだけです。実行すると次のようにURLが生成されます。 このURLに参加者がアクセスすると、Webブラウザ上にターミナルの実

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 動作の重たい処理をすれば、レンダリングが追いつかずに60fpsを維持できないのは当たり前です。しかし、だからこそ表示する内容やテクニックを駆使することで高速な描画を維持できるととてもインパクトがあります。 Webページのスクロールにおいても改善すべきポイントがあります。高速なスクロールを実現するためのハックが60fps scrollingになります。 60fps scrollingの使い方 現在はバージョン2になっており、多少やり方が変わっています。  解説動画はこちら。

テストは様々なパターンが存在します。ユニットテストもあれば結合テスト、負荷テストなどもあります。いずれも目的に合わせて選択する必要があります。しかしテスト項目は人が考えるもので、ある意味限界があるかも知れません。 そこで試してみたいのがMonkey.js、Webベースのモンキーテストライブラリです。とにかく適当に触って入力してを繰り返すことで何か起きるかも知れない、そんな可能性を秘めています。 Monkey.jsの使い方 テスト中。クリックしたポイントに印がつきます。 入力テスト。こちらもまたランダムな文字列を入力します。 デモでは一つのページ上だけで行われますが、Monkey.jsを全ページで呼び出しつつ、自動実行し続ければ何かエラーが起こる可能性があります。URLごとに遷移してしまう場合はまだいいですが、Webアプリケーションで画面遷移を行わないシステムの場合はJavaScriptでエ

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました JavaScriptでは標準では物足りないと感じられることが多いです。そこでjQueryやUnderscoreのようなライブラリが必須になってきます。そうすることでプログラミングをする上で必須ともいえる機能が使えるようになります。 FKitはそのJavaScriptでよくありがちな機能を補完してくれるライブラリになります。きっとああ、これが欲しいんだよねと思う機能があるはずです。 FKitの使い方 FKitはFunction/Array/Objects/Stringに対して機能を追加します。 たとえばこのような機能になります。 // Sum the numbers in a list. F.sum([1, 2, 3]); // 6 // Stash a string. F.map(

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました HTML5の新しいAPIとして知られるlocalStrageですが、基本的に同一ドメインでのみ、5MBまでとなっています。しかしサブドメインを使っている場合など、ドメイン間でデータをシェアしたいという場合もあるのではないでしょうか。 そこで使ってみたいのがCrossStorageです。ドメインを越えたlocalStrageのシェアを実現するソフトウェアです。 CrossStorageの使い方 CrossStorageではハブとクライアントという二つのサーバから成り立ちます。まずハブ側では許容するドメインとメソッドを定義します。 CrossStorageHub.init([ {origin: /\.example.com$/, allow: ['get']}, {origin: /:

Markdownは通常、HTMLに変換するとあってWebベースのエディタと相性がいいように思います。また特に多く使うのがGitHubのREADMEであり、こちらもWebベースで表示されることもあるでしょう。 色々なMarkdownエディタが存在しますが、今回はMarkdown Editを紹介します。Webブラウザベースで使えるオンラインMarkdownエディタ、ビューワーです。 Markdown Editの使い方 こちらがエディター画面です。2ペイン構成になっています。 リアルタイムアップデート機能があります。 HTMLエクスポートした場合。 Markdown EditはJavaScriptのMarkdownレンダリングエンジンであるmarkedまたはGitHubのAPIを使ってレンダリングができます。またローカルファイルをドラッグ&ドロップでアップロードして編集もできるようになっています

ブラウザのデバッグコンソールでは console.log を使うのが一般的ですが、他にも console.info や console.warn などでアイコンの変更ができるようになっています。しかし大量のメッセージが流れる中ではこれだけでは分かりづらいかも知れません。 そこで使ってみたいのがBragi-Browserです。ログメッセージをグルーピングしたり、多色展開できるログシステムです。 Bragi-Browserの使い方 Bragi-Browserはnodeのライブラリとしてローカルで動作することもできるログライブラリです。 こんな感じで様々な色が使えます。グループを指定するだけなので簡単です。 読み込んでさえしてしまえば、普通のログと変わらず使えます。 BRAGI.log('groupname', 'message'); CommonJSを使うこともできます。 var logger

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました HTML5で新しく追加された機能の一つにCanvasがあります。グラフィックスを描いたり、画像などのバイナリを描画したりすることもできるので使えそうな場面は多いと思うのですが、勝手が違ってなかなか手を出しづらいのが実情です。 そこでJavaScriptがjQueryで圧倒的に使いやすくなったように、CanvasについてもjCanvasを使えばもっと手軽に使えるようになりそうです。 jCanvasの使い方 例えば円を描くコードは次のように書きます。 // Draw a circle $("canvas").drawArc({ draggable: true, fillStyle: "green", x: 100, y: 100, radius: 50 }); ぱっと見で分かりやすいで

最近では外部ライブラリを積極的に使って開発するのも珍しくなくなってきました。そのため、見慣れないオブジェクトがあった時にそれが内製なのか、外部ライブラリなのか分からないこともあります。 そんな時に使えるのがSourcegraphと言うソースコード解析サービスで、それをGoogle Chromeから扱えるようにする機能拡張もSourcegraphという名前でリリースされています。 Sourcegraphの使い方 適当なGitHubリポジトリを見てみます。 こんな感じにマウスオーバーすると関数名とその呼び出し方、返却値が出てきます。 オブジェクトやメソッドが対象になります。 解析が終わっていない場合はこんな感じに出るようです。 Sourcegraphは公開されているリポジトリのみ対象としているため、非公開のリポジトリに対しては使えません。ただ、オープンソースのライブラリであればSourcegr

情報のフィルタリングやカテゴライズ、並び替えをする際には都度URLを再読み込みして表示するのが一般的です。とは言えこれでは格好が悪いというケースもあるでしょう。 そこで使ってみて欲しいのがMixItUpです。パネルまたはリストの情報をフィルタリングします。その際のアニメーションがまた格好いいライブラリです。 MixItUpのデモ まずは動画でご覧ください。 ボタンを押した時のアニメーションが格好よく、洗練されています。 最初の表示です。全ての情報がランダムに並んでいます。 並び替え。数字ごとに並んでいます。 フィルタリング。青のラベルだけになっています。 表示方法としては四角いブロックの他、リストもできます。 MixItUpの使い方 まずはHTMLを次のように記述します。 <div id="Container"> <div class="mix category-1" data-myord

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 最近流行っているpjax。コツはいりますが画面遷移がなくなること、同じレンダリングを行わないことで表示速度が速くなると言ったメリットがあります。Ajaxも画面の一部を書き換えたりするので同じようなメリットがあります。 そんなAjax/pjaxを使った場合、ページ読み込み中のローディング表示は欠かせません。そのためのライブラリとして使ってみたいのがPACEです。 PACEの使い方 まず最初にJavaScriptとスタイルシートを読み込みます。 <head> <script src="/pace/pace.js"></script> <link href="/pace/themes/pace-theme-barber-shop.css" rel="stylesheet" /> </he

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました これは使い勝手良さそう！ Webサイトを作ったらお問い合わせフォームが欲しくなると思います。そのためにすることと言えば、メールフォームを作り、SMTPサーバを立てて、メール作成処理を作る…そんなのは考えただけでも面倒です。しかもWebサイトを作るたびに行っているでしょう。 もっと簡単にWebフォームを作りたい、そう考える人はFireformを使ってみましょう。汎用的なフォームを手軽に設置できます。 Fireformの使い方 最もベーシックなフォームは次のようになります。 < !doctype html> <body> <form id="MySelector"> <input type="text" name="givenname" placeholder="Name"/> <in

あるサイトにおける活動がそのまま外部評価に繋がるという仕組みはとても素敵だと思います。まとめて成し遂げるのではなく、日々のコツコツした作業が結果として認められるのは着実な実績作りに最適ではないでしょうか。 そこで紹介したいのがStackWhoです。StackOverflowの活動実績をビジュアル化してくれる興味深いサービスです。 StackWhoの使い方 トップページです。ある場所、ある技術に対するStackOverflow上で活躍している人たちを一覧してくれます。 東京のnode/AngularJSではこのようなリストです。 言語をRubyに変えてみました。 StackWhoではStackOverflow上でのポイント順に並んでおり、それはすなわち回答の質が高く、質問者や周囲の人たちにとって役立つものだったのに他なりません。それが日々の継続の中で培われ、StackWhoとしてリストアップ

一度使うと止められなさそうなサービスですね。 GoogleやYahoo、MicrosoftではjQueryをはじめ有名なJavaScriptライブラリについてホスティングし、CDNとして提供しています。そもそも配置するのが面倒だったり、トラフィックで課金が発生しないようにと使っている人も多いのではないかと思います。 しかしあまり有名ではないライブラリについてはどうでしょう。そこで使ってみたいのがjsDelivr、多彩なライブラリを配信するオープンなCDNです。 jsDelivrの使い方 使い方は簡単で、公式サイトへ行き、ライブラリを検索します。現在914のプロジェクトが登録されています。そして表示されているライブラリのURLをコピーするだけです。 こんな感じに並んでいます。 検索もできます。 後はコードをコピー&ペーストするだけ。 新しいバージョンがきたら通知を受け取ることもできます。 バ

処理中を知らせるためのプログレスバーは大事な存在です。最近ではYouTubeなどでウィンドウ上部に読み込み中のステータスバーを出すといったUIも採用されています。いずれにしても無反応な状態を回避するのはユーザストレス軽減につながるはずです。 ステータスバーを表示するライブラリは幾つかありますが、今回はprogre(c)ss!というソフトウェアを紹介します。一本線のとてもシンプルなステータスバーライブラリです。 progre(c)ss!の使い方 progre(c)ss!はその名の通り、スタイルシートだけで作られています。なのでスタイルシートを読み込んだら、後はHTMLで次のような記述をするだけです。 <div class="progrecss" data-progrecss="77"> My first progre(c)ss! </div> ちなみにスタイルシートファイルを見ると1ポイント

Backboneにも対応しているのがポイント高いかも！ HTML5にはオフラインに対応するために幾つかのストレージ機能が提供されています。localStorage、IndexedDB、さらにWebSQLも一部のブラウザでサポートされています。 キーバリュー型のシンプルな非同期型ストレージを提供してくれるライブラリlocalForageがMozillaよりリリースされました。 localForageの使い方 APIとしてはlocalStorageライクになっています。特徴的なのはコールバックを受け付けるということでしょう。 localforage.setItem('key', 'value', callback); データを取り出す場合も同じくコールバック対応です。 localforage.getItem('key', alert); コールバックではなくチェーンメソッドもサポートされていま

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました どんな面白い使い方ができるかな？ Google Chromeをメインブラウザにしているプログラマーの方は多いと思います。プログラミングとブラウジングは近いように見えて意外と遠いです。その最大の違いはマウスとキーボードでしょう。 Google Chromeをキーボード操作できるようにする機能拡張は多いですが、今回はGoogle Chromeをターミナルで操作できるようにするchrome-cliを紹介します。 chrome-cliの使い方 まずはコマンドヘルプです。 $ ./chrome-cli -h Usage: chrome-cli -h (Print help) chrome-cli --help (Print help) chrome-cli help (Print help)

これは目から鱗！ Googleがスマートフォンとデスクトップブラウザを連携させるサービスを幾つかリリースしています。その際にはデスクトップ側（または逆）で表示されたキーをもう片方で入力することでWebSocketによって接続しています。 技術的に高度で容易には実現しがたい訳ですが、もっと簡単にスマートフォンとデスクトップのブラウザを連携させる方法がありました。それを実現しているのがRemote.jsです。 こちらがデモ。スマートフォンで操作するとA/Bのハイライトが切り替わります。 こちらはスマートフォン側のリモコン。なぜか文字が逆になっています。 こんな感じで別なウィンドウを開いたり、閉じたりもできます。 種明かしをすると、Remote.jsは音を使っています。スマートフォンでボタンを押すと、特定の音が出ます。それをデスクトップ側のマイクで聞かせると特定のアクションを実行する仕組みになっ

pushStateを使うとAjaxを使ったWebアプリケーションにも一意のURLを設けられるようになります。また、既に別な画面を表示しているユーザはAjaxでデータの転送量を減らし、最初の表示時はHTMLをレンダリングすると言った仕組みにもできます。 そんなpushStateやURLごとのルーティングを容易に実装できるようにしてくれるライブラリがkazitori.jsです。外部ライブラリ非依存なのでjQueryなど他のライブラリと組み合わせて使うこともできます。 サンプルのコードです。 class Router extends Kazitori beforeAnytime:["testBefore"] befores: '/<int:id>':['testShow'] routes : '/':'index' '/</int:id><int:id>':'show' '/<string:us