localFont - Web FontをlocalStorageを使ってキャッシュ MOONGIFT
Web Fontを使うとこれまで画像で作っていたロゴのようなものをテキストで表現できたり、さらにアイコンフォントのように大きさや色を自由に決められるアイコンが使えるようになります。 問題点としては画像一つに比べるとデータ量が多く、サイズが大きくなってしまうことでしょう。そこで使ってみたいのがlocalFontです。 localFontの使い方 こちらがメインページです。woff/woff2/ttfフォントをドロップします。 そうするとスタイルシートとJavaScriptでの設定が表示されます。 複数指定も可能です。 localFontはlocalStorageを使ってWeb Fontのデータをキャッシュするためのコードを表示します。localStorageは5MBまでの制限はありますが、キャッシュよりも効率的、高速な表示が期待できます。Web Fontを使っているならばlocalFontを
Clusterize.js·大量のデータを描画&高速スクロール MOONGIFT
Web上で巨大なデータを描画するとWebブラウザの動作が重たくなったり、最悪の場合落ちます。それを防ぐためにはデータをすべてDOMに描画するのではなく、表示している範囲だけに絞って表示し、非表示になったタイミングで破棄すると言った工夫が必要です。 しかしそういったDOM操作はコツがいります。そこで使ってみたいのがClusterize.jsです。巨大なデータセットを高速に表示するためのライブラリです。 Clusterize.jsの使い方 Clusterize.jsを使って5,000行のデータをスクロールする例です。スムーズに描けます。 Clusterize.jsのサイトではさらに10万、50万行のデータを描画することもできます。Clusterize.jsではリストの高さを予め計算し、それに合わせてスクロールバーが正しい長さで出るように設定されています。そのため行の高さは一定である必要がありま
tty.js - node製のWebベースのターミナル MOONGIFT
Webブラウザ上でターミナルが動かせれば、システムの開発がブラウザだけでできるようになってしまうかも知れません。幾つかのソフトウェアが既に存在しますが、一つ難点がありました。それは1ウィンドウで1セッションしか使えないことです。 複数のセッションを開くのにタブを追加していくのは面倒です。そこで使ってみて欲しいのがtty.js、Webベースのターミナルです。 tty.jsの使い方 tty.jsはnpmでインストールできます。 $ npm install tty.js -g インストールが終わったら起動します。 $ tty.js --port 3000 起動したらWebブラウザからアクセスします。 こちらがメイン画面です。Open Terminalをクリックします。 全体がターミナルになるのではなく、フローティングで表示されます。 普通に使えます。emacsも使えます。 フルスクリーンモードに
termshare – ターミナルの出力をブラウザで共有
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ブラウザ上にターミナルの実
他のjQueryライブラリと組み合わせよう。手軽に使える物理エンジン·box2d-jQuery MOONGIFT
box2d-jQueryはbox2dをjQueryに対応させたライブラリです。 最近は素のJavaScriptを書くことが減っているように思います。大抵jQueryを使ってしまいます。既にある他のライブラリもjQueryに対応してくれるとさらに利便性が高くなりそうです。そこで今回はbox2dをjQueryに対応させたbox2d-jQueryを紹介します。 デモ。動画が落下していきます。落下しながらも再生しています。 マウスで飛ばしたりできます。 101個のボールが落ちてくるデモ。 ぼんぼん飛びます。 使い方はシンプルで、重力の影響を与えたいDOMに対してbox2dメソッドを呼び出すだけです。その影響度合いは数値で指定が可能です。既存のコンテンツをいきなりばらばらにしたりもできる面白いライブラリです。 box2d-jQueryはjQuery/JavaScript製、zlib/libpng L
なんと！JavaScriptだけでテキスト読み上げ·Speak.js MOONGIFT
Speak.jsはJavaScriptだけでテキストを読み上げるソフトウェアです。 Webブラウザで音声ファイルを指定してJavaScriptで解析、なんてソフトウェアもありますが今回は一から“音声”を生み出してしまう驚きのソフトウェア、Speak.jsを紹介します。 ボタンを押すとHello Worldと話します。 こんな感じで任意の言葉を話させることもできます。 Speak.jsはジェネレータを通じて音声を動的に生み出します。対応しているのは英数字のみとなっており、日本語には対応していません。常に動的に生成しているので自由なテキストを読み上げさせることができます。 Speak.jsはJavaScript製のオープンソース・ソフトウェア（GPL）です。 MOONGIFTはこう見る テキストを外部サーバに送って、それを音声ファイルにして返すAPIも世の中にはあります。当然、こちらの方が英語
200を越えるアイコンが揃ったBootstrap向けWeb Font·Font Awesome MOONGIFT
Font AwesomeはBootstrapと組み合わせて使えるアイコンを集めたWeb Fontです。 Twitter Bootstrapの便利な機能の一つにアイコンパックがあります。ちょっとした装飾を手軽に付け加えられるのは便利です。そんなBootstrapに200以上のアイコンを追加するのがFont Awesomeです。Web Fontで作られたアイコンパックです。 全てのアイコンです。 ソーシャルアイコンも揃っています。 例です。ドロップダウンやボタンにつけています。 大きさが自由に変更できるのもフォントならではです。 ドロップダウンにつけると機能がより分かりやすくなります。 カスタマイズすればレーティングに使ったりもできます。 ファイル構成です。SVGやフォントが提供されます。 Font AwesomeはTwitter Bootstrapで提供されているものに加えて色々な場面で役立
滑らかに自然なページ送りができるJavaScriptライブラリ·turn.js MOONGIFT
turn.jsはタブレットやスマートフォンで使えるWeb向けのページ送りライブラリです。 turn.jsはリアルなページ送りができるWebベースのソフトウェアです。ハードウェアアクセラレーションを使い、滑らかに動きます。 四隅にマウスを持っていくと小さくカールします。ここをドラッグして引っ張ります。 ページをめくります。何となく海外のページの薄い雑誌をめくっているような感じです。 それ以外にもページの端にマウスを持っていくと矢印が出ますので、これをクリックしてもページめくりされます。 右から左の他、逆に左から右へもめくれます。 デモ動画です。 この手のライブラリは幾つかありますが、turn.jsは水平にページがカールするだけではなく、実際の雑誌のように斜めにカールしてページ送りできるのが特徴と言えます。ただ、その雰囲気がTime誌のような作りでちょっとペラペラな感じになってしまうのが残念で
Google Chromeの設定をバックアップ、リストア·Google Chrome Backup MOONGIFT
MOONGIFTは技術者向けの情報を提供しているとあって、訪問者のFirefox率が高い（約半分がFirefox）。しかし9月に入ってから急速にシェアを伸ばしているブラウザが存在する。それがGoogle Chromeだ。 大事なデータはバックアップをしておこう Google ChromeはGoogleのネームバリュー、オープンソース、IT技術者を誘う雰囲気と様々な要素が合わさって急速に周辺技術が出揃っている。その一つがGoogle Chrome Backupだ。 Google Chrome BackupはWindows向けのフリーウェアで、Google Chromeやオープンソース版のChromiumの設定をバックアップできる。 Google Chrome Backupを使うとプロファイルをバックアップ、リストアできるようになる。使い込んでいく内に様々なデータが蓄積されていくはずなので、そ
jQueryを使ったWebベースプレゼンテーション·jQuery Presentation MOONGIFT
jQuery PresentationはJavaScript/HTML製のオープンソース・ソフトウェア。プレゼンツールと言えばかつてはPowerPointを指していた。最近ではMac OSXユーザはKeyNoteを使ってプレゼンする人が多くなっている。プレゼンもツールによってインパクトが変わってくるのだ。 Webベースのプレゼンツール 単純にスライドが切り替わるだけでは、聴衆は眠たくなるばかりだ。もっとインパクトのある見せ方を考えないといけない。Webブラウザベースだと、柔軟なレイアウトが可能になる。一緒に使ってみたいのがjQuery Presentationだ。 jQuery PresentationはjQueryで作られたプレゼンテーションツールだ。特徴は一つ、スライドの切り替えにある。まるでスライドが回転するように切り替わるのだ。これは初めて見た人にとってはインパクトが強いのではない
mailtoをWebメーラーに変更する·GmailDefaultMaker MOONGIFT
GmailDefaultMakerはGmail/Yahoo/AOL/Hotmailをmailtoリンクの飛び先として指定できるようにする。 [/s2If] GmailDefaultMakerはWindows用のオープンソース・ソフトウェア。Webブラウジングをしていて時々見かけるmailtoリンク。何も設定せずにクリックしたら全く使っていないローカルメーラーが立ち上がってストレスがたまった思いは誰もが持っているはず。 サービス選択画面 幾つかのやり方はあるが、ローカルメーラー以外をmailtoで使えるようにするのは意外と面倒だ。そこで使ってみたいのがGmailDefaultMakerだ。インストールウィザードの流れでデフォルトメーラーが変更できる。 名前の通り、当初はGmail専用だったようだ。だが最新版ではGmailの他、Yahoo!、AOL、Hotmailもサポートされるようになった。
iPhone向けWebサイトを作るのに最適なテンプレート&JavaScript·moobile MOONGIFT
moobileはHTML/JavaScript製のフリーウェア（ソースコードは公開されている）。iPhone/Androidを中心とするスマートフォンのシェア拡大は留まることを知らない。モバイルネットワークが発展している限り、この流れは止まることはないだろう。Webサイトを提供する上でもスマートフォンは欠かせない存在になる。 ボタンバー ネイティブアプリを提供する手もあるが、もっと容易なのが最適化されたWebサイトを提供することだ。そもそもネイティブアプリを提供するほどのニーズがないサービスもあるはずだ。そこで使えるのがmoobileになる。 moobileはiPhoneやAndroidといったWebKitベースに対応したWebサイトフレームワークだ。HTML5で作成されているのが特徴だ。フォームやボタン、ボタンバーなどのUIをテンプレート化している。これを使えば最適化されたWebサイトが
複数のGoogleアカウントをお持ちの方は·Google Account Switcher MOONGIFT
Google Account SwitcherはGoogle Chrome用のフリーウェア。Gmailはスパムフィルターを含めて相当便利であるために、目的に応じて複数アカウントを使いこなす方も少なくない。そして切り替える際には都度ログアウトしてから実行する必要がある。 ドロップダウンでアカウントを切り替える そんな手間をかけるのが嫌であれば（大抵嫌だろうが）、Google Account Switcherを使ってみよう。Google Account SwitcherはGoogle Chrome機能拡張としてインストールする、Googleのアカウントスイッチソフトウェアだ。 Google Account Switcherをインストールした状態でGoogleの各サービスを表示させると、右上にドロップダウンが追加される。それをクリックするとアカウントのリストが出る。そして自分が使っているアカウン
WebKitベースのスクリーンセーバ·WebSaver MOONGIFT
WebSaverはMac OSX向けのオープンソース・ソフトウェア。スクリーンセーバはディスプレイがCRTだった時代に焼き付けを防ぐために作られたが、液晶画面がメインになった今でもアクセサリ的な意味合いで使われている。元々はCPU負荷の少ないものが多かったが、今では写真は動画が動くようなダイナミックなものも増えている。 WebKitをベースにしたスクリーンセーバ そんなスクリーンセーバを自作したいと思った時に、ややこしいプログラミングを行うのでは面倒に感じてしまう。そこで試したいのがWebSaverだ。WebSaverはWebKitをスクリーンセーバのベースとして使うソフトウェアで、index.htmlを編集して自分なりのスクリーンセーバを作成できるのが特徴だ。 HTMLなのでJavaScriptを使ってスクリーンセーバを作成することになるだろう。JSON等を使えば外部のファイルでも表示で
各種Webサービスに対応した埋め込みを行う·jQuery Oembed MOONGIFT
jQuery OembedはJavaScript製のオープンソース・ソフトウェア。おそらくYoutubeからはじまったであろう、自分のサイトへのコンテンツ埋め込みの機能。今や写真やプレゼンテーション、動画など様々な外部コンテンツがサイトに埋め込めるようになった。しかしここで問題なのが埋め込むコンテンツの内容が分かりづらいことだ。 各種サービスの埋め込みHTMLを生成する 大抵Flashのタグで囲まれており一般的には難解だ。Embedなどと書かれているがよく分かりづらい。そこで使ってみたいのがjQuery Oembedだ。jQuery Oembedはリンクタグにclass="oembed"を指定すると実行されるjQueryプラグインだ。 例えばFlickrの写真のリンクをURLにしてoembedの指定をすると、写真がサイト内に表示されるようになる。イメージタグを書く必要はない。同様にvime
誰だってクリエイティブなアートが描ける·Livebrush MOONGIFT
LivebrushはAdobe AIR製のフリーウェア。コンピュータで行えることは多数ある。テキストを書く以外にも写真を加工したり音楽を作ったり、クリエイティブな活動に役立てることができる。だがそうした創造的な作業には才能と優れたソフトウェアが必要だと思われている（少なくとも筆者はそう思う）。 何となくいい感じ？ アートを作ろうと思ったら何が必要だろう。タブレット、プロレベルのソフトウェア…いやいや必要なのはLivebrushだけで良い。Livebrushは何となく描くだけでも十分にクリエイティブなアートを作り出せるソフトウェアだ。 その秘密は多数登録されたブラシとそのブラシが描き出す曲線にある。ブラシによって色が決まっているようで、ただマウスを使って線を書くだけで自動で綺麗な曲線を描き出してくれる。線は後から調整することもできる。また線ごとにレイヤーが分かれるので一部を非表示にすることも
シンプルなポートフォリオ·Stacey MOONGIFT
StaceyはPHP製のオープンソース・ソフトウェア。時間が経つのは早い。自分がこれまでに何をやってきて、これから何をするのか常に考えておかないとあっという間に時間が過ぎてしまう。そのような時に使えるのがポートフォリオだ。最近ではブログを使うことも多いが、結果として何かが残った場合はポートフォリオとして残しておく方が分かりやすい。 プロジェクトの一覧。デモより Staceyはごくシンプルなポートフォリオで、プロジェクトごとにフォルダを作成し、その中に内容や出来上がった作品を写真として残していく。それだけでデータベースも使わずにシンプルなポートフォリオが出来上がる仕組みだ。 写真はスライダによってその場で入れ替わりつつ見ることができる。プロジェクト詳細では次のプロジェクトに移動することができる。StaceyをそのままWebサイトに利用することもできるだろう。シンプルな作りなので、自分なりの改
保存し忘れた、を防ぐ·SaveCircle MOONGIFT
SaveCircleはMac OSX向けのフリーウェア。注意していても忘れてしまうのが保存だ。場合によってはマシンがクラッシュすることがあるが、そうした時に限って重要な作業をしていたりする。さらに保存を行う直前だったということも多々ある。 タイマーで自動保存 作業時間が勿体ないと言えばその通りだし、企業にとっても作業時間分のコストが全くの無駄になってしまう。そんな失敗を少しでも防いでくれるのがSaveCircleだ。SaveCircleは指定時間ごとに保存処理（コマンドキー + Sキー）を自動実行してくれるソフトウェアだ。 設定は最前面にあるアプリケーションまたは指定したアプリケーションに対して実行するかとなっている。例えばWebブラウジング中では保存処理は行わないので、消えたら困るソフトウェアを設定しておくのが良い。時間は自由に設定できるので、1分や1時間など必要に応じて設定してほしい。
テキストを好きなフォントで表示する·Cufón MOONGIFT
Webサイトでテキストを指定したフォントで表示しようと思った場合、CSSで指定するか画像を使うかのどちらかが選択肢になる。CSSで指定した場合、コンピュータ上にフォントがある必要があり、画像で作成する場合は再利用性が悪い。 好きなフォントで描画する そこで使ってみたいのがCufónだ。英文フォントに限定されるだろうが、テキストを好きなフォントで描くことができる。 今回紹介するオープンソース・ソフトウェアはCufón、Canvas + JavaScriptによるテキストレンダリングライブラリだ。 Cufónは予めフォントをJavaScriptファイルに変換する必要がある。そのためのWebインタフェースも用意されており、レギュラー、ボールド、イタリック、ボールド&イタリックそれぞれのフォントを指定する必要がある（レギュラーフォント以外はオプション）。 加工を施した例 フォントを指定する際にグラ
ゆるさを楽しめる時計·FuzzyClock MOONGIFT
現代人は時間に支配されているといっても良い。何をするにもスケジュールを確認し、今の時間を確認し、後何時間で次の予定になるか常に気にかけている。そんなものは健康的ではない。もっと自由であって良いはずだ。 このゆるさが大事 分刻みの生活を送っている訳でもなければ、もう少し柔軟に考えてみよう。そんなことを思い出させてくれるのがFuzzyClockだ。 今回紹介するフリーウェアはFuzzyClock、正確ではない適当な柔軟性をもった時計アプリケーションだ。 FuzzyClockが表示するのは何時の何分くらい後、または何分くらい前という表示だ。例えば11時の10分くらい後といった具合だ。変わるのは5分刻みなので、今が1分なのか、または4分なのかは分からない。いや、むしろ分かる必要はないのだ。 設定画面 デジタルで分が正確に分かるから気にしてしまうのだ。分からなければ、分からないなりの柔軟性を持てるよ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
