hls.js - JavaScript製のHTTP Live Streamingクライアント MOONGIFT
Appleがキーノートなどの配信に使っているのがHTTP Live Streamingと言われるプロトコルです。特別なプロトコルではなく、HTTPを使っているのがメリットですが、サポートしているブラウザがSafariくらいというのが難点です。 そこで使ってみたいのがhls.jsです。JavaScriptで作られたHTTP Live Streamingクライアントです。 hls.jsの使い方 設定も用意されています。エラーが出ても自動で回復してくれます。 Google Chromeでも動きます。10秒前後に動かすといったアクションもJavaScriptからできます。 hls.jsを使えばモダンなブラウザであればHTTP Live Streamingを提供できるようになります。良い動画配信プロトコルが見つかっていなかった方はhls.jsを使ってみてはいかがでしょう。 hls.jsはJavaSc
ExcelMerge - Excelファイルの差分ビューワー
Excelを仕事で使っていると、メールでやり取りしたり誤った上書きを避けるためにコピーを作ったりして次第に同じようなExcelファイルに埋もれることになります。二つのExcelファイルを並べて、どこが違うのか見比べた経験は誰しもがあるのではないでしょうか。 そんな方に使ってみて欲しいのがExcelMergeです。Excelファイルの差分チェックツールです。 ExcelMergeの使い方 簡易的なExcelファイルを二つ比べています。 変更されたセル、追加された行などにジャンプできます。 設定で色や動作を変更できます。 ExcelMergeは将来的にマージ機能の実装を目指していますが、現時点では差分表示までとなっています。とは言え、差分が見える形になっているだけで作業負荷は大幅に軽減されるのではないでしょうか。Excelをよく使っている方にお勧めです。 ExcelMergeはWindows用
Jasonette - JSONでiOSアプリを開発するフレームワーク
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 一昔前のTitaniumであったり、React NativeはJavaScriptをネイティブのJavaScriptエンジン上で実行してネイティブのコンポーネントを使えるようにしています。それを使ってReact Nativeではコードを即時反映しながら開発ができるようになっています。 そんな開発スタイルを一歩推し進めたのがJasonetteです。なんとJSONのみでiOSアプリが開発できるようになります。 Jasonetteの使い方 JasonetteのJSONの例です。これはInstagram風UIを作るものです。 { "$jason": { "head": { "data": { "posts": [{ "type": "stories", "items": [{ "avata
in-view.js - DOMの表示/非表示になったタイミングでイベント実行 MOONGIFT
Webページの表示を遅くする要素としてJavaScriptがあります。Webページは縦長になりがちで、表示されていない部分も含めて処理を行ってしまうと使えるようになるまで時間がかかってしまいます。 そこで使ってみたいのがin-view.jsです。指定したDOMが表示されている、または非表示になったタイミングでイベントが実行できます。 in-view.jsの使い方 例えば表示されたタイミングでは次のように指定します。 inView('.someSelector').on('enter', doSomething); 逆に消えた時には次のようにします。 inView('.someSelector').on('exit', doSomething); ソーシャルボタンなど、一度だけ実行されればいいものはonceを使います。 inView('.someSelector').once('enter'
MERN - Express/Reactを使ったWeb開発フレームワーク MOONGIFT
Linux + Apache + PHP + MySQLの組み合わせがWeb開発のスタンダード的な位置づけになっていた頃、それぞれの頭文字をとってLAMPスタックと言うのが流行りました。同様にフレームワークが変わるために名称も異なってきました。 今回はMERNスタックを標榜するソフトウェアを紹介します。MongoDB + Express + React + nodeという組み合わせのアーキテクチャになります。 MERNの使い方 MERNのディレクトリ構成は次のようになっています。サーバサイドはMVCに分かれており、Reactを使ったサーバサイドレンダリングを行っています。 テストのサーバを立ち上げたところです。ブログエンジンとなっています。右側にReactで持っているオブジェクトの内容が確認できるのがユニークです。 データの詳細も確認できます。 クリックで画面は変わりますが、サーバへのアク
React-designer - React製のベクターグラフィックスエディタ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Reactを使った多くのコンポーネントが出てきました。Reactの利点として、デザインも一緒になっているので再利用しやすいということが挙げられます。そのため、良いコンポーネントだと思ったら、自分のプロジェクトに取り込むのも難しくないでしょう。 今回はその一つとしてReact-designerを紹介します。Reactで作られたベクターグラフィックスエディタです。 React-designerの使い方 デモ画面です。この四角いオブジェクトがそれぞれ編集できます。 プロパティがあり、色を変えたり、並び替えることもできます。 実際に操作しているところです。オブジェクトの追加も可能です。 React-designerはともすると移動の制御などの面倒くさい機能をReactを使うことでうまく実装
material - マテリアルデザインを行うベースにどうぞ
Googleの提唱するマテリアルデザインはAndroidだけに止まらず広がりを見せています。特にWebデザインは相性が良いようで、フラットにしたけれどクリッカブルな場所が分からなかったり、あまりに簡素化されたデザインでかえってユーザを混乱させてしまうことがあります。 そんな時にマテリアルデザインを使うことでユーザビリティの高いサイトを構築できるでしょう。そこでベースに使ってみたいのがmaterialです。 materialの使い方 materialはフレームワークと言うよりもテンプレートに見えます。 materialはまさにGoogleでよく見られるようなデザインを作ることができます。グリッドなど、フレームワークによくある部品はありませんが、十分にこったデザインのサイトを作ることができるでしょう。 materialはHTML5/JavaScript/CSS3製のオープンソース・ソフトウェア
SVGをもっと活用するために使いたい·svg.js MOONGIFT
svg.jsはアニメーションやイベント駆動型のSVGを実現するライブラリです。 SVGはまだ広く利用されているとは言いがたいですが、ビットマップではなくベクターデータなので拡大してもきれいなど特徴が多数あります。今回紹介するsvg.jsはSVGを使ったアニメーションを実現するライブラリになります。 デモです。単純なオブジェクトの生成、移動、中央寄せが簡単に指定できます。 クローンして重ね合わせ。重心の判定、傾けるのも手軽です。 X軸、Y軸のずらし。塗りつぶし。 枠だけを描く、グラデーション（線形、円形）。 クリック、マウスオーバー、画像マスクもできます。 クリックしたオブジェクトだけ色を変更します。 さらにアニメーションも自在に。 プラグインによる拡張もサポート。 svg.jsを使えばアニメーションはもちろんのこと、画像を重ねて表示したり、マウスイベントによって形状や色を変更したりすること
無茶しやがる…JavaScriptだけでZipファイルを生成、ダウンロード·JSZip MOONGIFT
JSZipはWebブラウザ上、クライアントサイドだけでJavaScriptを使ってZipファイルを生成するソフトウェアです。 JavaScriptでできることがどんどん増えています。そんな中、注目したいのがJSZipです。なんとJavaScriptだけでZipファイルを作ってしまうというとんでもないソフトウェアです。 デモページです。コードを見て分かる通り、テキストファイルと画像をZip圧縮しています。 実際ダウンロードされたZipファイルを解凍すると確かにフォルダやファイルが入っています。テキストの内容を変えればダウンロードされたファイルの中身も変わっていました。 JSZipが面白いのは動的にZipファイルを作成できることではないでしょうか。ユーザにコンテンツをダウンロードさせたいという時にその場の内容をそのまま圧縮して送れるようになります。アイディア次第で色々な使い方ができそうなソフト
エラーやインフォメッセージの通知に使いたい。jQuery製通知ライブラリ·Notifier.js MOONGIFT
Notifier.jsはGrowl風通知を行うjQueryプラグインです。 Mac OSXではGrowlという有名な通知ソフトウェアがあります。バックグラウンドでの処理結果や、何か問題があった際に通知が出るのは慣れると手放せません。そんなGrowlに似た通知をjQueryで実現するのがNotifier.jsです。 リンクをクリックすると通知が右上に表示されます。この通知は一定時間が経つと消えます。 複数を同時に表示させることもできます。アイコン、タイトル、内容がカスタマイズできます。 いくつも出せます。 表示するコード。success、info、warning、errorを指定できます。 Notifier.jsを使えば見た目のデザインを変えずにエラーメッセージやお知らせを通知できるようになります。 Notifier.jsはjQuery/JavaScript製のソフトウェア（ソースコードは公
スマートフォン向けサイトのデバッグに。JavaScriptを使ってiPhoneと対話する「iPhone JS Console」
iPhone JS ConsoleはWebSocketを使って母艦とiPhone間でJavaScriptを対話的に利用するソフトウェア。 [/s2If] iPhone JS ConsoleはWebベース、iPhone用のフリーウェア（ソースコードは公開されている）。スマートフォン向けのサービス提供を考える上で、ネイティブアプリにするかWebベースにするかは重要な決断だ。もちろんどちらかに限る必要はないが、どちらかの開発が優先されるものだろう。 iPhone側 もしWebベースにするならばエミュレータを使って開発するだろうが、最終的には実機で確認する必要が出てくるだろう。その時に問題になるのがデバッグ用の機能が殆ど用意されていないことだ。そこで使えそうなのがiPhone JS Consoleになる。 iPhone JS ConsoleはiPhoneから実機に接続して、コンソールを利用するとい
Gitを使って誰でもDropboxを作れる·RubyDrop MOONGIFT
RubyDropはRuby製のオープンソース・ソフトウェア。個人的にDropboxはとても便利に使っている。これなしの生活は考えられないくらい便利だ。有料であれば50GBまで使えるが、無料版の2GBでは物足りないと感じる人も多いだろう。だがお金は払いたくないという人もいるだろう。 サーバ起動中 そこで考えたいのが自分だけのDropbox構築だ。重要なのは自動的に同期されるシステムであること、バージョン管理されること、複数のコンピュータ間でデータが同じ状態に保てることだろう。それらを実現するのがRubyDropだ。 RubyDropはRuby1.9系で動作するソフトウェアだ。簡単に言えば、特定のフォルダに関してRubyDropが監視を行う。そして変更があると内容をリモートのGitリポジトリにアップデートする。Gitリポジトリ側で変更があれば、Pullする仕組みだ。 自動的に同期されている G
まさに未来的！Webカムの動きをリアルタイムに解析する·as3motion MOONGIFT
as3motionはWebカムの映像を読み込み、解析するライブラリ。 as3motionはActionSctip3製のオープンソース・ソフトウェア。近未来を描いた映画では必ずと言っていいほど出てくるのが空中に飛び出すPC映像と、それを空中で操作する場面だ。あれが実現したとしたら、確かに非常に面白いだろう。 指先に火のイフェクトが あのレベルまではいかないが、AR（拡張現実）も徐々に進化している。リアルの映像にリアルタイムにオブジェクトを投射したり、それを動かすこともできるようになった。マーカーを使わずに映像を解析し、オブジェクトを投影するのがas3motionだ。 as3motionはFlash用のライブラリで、Webカムを使ってリアルの映像を取り込む。そしてその映像をリアルタイムで解析し、編集してPC上に表示する。例えば映っているオブジェクトに炎のイフェクトを加えて投影したりする。 ピン
iPhone/iPadで使えるHTMLソースビューワー·Snoopy MOONGIFT
SnoopyはJavaScript製のフリーウェア（ソースコードは公開されている）。iPadやiPhoneの最適化サイトを構築していて面倒なのが、HTMLソースの閲覧機能がないことだ。シミュレータですら閲覧できないのでデバッグがしづらい。ユーザエージェントを変えればPCからでも見られるが、完全に真似する訳ではない。 プロパティ 必要なのは、iPhone/iPad上でその場でHTMLソースを見る機能だ。今表示されている内容をそのままソース表示する、そんなブックマークレット型ソフトウェアがSnoopyになる。 Snoopyは自分でサーバを立てても良いし、Snoopy配布サイトにあるブックマークレットを使っても良い。いずれにしてもiPhone/iPad上で実行するとフローティングウィンドウが表示される。文字コードやHTML構成についての情報が閲覧できる。 こちらは生成されたHTMLソース そして
iPhoneシミュレータで動作するアプリを他の開発者にも渡す·iPhoneSimulatorExchange MOONGIFT
iPhoneSimulatorExchangeはMac OSX向けのフリーウェア。iPhoneSimulatorExchangeはちょっと説明の難しいアプリケーションだ。iPhoneアプリを誰かに試してもらおうと思った時、一つはAppStoreに登録して、キャンペーンコードを通じてiPhoneにインストールしてもらうという方法がある。だがこれは審査を通過するまでのステップが必要だ。またad hocを使って行う方法もあるが、若干手間がかかるのは否めない。 iPhoneエミュレータに入っているアプリケーションをインストーラーに コンセプト的に作ったアプリケーションを試してもらうためだけに、ソースコードごと渡してMac OSXでコンパイルしてもらうのはどうだろう。だがこれは相当に面倒だし、ソースコードを公開するのを控えたいこともあるだろう。そこで使えるのがiPhoneSimulatorExcha
MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Tank Vs Zombie Game Built in Ruby - Rubyで書かれた戦車 vs ゾンビゲーム Jul 16, 2021 - 1 min read Kopia - マルチベンダー対応のバックアップソフトウェア Jul 16, 2021 - 1 min read Polyfoto - モザイク画像を作成するPythonスクリプト Jul 15, 2021 - 1 min read SwiftLaTeX - WebベースのLaTeXエディタ Jul 15, 2021 - 1 min read Div.js - divタグだけでHTMLページを作成できる？ Jul 14, 2021 - 1 min read ASCIIFlow - アスキーアート用ドローアプリ Jul
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
