WhitestormJS - 物理エンジンを備えた3D Webアプリケーションフレームワーク MOONGIFT
Web上で3Dを表現するのはコツがいります。THREE.jsのような専用のライブラリもありますので、そうしたものを使うのが良いでしょう。そこに物理演算を追加するとさらに込み入った難しさが出てきます。 今回紹介するオープンソース・ソフトウェアはWhitestormJS、物理エンジンを備えた3D Webアプリケーションフレームワークです。 WhitestormJSの使い方 WhitestormJSのデモです。玉が落下してきます。 イースター。クリックするとキャラクターがジャンプします。 土星のようなデモ。マウスでズームしたり視点の変更ができます。 ドミノ倒し。 WhitestormJSを使ったからと言って、3D Webアプリケーションがさくっとできるわけではありません。しかしWhitestormJSの作法に沿うことで面倒だった部分が大幅に改善することでしょう。3Dで物理演算を含めたWebアプリ
jQuery Select Areas - 一つの写真から複数の範囲を指定
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました クロップ（切り抜き）をサポートするライブラリはたくさんあります。顔写真をアップロードして一部だけ切り抜くのはよくありますし、写真の中の余計な部分を消す際にもクロップが使われます。 今回はちょっと面白い、複数範囲のクロップをサポートしたjQuery Select Areasを紹介します。 jQuery Select Areasの使い方 デモです。2つの範囲が表示されています。それ以外の部分はぼかしてあるのが面白いです。 さらに追加できます。重なった範囲は共通して使われます。範囲はピクセル情報で取得できます。 範囲は幾つでも追加できます。追加した場所は左上の場所と幅、高さで取得できます。 jQuery Select Areasは表示も特殊なので、使い方を考える必要がありそうです。クロッ
ImageMaps - Naver製。地図画像の編集ツール MOONGIFT
地図は地図のまま利用するのではなく、多くの場合その上にアイコンを載せたり線を描いたりします。そうすることで目的の場所を目立たせたり、駅などから目的地へ移動しやすくなるでしょう。 今回紹介するのはImageMaps、地図の上にアイコンなどを載せられるjQueryプラグインです。 ImageMapsの使い方 編集画面です。アイコンやテキスト、円や四角などが描けます。 こんな感じでアイコンを載せて大きさを変えたりしながら地図を編集していきます。 できあがった地図。これは画像ではなく、SVGとなっています。 ImageMapsの編集結果は読込専用のSVGとなっています。画像ではないので注意してください。日本語なども問題なく扱えますし、アイコンやドローを多彩にすると便利そうです。 ImageMapsはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT License）です。
step by stepで始めるwebpack - Qiita
※webpack1系の記事です。 1→2への移行ガイドを見る限り破壊的な変更点はそんなにありませんが、preLoadersやpostLoadersがなくなっていたり、差が出ていますのでご注意ください。 https://webpack.js.org/guides/migrating/ webpackを手を動かしつつ学べる初学者向け資料を作成しました。 公式のチュートリアルもあるのですが、webpackが使用されているOSSのボイラープレートを見る限り、世の中の使われ方に沿ってないかも？と思い書きました。 これから始める人の手助けになれば幸いです。 また最終形のソースをupしてあるので詰まったら見てください。 webpackとは webpack で始めるイマドキのフロントエンド開発の説明が良かったので引用させていただきます。m(_ _)m webpack は WebApp に必要なリソースの依
Diff Cam Feed - Webカメラを使ったモーションディレクト&Twitter投稿
Webカメラを使うと手軽にセキュリティカメラを実現できます。大事なのは物体の動きがあった時にちゃんとそれを捉える機能と、その後どこかに通知する機能ではないでしょうか。 そんな機能を実現してくれるのがDiff Cam Feedです。Webカメラを使ってモーションディテクションを実現しつつ、スナップショットをTwitterに投稿します。 Diff Cam Feedの使い方 動作デモです。動かすとその差分が緑のドットで表現されます。 実際に動かしているところ。リアルタイムに解析されています。 モーションが判定されると、それが予め連携しているTwitterアカウントに投稿されます。自分のアカウントでも良いでしょうし、別なアカウントで監視目的に使っても良いのではないでしょうか。 Diff Cam Feedはnode/JavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明
Microlight.js - 任意の言語に対応するコードハイライター MOONGIFT
ブログなどでコードを掲載する際にはコードのハイライト処理が欲しいと思うでしょう。多くのコードハイライターはプラグインのような仕組みで多数のプログラミング言語に対応しますが、非対応の言語についてはハイライトできません。 今回は言語に依らないMicrolight.jsを紹介します。ハイライト機能は少ないですが、どんな言語でも使えるのがポイントです。 Microlight.jsの使い方 ハイライトの例です。配色はシンプルですが、HTML中にJavaScriptを埋め込んだりした場合も対応しています。 CSSやオリジナルの言語でも使えます。 ミニファイされたコードにもある程度対応しています。 ハイライトされた色は好みが分かれるところですが、設定を変更すれば良いでしょう。ハイライト機能はキーワードとそれ以外しかないので単純ですが、新しい言語にも対応できるので他のハイライタ-が未対応の場合は使いやすそ
image-diff - 画像の差分表示
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 開発者であれば差分表示に普段からお世話になっているでしょう。コードのどこを直したのか、どこが削除されたのかなどはDiffを使わなかったら目で探すことになってとても大変です。そして、それはテキストだけではありません。 今回紹介するオープンソース・ソフトウェアはimage-diff、画像で差分表示を行ってくれるライブラリです。 image-diffの使い方 一つ目の画像です。 二つ目の画像です。 差分を取ると、このような画像が生成されます。 image-diffは二つの画像と、その差分となる画像の3つの引数で実行されます。プログラムの中に組み込むこともできます。異なる部分が赤く表示されるので、どこが変わっているのかは一目瞭然でしょう。デザイナーの方などは必須のツールになるのではないでし
PageVisibilityEvent - ページがフォアグラウンドか否かでイベント実行 MOONGIFT
最近のWebサービスでは定期的にサーバとの通信を行っているものが多数あります。情報がリアルタイムに更新できるというメリットがある一方、通信量が増えてしまうと言う欠点があります。 そこで使ってみたいのがPageVisibilityEventです。ページがフォアグラウンドかどうかを判定できるJavaScriptライブラリです。 PageVisibilityEventの使い方 利用例です。タブがメインになっているかどうかでイベントが起きています。 タブのところにある絵文字が変わっていたりします。 PageVisibilityEventを使うとフォアグラウンドでない時には通信を抑えたり、余計なアラートを出さないと言った工夫ができるようになります。ユーザはもちろん、サーバにとっても嬉しい仕組みでしょう。 PageVisibilityEventはJavaScript製のオープンソース・ソフトウェア（M
WebGazer.js - WebカメラとJavaScriptによるアイトラッキングシステム MOONGIFT
ユーザテストでユーザの視線がどこに移動しているのかチェックするのは必要です。ただし、アイトラッキングシステムを使うのはとても複雑ですし、コストもかかります。手軽にするため、マウスのトラッキングで済ましてしまっているケースもあります。 そこで使ってみたいのがWebGazer.jsです。JavaScriptとWebカムを組み合わせてアイトラッキングを実現しています。 WebGazer.jsの使い方 使っているところ。顔が認識されているのが分かります。 目線をオレンジのボールに持っていくらしいのですが…なかなか思い通りには動きません。 WebGazer.jsの精度はまだまだ実用レベルではないですが、Webカメラを使うことで視線の動きが追えればアイトラッキングシステムを手軽に使えるようになるでしょう。テストはもちろん、視線を使った情報入力などにも応用できそうです。 WebGazer.jsはHTML
md2googleslides - MarkdownファイルをGoogleスライドに変換
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 最近、Markdownファイルで作成してHTMLプレゼンに展開するソフトウェアが増えています。便利なのですが、ちょっとしたアニメーションを追加したいなど既存のプレゼンソフトウェアで最後の仕上げをしたいこともあるでしょう。 そこで使ってみたいのがmd2googleslidesです。MarkdownファイルをGoogleスライドに展開してくれるソフトウェアです。 md2googleslidesの使い方 変換したスライドです。日本語も使えます。 背景画像を指定することもできます。 テーブル表示も行えます。 md2googleslidesでは他にも動画の埋め込みやコードの表示も行えます。Markdownを使ってコンテンツを作成し、後はmd2googleslidesでGoogleスライドに載
ZangoDB - IndexedDBをMongoDB風に操作
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました HTML5ではKVSとして IndexedDBという機能が提供されています。localStorageなどよりも多くの情報を保存したり、検索したりすることもできるので便利に使えます。しかし使い方を覚えるのが若干面倒です。 そこで使ってみたいのがZangoDBです。IndexedDBをMongoDB風のAPIで操作できるようになります。 ZangoDBの使い方 ZangoDBのサンプルコードです。 let db = new zango.Db('mydb', { people: ['age'] }); let people = db.collection('people'); let docs = [ { name: 'Frank', age: 20 }, { name: 'Thomas
jQuery Tocible - jQuery製の自動生成型目次ライブラリ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webページで長いコンテンツを書いた場合、あらかじめ目次が用意されます。しかし多くの目次は文頭にあり、途中から選ぶことはできません。また、見出しレベルを細かくすると目次だけで長くなってしまって可読性が落ちてしまいます。 そこで使ってみたいのがjQuery Tocibleです。ヘッダーを使って自動生成し、使いやすい目次を提供します。 jQuery Tocibleの使い方 コンテンツの右側に自動生成された目次が表示されます。 スクロールすると小見出しが表示されます。 さらにスクロール。 実際に使っているところです。ハイライトされる部分がスクロールに合わせて変化しているのが分かります。 jQuery Tocibleは自動生成された目次で、かつフローティング表示なのでコンテンツを読みつつ、
Scrum Board - カンバン機能だけを取り出したJavaScriptライブラリ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました GitHubがIssuesをカンバン風に表示する機能を提供するようになっていますが、Issuesを使っていない場合もあります。自社のタスク管理を使っていて、カンバン機能だけを取り入れたいと考える人もいるでしょう。 そんな方に使ってみて欲しいのがScrum Boardです。JavaScript製のカンバンライブラリです。 Scrum Boardの使い方 Scrum Boardの画面です。 エディットモードになると情報が増えます。 ドラッグ&ドロップで移動できます。 タスクの追加画面です。 日本語のタイトルは残念ながら文字化けしてしまいました。 Scrum Boardはバックエンドのないカンバンシステムなので、データをJSONなりで与えるようにすれば既存のシステムと連携させることもでき
Really Simple Weather - Web APIを使って簡単に天気情報を取得
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました インターネットはリアルと対極にあると考えがちですが、実際にはリアルを補完する存在として使われることのが多いです。スマートフォンでは天気アプリが使われることが多く、Yahooの雨雲レーダーのように5分後、10分後の天気が気になるケースはよくあります。 そんな訳で天気情報は以外とオンラインでもウケが良いです。もしWebサイトに載せるながらReally Simple Weatherを使ってみましょう。 Really Simple Weatherの使い方 Really Simple Weatherはとてもシンプルに書けます。依存ライブラリはありません。 <script><br />reallySimpleWeather.weather({<br /> wunderkey: '', // l
Koto - D3.jsを使ったグラフライブラリ MOONGIFT
D3.jsと言えばデータのビジュアライズを行うJavaScriptライブラリです。多彩なグラフィックスを描けますが、高度な機能だけに使いこなすのも難しいという印象があります。 そこで今回はKotoを紹介します。D3.jsをベースに、グラフを描くライブラリです。 Kotoの使い方 Kotoのデモグラフです。 そのコードです。JavaScriptなのでコールバックが多数つけられるのが特徴的です。 // Basic Example class BarChart extends Koto { constructor(selection){ // setup chart var bars = this.base.append('g').classed('bars', true); // define layer var layer = this.layer('bars', bars, { dataB
traquer - Web上の操作を記録&再生
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webページではマウス操作やキーボード入力が折り混ざるので、どう操作したことによって不具合が出たかという再現するのが難しいことがあります。しかしユーザの操作の中に、解決のヒントがあるはずです。 そこで使ってみたいのがtraquerです。Webページにおける操作を記録、再生できるライブラリです。 traquerの使い方 録画中。左下のアイコンが変わります。 録画した後です。画面下に操作したログがビジュアル化されています。 一つ一つの操作にイベントが記録されています。 再生しているところ。マウスの軌跡が描かれています。 traquerではマウスの動き、クリックイベント、キーボード入力などをすべて記録して残しています。再生時には最初のページに戻った状態で開始する必要があります。また、画面
Certificate Dashboard - 証明書期限が一覧できるダッシュボード
SSL/TLS証明書の管理は面倒です。ついつい更新を忘れてしまってエラーが出たという経験は誰もがあるのではないでしょうか。大手のSSL事業者であればリマインダーメールもくれますが、これもスルーされがちです。 今回はWebブラウザで証明書の期限をチェックできるCertificate Dashboardを紹介します。 Certificate Dashboardの使い方 Certificate Dashboardのトップページです。ドメインは環境変数で指定できます。 22日後ということなので更新しました。 Certificate Dashboardを使えば証明書の期限をいつでも簡単にチェックできます。色分けもされるので赤くなったら更新するようにしましょう。 Certificate Dashboardはnode/JavaScript製のオープンソース・ソフトウェア（MIT License）です。
Winds - 個人の興味に合わせたフィードリーダー
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました フィードリーダーを使っている人はあまり多くないと思いますが、個人的にはまだまだ現役で使っています。効率的に多くの情報を収集しようと思うと、フィードリーダーが最適ではないでしょうか。 今回はそんなフィードリーダーの最新版、Windsを紹介します。エレガントなデザインが特徴です。 Windsの使い方 最初に興味のあるカテゴリを購読します。 記事の一覧です。空白が大きい、すっきりとしたデザインが特徴です。 購読しているフィードの一覧です。 WindsはGetStream.ioのサンプルソフトウェアで、個人の興味に合わせてコンテンツを最適化するというAPIが使われているようです。フィードを探す必要がなく、興味のある情報が入ってくるなら便利かもしれません。 技術的にはReact/Redux/
Scribe.js - nodeのログをカラフルに、かつWebブラウザ上で確認 MOONGIFT
最近Nodeで開発することが増えてきたのですが、標準出力に出てくるログはあまり見やすくありません。目的のデバッグメッセージがどこに出ているのか確認が面倒で、ターミナル上では検索もままなりません。 そこで使ってみたいのがScribe.jsです。ログを格好良く、見やすくしてくれます。 Scribe.jsの使い方 ログがWebブラウザで見られるようになります。左側がグループを選択できるようになっています。 Expressのログだけに絞り込み。 検索で絞り込みもできます。 Scribe.jsはカラフルなだけでなく、絞り込みもできるので開発時のログ確認がとてもスムーズになります。エラーなどログを分けておけばScribe.jsでの表示場所も変わるので分かりやすいでしょう。 Scribe.jsはnode/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 Scribe.
flv.js - JavaScript製のFLVプレイヤー MOONGIFT
Flashコンテンツは世の中に溢れていますが、HTML5への移行も進んでおり、利用度合いは右肩下がりです。しかしすでにあるコンテンツを移行するのも難しいでしょう。そこでHTML5/JavaScriptの力でレガシーなFlashコンテンツを実行する試みが多数あります。 今回はその一つ、flv.jsを紹介します。FLVフォーマットの動画を再生するソフトウェアです。 flv.jsの使い方 flv.jsが対応しているのはH.264 + AACとなっています。よくあるMP3には対応していないので注意してください。 動画ファイルを指定することも、別途JSONファイルを使ってファイルを指定することもできます。JSONを使った場合、複数の動画を指定できます。 フルスクリーン表示もできます。 対応している動画フォーマットが新しめのものになるので、再生できないファイルが多いかもしれません。しかし同じフォーマッ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
