SuperEmbed.js - 動画埋め込みの幅を可変に MOONGIFT
YouTubeやVineなどの動画サイトはとても良いコンテンツで、ブログやWebサイトに埋め込んでいる人は多いかと思います。しかし厄介な問題として、単純に埋め込むとレスポンシブなWebサイトの幅変更に追従できないという問題があります。 それを解決してくれるのがSuperEmbed.jsです。モバイルからデスクトップまで、一つの埋め込みコードで対応できるようになります。 SuperEmbed.jsの使い方 使い方はとても簡単で、ただJavaScriptを読み込むだけです。 <script src="superembed.min.js"></script> これだけでYouTube、Vimeo、Vime、VideoPress、DailyMotionなど（他にも）の動画を自動的に可変にしてくれます。 SuperEmbed.jsはIE9以上で使えます。jQueryなどの依存ライブラリはありませんの
NEditorJS - ビジュアルプログラミング環境の基盤にどうぞ MOONGIFT
ビジュアルプログラミングの多くはノードがあり、それらをマウスでくっつけて処理を繋げていきます。各ノードには機能があり、必要に応じて処理判定を行うノード、繰り返し処理を行うノードを選択します。 そういったビジュアル化された環境を提供するのがNEditorJSです。工夫次第で様々な使い方が考えられるでしょう。 NEditorJSの使い方 NEditorJSのメイン画面です。 ノードはマウスで接続できます。 実際に操作しているところです。 NEditorJSでは、まずアウトプット側の黒丸をクリックして、その後インプット側の黒丸をクリックします。自動的に線が伸びていくので分かりやすいでしょう。ノードはマウスでドラッグ&ドロップできます。 ユーザ向けにビジュアルプログラミング環境やデータ処理環境を提供する際に使えそうです。NEditorJSはHTML5/JavaScript製のオープンソース・ソフト
scrollMonitor - 大量のデータもスムーズにスクロール
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Web上で大量のDOMを表示するのは自殺行為です。Webブラウザの動きがガクガクになったり、フリーズしてしまったりします。そのためページネーションが使われるのですが、業務要件として全データの表示を求められることは多々あります。 そんな時にはscrollMonitorを使ってみましょう。大量のデータであってもスムーズなスクロールが可能になります。 scrollMonitorの使い方 利用例です。実際に表示されているのはこの見えている部分だけで、黄色と紫色の部分は消えたり、新しくDOMに追加表示されます。 見出しを残してスクロールもできます。 scrollMonitorではデータはメモリ上にありますが、それをスクロールにあわせて描画しています。また、不要になった部分は破棄しています。こ
awe.js - AR向けjQueryとも言うべきフレームワーク MOONGIFT
AR（拡張現実）を実現しようと思うと非常に面倒なイメージがあります。カメラの映像を取り込んでマーカーを認識したり、位置情報を使ったり、加速度センサーで向きを取ったりしなければなりません。 実はそれらの機能はすべてスマートフォンに入っていると言えます。そしてawe.jsを使えばjQueryのように容易にARアプリが作れるようになります。 awe.jsの使い方 現在は使えるブラウザが限られます。Firefox for Androidであれば対応しています。まずは位置情報系のAR。 マーカー系も使えます。 awe.jsではこの他、Oculus Riftと組み合わせたり、Google GlassやLeap Motion向けにも作ることができます。Webブラウザ上でARアプリを作ってみたい方はawe.jsを使うと良いでしょう。 awe.jsはJavaScript製のオープンソース・ソフトウェア（MI
JpegCamera - Webカメラの映像を画像化
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 最近のノートPCではWebカメラが搭載されるのも当たり前になっています。そしてHTML5ではWebカメラから映像の取り込みが可能です（Safariはできませんが）。しかしなかなか活用事例は多くありません。 そこにはWebカメラから取り込んだ映像を画像ファイル化したりするのが面倒という問題があります。そこで使ってみたいのがJpegCameraです。 JpegCameraの使い方 JpegCameraのコード例は次の通りです。 var camera = new JpegCamera("#camera"); var snapshot = camera.capture(); snapshot.show(); // Display the snapshot captureを実行するとJPEG
swip - 体験必須！複数デバイスを簡単に連携 MOONGIFT
Googleが作成した、複数のウィンドウを連携させるChromeの実験的デモを見たことがあるでしょうか。複数のウィンドウ間でメッセージを飛ばすことでデータの位置やステータスを同期させていると思われます。 そんなデモを複数のスマートフォン、タブレットでできてしまうのがswipです。 swipの使い方 swipを使っているところです。 手前のブラウザから飛んでいったボールが別なデバイスに移っているのが分かるでしょうか。 swipではブラウザの画面同士を指でくっつけるような動作をします。それによってウィンドウの場所がつながります。さらにデバイスのインチ数を入力することで影響を受ける範囲が決定します。これは体験として非常に面白いのでぜひお試しください。 swipはHTML5/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 paulsonnentag/swip:
Mobile-Checker - w3c製のモバイルサイトチェッカー
スマートフォンの世界は進化が速く、スマートフォンに対応したWebサイトを正しく作れているかどうかは熟知している人であってもなかなか判断できないのではないでしょうか。そんな時には本家であるw3cの仕様に沿うのがベストです。 今回紹介するMobile-Checkerはw3cが作成しているモバイルデバイスへの適合性チェックツールです。 Mobile-Checkerの使い方 現在、3種類のデバイスの大きさでチェックできます。 こんな感じで問題点が出ますが、現在は途中でエラーになってしまいます。 Mobile-Checkerでは特定のデバイスではなくディスプレイの大きさに合わせた適合性を判断してくれます。基本的にw3cの仕様に合わせてWebブラウザは開発されているので、Mobile-Checkerの指摘に合わせて修正すればOKなはずです。 Mobile-CheckerはJavaScript製のオープ
Selection Sharer - ブログやサイトのシェアをスムーズに
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ブログ記事などを見ていて、気になった文章があったらシェアしたくなるでしょう。そんな時に文字列をコピーしてメーラーやソーシャルメディアを開いて、リンクなども貼り付けて…なんてやっていたら面倒でシェアを止めてしまうでしょう。 Mediumでは選択した文字の上にツールチップを表示してすぐにシェアできますが、同様の機能を提供するのがSelection Sharerです。 Selection Sharerの使い方 利用しているところ。文字列を選択するとツールチップが出ます。基本形はTwitterとメールです。 Twitterを選択すると選択した文字列を引用しつつ、リンクも追加されます。 メールの場合はHTML形式で、リンクなどが追加されます。 Selection Sharerを使えばユーザは
Docpress - 読みやすい開発者向けドキュメントを生成
開発者向けのドキュメントシステムなんて何でも良いと思っていないでしょうか。開発者はオンラインドキュメントをよく読み、Googleで検索し、そこにあるコードをコピーして実行します。そのため、半端なドキュメントでは彼らの信頼を失ってしまうでしょう。 そこで使ってみたいのがDocpressです。Markdownベースのドキュメント生成システムです。 Docpressの使い方 デモです。左側に目次、右側にコンテンツが表示されます。 ページの下に次のページへのリンクが表示されます。 メニューは隠せます。 Docpressは文字が大きめ、デザインもすっきりしたドキュメントを生成します。使い方としても docpress s でプレビューができるなど、とても簡単に使い始められます。 Docpressはnode/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 docpr
ClipBoard - Flashいらずなクリップボード操作ライブラリ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webにおいて常に問題視されるのがクリップボードの扱いです。テキストや画像をコピーするためにいつも選択するのは面倒ですし、HTMLの装飾までくっついてきてしまうのも難点です。 そこで使ってみたいのがClipBoardです。Flashを使っていないクリップボード操作ライブラリです。 ClipBoardの使い方 簡単な使い方です。これでHelloという文字がコピーされます。 <button id="btn" data-copy-content="Hello">copy 'Hello'</button> <script> // fast bind superClipBoard.bind(document.getElementById('btn')); </script> HTMLのテーブ
Mojik - 日本語文章の可読性を向上させるJavaScript
Webにおける日本語はちょっとした工夫が読みやすくなります。例えば日本語と英単語の間には半角スペースを空けた方が良いでしょう。また、全角括弧を使うと間が空きすぎてあまり良くないのですが、半角では詰まりすぎるといった具合です。 そうした日本語の文章におけるちょっとした問題を解決してくれるのがMojikです。和文の文字組を上手にコントロールしてくれます。 Mojikの使い方 適用前と適用後の文章です。括弧が連続した時に隙間を狭めています。 別な例。英数字の前にスペースが空いているのが分かるでしょうか。 小さな隙間を使うことで可読性がぐっと向上します。書籍や雑誌では文字組は微妙に調整しますが、Webの場合はデフォルトのまま使われがちです。Mojikを使えば改善できるでしょう。 MojikはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 Mojik terke
express-status-monitor - Express製のステータスモニター
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 最近では多くのサービスがステータスを公開しています。問題が起こればすぐに分かりますし、トラフィックが上がっているか、APIが正常に動作しているか開発者も簡単に理解できます。 今回はExpressで作ったサービスに簡単に組み込めるexpress-status-monitorを紹介します。 express-status-monitorの使い方 デモの画面です。 データはリアルタイムに刻々と変わります。 express-status-monitorは既存のExpressアプリケーションの中に簡単に組み込めます。GitHubのステータスページにインスパイアされたとのことです。express-status-monitorを別サーバで提供するようにすればサービスのステータスページとして使えるで
ShiftJS - SwiftのコードをJavaScriptに変換
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました JavaScriptは好みの分かれるプログラミング言語です。特にコンパイル系の言語を書いてきた人に嫌がられる傾向があります。また、コールバックや非同期の仕組みも好まれない傾向があります。 もしSwiftエンジニアがどうしてもJavaScriptを書かなければならないとしたら使ってみたいのがShiftJSです。 ShiftJSの使い方 shift.jsを使ってSwiftのコードを変換します。 $ shift.js test.swift test.js saved. All files converted 変換されたコード。 $ cat test.js var name = 'Joe'; var num = 5; var anotherNum = 6; var yetAnotherNu
Monaco Editor - VS Codeでも使われているWebベースのプログラミングエディタ MOONGIFT
Web上でコードを書けるサービスが増えています。そのままファイルとして保存したり、クラウド上で実行できるようになっています。そうした時にデフォルトのテキストエリアを使っていては全く書く気がなくなってしまうでしょう。 そこで使ってみたいのがMonaco Editorです。Microsoft製のプログラミングエディタVS Codeでも使われているソフトウェアです。 Monaco Editorの使い方 メイン画面です。行番号がついて、カーソル行が分かりやすく囲まれています。 テーマを変更しました。各種言語に対応したハイライタが備わっています。 CSSでテーマをハイコントラストに変更しました。 言語によってはこのようなツールチップ表示もサポートされています。 Diff（差分）エディタもあります。 2画面だけでなく、1画面での表示も行えます。 Monaco EditorはVS Codeでも使われてい
Kissui.scrollanim - CSS3/JavaScriptによるスクロールアニメーション MOONGIFT
SPA（シングルページアプリケーション）で効果的なのがスクロールに伴うアニメーションです。ページ全体が長くなりがちなので、アニメーションを盛り込むことで変化をつけられるようになります。 今回紹介するKissui.scrollanimはCSS3ベースのアニメーションライブラリになります。高速でスムーズなアニメーションが実現できるでしょう。 Kissui.scrollanimの使い方 Kissui.scrollanimはHTMLタグで指定できます。 <p data-kui-anim="fadeIn">Show this with fade-in</p> 実際のスクロールをしているところです。 Kissui.scrollanimではコンテンツが徐々に出現したり、バウンドする、大きさを変えるといったようなアニメーションがHTMLだけで簡単に指定できます。後はスクロールをJavaScriptが検知し
Barba.js - ページ遷移をアニメーションで実行 MOONGIFT
Webページは一般的にリンクをクリックするとURLが変わってページ全体が再読み込みされます。ページのローディングも時間がかかりますし、ユーザビリティとしてイケてるとは言いがたいでしょう。 そこで使ってみたいのがBarba.jsです。URLをクリックした時のページ遷移をアニメーションをまじえつつ行ってくれます。 Barba.jsの使い方 デモです。クリックすると写真が拡大されます。これはすべて別なHTMLです。 こちらはスライド的なページ遷移です。スマートフォンアプリの画面遷移に近いかも知れません。 さらにアイコンにしたパターン。ページを遷移する際には一旦ページの一番上にスクロールしてからコンテンツが表示されます。 Barba.jsはSPA（シングルページアプリケーション）を構築する際に使えそうなソフトウェアです。一つのHTMLで管理しているとメンテナンスが大変になりますのでBarba.js
Froala WYSIWYG HTML Editor - 綺麗なデザインのWYSIWYGエディタ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 昔のWYSIWYGエディタと言うとツールバーに多くの機能が並んでおり、生成されるHTMLは相当分かりづらいものでした。機能が豊富すぎたために表示速度が重たかったり、一般ユーザにとっても混乱しかねないものだったと思います。 現在ではずいぶん進化しており、すっきりとしたデザインで使いやすいものが増えています。今回はFroala WYSIWYG HTML Editorを紹介します。 Froala WYSIWYG HTML Editorの使い方 Froala WYSIWYG HTML Editorには幾つかのモードがありますが、ツールチップモードでは文字を選択すると装飾が出ます。 画像も選択できます。 大きさを変えることもできます。 YouTube動画を埋め込み。 絵文字も使えます。 ツー
Holmes - ページ内の情報を素早く検索
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました サイト検索は常に問題になります。Web全体を対象とするならばGoogleでも良いでしょう。その反動か、サイト独自の検索は突然使い勝手が悪く感じられるものです。少しでも使いやすい検索を提供しないとユーザは離れてしまいます。 今回はJavaScriptベースのページ内検索、Holmesを紹介します。JavaScriptだけあってインクリメンタルに検索できます。 Holmesの使い方 検索ボックスにキーワードを入れると即座に情報が絞り込まれていきます。 実際に使っているところです。 一つだけになるとDOMの幅が変わっています。 使い方としても、 holmes({ input: '.search input', find: '.results blockquote' }); のように使うだ
Pairs - スマートフォンを使ってデスクトップブラウザを操作 MOONGIFT
GoogleなどがHTML5を使って、デスクトップとスマートフォンを連携させたゲームを時折公開します。スマートフォンをコントローラとすることで、加速度センサーや傾きを使った、よりインタラクティブなゲームが開発できるようになるでしょう。 今回はそんな操作を可能にする技術基盤になるPairsを紹介します。学べるポイントが多いのではないでしょうか。 Pairsの使い方 Pairsをデスクトップで表示すると、QRコードと検証用のキーが表示されます。 スマートフォンでサイトを訪れて検証キーを入力すると操作が同期します。 スマートフォンでスライドを変更できます。縦、横向きは検知できない（画面上には反映されない）模様です。 Pairsはスマートフォンとデスクトップを同期させ、スマートフォンでのイベントをデスクトップへ伝えてくれます。仕組みとしてはWebSocketを使ったものになります。技術的に面白いソ
opn-cli - コマンドからリンクやファイルを開く
macOSにはopenコマンドがあります。これは便利なコマンドで、ファイルやURLを渡せば適切なソフトウェアで開いてくれます。しかし簡単に使える反面、細かなカスタマイズはできません。 さらに他のプラットフォームでも使ってみたいという方は多いかと思います。そこでインストールしたいのがopn-cliです。 opn-cliの使い方 コマンドはopnになります。便利なのはアプリケーションを指定できることで、普段使っていないブラウザでURLを開くこともできます。 $ opn http://sindresorhus.com -- 'google chrome' さらに文字列をWebブラウザで開くなんてこともできます。 opn-cliは多くの拡張子に対応しており、そのファイルを扱えるソフトウェアでファイルを開いてくれます。文字列は適切なmimeTypeを判断し、アプリケーションを振り分ける仕組みです。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
