Falco - Webサイトのパフォーマンスを可視化するダッシュボード MOONGIFT
Webの解析ツールというと、アクセスを解析するものが殆どです。ビューやUUを計測して、Webサイトの改善に活かします。それらのデータは管理者向けのものであり、訪問者はデータを渡すだけでした。 Falcoは異なる視点でデータを収集します。それはWebサイトの使いやすさ、パフォーマンスに注目しています。 Falcoの使い方 ダッシュボードです。 Lighthouseのレポートも見られます。 さらに細かい数字も分かります。 グラフの追加も可能です。 別なパフォーマンステスターの結果も見られます。 Falcoは自動的にデータを収集してくれるので、日々の更新によって徐々にパフォーマンスが劣化しているといった変化も分かるようになります。ページごとに解析できるので、改善すべきページもすぐに分かるでしょう。 FalcoはTypeScript製のオープンソース・ソフトウェア（MIT License）です。
Gixy - nginxの設定ファイルを静的解析して改善提案
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました HTTPサーバとしてnginxを使っているケースは多いかと思います。しかし設定に関する情報はまだまだ多くはなく、動くように設定はしても、それがベストなのかどうか判断できない方も多いのではないでしょうか。 そんな方にお勧めなのがGixyです。nginxの設定ファイルを解析して改善案を提示してくれます。 Gixyの使い方 Gixyのインストールは pip でできます。 pip install gixy 後はnginxの設定ファイルを指定するだけです。 $ gixy /path/to/nginx.conf ==================== Results =================== Problem: [host_spoofing] The proxied Host h
StyleCI - PHPのコーディングスタイルをチェック
CI、つまり継続的インテグレーションは何もコードのデバッグにだけ適用されるものではありません。自動的に、かつ継続的に何らかのチェックする仕組みを作れればCIになりえるでしょう。 StyleCIもその一つと言えます。StyleCIがチェックするのはPHPのコーディングスタイルになります。 StyleCIの使い方 極端に言えばStyleCIでエラーがあってもシステム上のバグがある訳ではありません。しかしコーディング規約に沿っていない記述はバグを生む可能性が高くなります。窮屈なコーディングスタイルにする必要はありませんが、PHPのPEARのようにライブラリのコーディング規約がある場合は、それに沿ってチェックする仕組みがあると便利でしょう。 StyleCIはPHP製、MIT Licenseのオープンソース・ソフトウェアです。 StyleCI - The PHP Coding Style Conti
php.tools·PHPコードの整形ツール MOONGIFT
ソースコードはPythonを除けばほぼ自由に書くことができます。その結果、アルゴリズムの話だけでなくそもそも見づらいコードが生まれたりします。インデントが揃っていないだけでもプログラマにとっては気持ち悪いでしょう。 もしあなたがPHPでそんなコードに出くわしたら使ってみたいのがphp.toolsです。指定したフォーマットに沿ってコードを整形してくれます。 php.toolsの使い方 例えば汚いコードはこんな感じ。 <?php for($i = 0; $i < 10; $i++) { if($i%2==0) echo "Flipflop"; } 整形を実行します。 $ php fmt.php before.php 元ファイルが上書きになってしまうのがちょっと怖いですが、結果として次のように綺麗になります。 $ cat before.php <?php for ($i = 0; $i < 10
Materialize - マテリアルデザインのためのCSSフレームワーク MOONGIFT
レスポンシブでWebデザインを組むのは当たり前、今のトレンドはマテリアルデザインにあるという時代になってきました。フラットUIを踏襲しつつ、アニメーションを効果的に使うことでさらにユーザビリティ高いデザインを可能にします。 主にモバイルアプリ用に使われていますが、Webデザインにおいても十分利用が可能です。今回はマテリアルデザインを実現するスタイルシートフレームワーク、Materializeを紹介します。 Materializeの使い方 今回はスクリーンショット多めに紹介します。 Materializeはレスポンシブかつマテリアルデザインのフレームワークになっています。開発の高速化、ユーザ体験重視、ドキュメントとサンプルを多めにして学習コストを低くするといった特徴があります。 MaterializeはHTML5/JavaScript/CSS3製のオープンソース・ソフトウェア（MIT Lic
イベント/セミナー情報を提供する·Joind.in MOONGIFT
Joind.inはPHP製のオープンソース・ソフトウェア。技術系をはじめ、各地域で日々様々なイベントが行われている。そのような情報は、各イベントの運営サイトで紹介されており広報活動は手間がかかってしまう。IT勉強会カレンダーは有名だが、イベント情報のみで具体的な内容は各サイトを見てみないと分からない。 イベント情報を提供 そうした不便さを解消してくれるかも知れないのがJoind.inだ。このサイトはイベントやセミナー、勉強会の情報を一元的に管理するサービスを提供する。イベントの情報ではその詳細情報や参加申し込み、発表内容、関連イベントやスライドが一覧になっている。 各イベントにはハッシュタグが設定されており、Twitter上で話して連携できるようになっている。発表情報ではレーティングをしたり、コメントをつけることができる。このような発表者と聞き手との距離が近く感じられるのもオンラインで管理
Pretty Diff - Gitの差分表示をGitHub調にして見やすく整形
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました これはGitを使っているならぜひ入れておきたいツールです。 GitHubのコード差分表示はとても見やすくて、一旦あれに慣れてしまうとターミナルで出力されるDiffが非常に見づらく感じるようになります。しかしプロジェクトによってはGitHubを使えないというケースもあるでしょう。 そこで使ってみたいのがPretty Diffです。任意のGitリポジトリでGitHub風の差分表示を実現してくれるライブラリです。 Pretty Diffのインストール インストールはnpmを使って行えます。 $ npm install -g pretty-diff これで準備は完了です。 Pretty Diffの使い方 使っているGitリポジトリに移動します。例えば最後のコミットとの比較はこんな感じです。
Webベースのリアルタイムテキスト差分·Mergely MOONGIFT
MergelyはPHP/JavaScript製のオープンソース・ソフトウェア（GPL/LGPL/Mozilla Public License）です。 プログラマーであればDiffの恩恵にあずかったことが少なからずあるはずです。この便利さを他の場合でも使いたい、そう考える方はMergelyを使ってみましょう。オンラインで手軽にテキストの比較ができます。 2ペインのエディタになっています。左と右にドキュメントを書くと、リアルタイムに差分が表示されます。 矢印をクリックすると、そのテキストがもう片側にマージされます。 差分表示時の色設定です。 右側だけ（またはその逆）をリードオンリーにすることで変更点だけをチェックしたり、空白を無視したりできます。差分の処理としては行単位の比較で、一部の文字でも違うと行全体が対象になるようです。 MOONGIFTはこう見る Mergelyを既存のCMSに導入する
Vagrantを設定ファイルをWeb上で作成·PuPHPet MOONGIFT
PuPHPetはPHP製、MIT Licenseのオープンソース・ソフトウェアです。 Vagrantが注目を集めています。簡単に仮想サーバを立ち上げられますが、設定ファイルを書けばさらにコマンド一つで環境まで整ってしまいます。そんなVagrantの設定ファイルを設定を行うだけで生成してくれるのがPuPHPetです。 最初にディストリビューションを決めます。 次に最初にインストールするパッケージや設定を決めます。 HTTPサーバです。Apacheまたはnginxから選択します。 PuPHPetなのでPHPメインです。バージョンも5.3/5.4/5.5から選択できます。 PHPのモジュールです。入力補完がついているので簡単に選択できます。 PEARを組み合わせることもできます。 データベースです。MySQLまたはPostgreSQLが使えます。 後は設定ファイルをダウンロードするだけです。Zi
Googleアナリティクスを使ったA/Bテストを簡単に実現させる MOONGIFT
easyABはjQuery/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 ボタンの色が赤であるべきか、青であるべきか、キャッチコピーはどちらの方が良いか。そんなことは正直試してみないと分かりません。そこで必要なのがA/Bテストで、easyABを使えばGoogleアナリティクスを使って容易に測定できます。 使い方です。スロットと呼ばれるのがテスト設定になります。A/Bの2パターンに限らず多数の値で試す事ができます。 テストコードです。valueがGoogleアナリティクスで取得できる値になります。 easyABを使えばGoogleアナリティクスへ渡すデータと、そのデザイン上の変更ポイントを簡単に管理できるようになります。JavaScriptでの指定なので画像を変えてみたり、ラベルを変えたりと様々な項目を変更した結果をテストできるでしょう。 MOONGIF
JavaScriptのコード無しでWeb APIからデータ取得、表示まで実行·爆速JSONP MOONGIFT
爆速JSONPはJavaScriptのコーディングレスでJSONPで取得したデータを表示する処理を行うライブラリです。 去年くらいからのYahooはとりあえず何でも爆速をつけておこう的な雰囲気が感じられますが、ついにオープンソース・ソフトウェアまで爆速がつくようになりました。今回はJSONPを使った表示処理エンジンである爆速JSONPを紹介します。 サンプル。電力消費量を取得しています。 ソースです。取得したJSONデータをテンプレートとして当てはめています。 爆速JSONPはデータをJSONPを使って取得し、その結果を予め決められたテンプレートに埋め込んで表示する仕組みです。data-*要素を使っており、JavaScriptのコードを書かずに実装できてしまうのが利点です。 爆速JSONPはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFT
すごいぞ！HTML5で顔認識·HTML5 Face Detection MOONGIFT
HTML5 Face DetectionはHTML5を使って動画から顔をリアルタイム認識します。 HTML5はどこまで行くのか、それを改めて思い起こさせる凄いソフトウェアがHTML5 Face Detectionです。何と動画の顔認識をリアルタイムに行ってしまいます。 デモ動画です。上が動画、下がそれを解析して顔認識しているものです。 顔を動かしても付け目がね＋鼻が追いかけてきます。 筆者トライの図。Glassesをタップすると認識処理が開始されます。 デモ動画 HTML5 Face Detectionは動画のフレームを読み込み、JavaScriptで顔認識をした後、Canvasタグに鼻眼鏡とともにレンダリングしています。はっきり言ってかなり重たいのですが、技術的にはとても面白いソフトウェアです。 HTML5 Face DetectionはHTML5/JavaScript製のソフトウェア（
変化に強い、コードの見通しが良いTitaniumアプリを開発する·Titanium MVC MOONGIFT
Titanium MVCはTitaniumをMVCに沿って開発できるフレームワークです。 Titaniumアプリはちょっとしたアプリを作るのに適していますが、大型なものになるとコードが見通し悪くなってしまうイメージがありました。だからこそベースになるTitanium MVCを使って頻繁な更新にも耐えられるしっかりとした作りにしましょう。 デモアプリです。ログイン画面が表示されます。 OKな場合のダイアログ。 入力エラーの場合のダイアログ。 app.jsの内容です。 MVC.jsの内容です。Controller、Viewを読み込んでいるのが分かります。 StartupControllerの内容です。initを実行して、ログイン画面を返しています。 ログイン画面のビューです。ここでは画面のデザインのみを行っています。 ログイン処理のコントローラーです。見やすいです。 Titanium MVCで
これは格好いい。Windows 8のMetro UIをHTML5で再現·Metro UI CSS MOONGIFT
Metro UI CSSはWindows 8のMetro UIをHTML5/CSS3で再現したソフトウェアです。 次期WindowsのWindows 8ではMetro UIと呼ばれる新しいインタフェースが利用されています。そんなMetro UIをCSSで再現したのがMetro UI CSSになります。 デスクトップで見たイメージです。アイコンが並んでいます。 選択できる画像リストです。 選択できるリストです。画像も埋め込めます。 チャットなどで使えそうなリストです。吹き出しもついています。 アプリケーションリストです。 時計などのウィジェットです。 iPadでの表示です。タブレットの方が最適化されています。 左右の移動もできます。 デモ動画です。動きはスムーズです。 動きはかなりスムーズで格好いいです。パネルを押すとちょっとへこんだり、ボタンも多数用意されています。リストをタップして選択し
これは便利。iPad上でTitaniumアプリを開発·TiHighlight MOONGIFT
TiHighlightはiPad上でTitaniumのコードを記述してその場で実行できるソフトウェアです。 iOSアプリの開発と言えば、コードを書いてコンパイルしてシミュレータを起動して実行…というのが一般的ですが、そんな状況を一変してしまうかも知れないのがTiHighlightです。 テキストエリアにTitaniumのコードが書かれているのが分かるかと思います。 Excuteボタンを押すと評価されて結果が表示されます。 背景色を変えてみます。 再度Excuteを押すと青に変わりました。 アラートを書いてみます。 アラートが表示されました。 デモ動画です。 TiHighlightはiPadアプリ上でコードを書いて、それをその場で評価して表示します。この方法であれば外部ファイルも読み込めそうです。スマートフォンアプリをインタラクティブに開発する、そんな時代が来そうです。今のところエラーが起き
Twitterの今が分かる。位置情報を含んだツイートをGoogleマップに表示·Tweereal MOONGIFT
TweerealはTwitterのストリームAPIを使い、位置情報が入ったツイートをGoogleマップに表示するソフトウェアです。 TwitterのストリームAPIを使うと次々にデータが入ってきます。それを使って「今」どこでツイートされているかをマップ上に可視化してくれるのがTweerealです。 地図に今ツイートしたデータが表示されます。 パラメータを調整して表示時間を長くするとこんな感じに色々なところでツイートされているのが分かります。 Tweerealは1秒間に40以上のツイートを処理し、その中から位置情報に関連したものだけをピックアップしています。今まさにメッセージがやり取りされていると思うとわくわくしてくるソフトウェアです。 Tweerealはnode.js/JavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 MOONGI
HP製のJavaScriptフレームワーク·Enyo MOONGIFT
EnyoはHPがリリースしたWebアプリケーションフレームワークです。モバイル、デスクトップ双方で動作します。 EnyoはHPがwebOSのオープンソース化ロードマップとともに発表されたHTML5のWebアプリケーションフレームワークになります。特にスマートフォンに適したオブジェクト指向のフレームワークになります。 サンプルです。左側がコード、右側がその実行結果です。 ボタンを押すとテキストが追加されます。 同様に色が変わるサンプルです。 消したり表示したりします。 ボタンを追加していくサンプルです。 Flickr画像検索&ビューワーのデモです。 こちらはYouTubeの検索&ビューワーです。 ボールが落下するデモです。 WebKitに最適化されたモックです。 頭文字ごとにグループ化されたリストです。 ボタンです。 日付ピッカーです。 サンプルゲームです。同じ動物を縦横に3つ並べると消えま
Haskellをはじめるきっかけに。Mac OSX用Haskellエディタ·Hcode MOONGIFT
HcodeはMac OSX用のHaskell専用エディタです。 Haskellを覚えてみたいと思いつつ、なかなか手が出せずにいる方に朗報（？）です。HcodeはMac OSX用のHaskell専用エディタになります。 エディット画面です。特にハイライト処理がある訳ではないようです。 設定もシンプルです。インデント設定くらいです。 メニューから実行できるようですが筆者環境では特に何も起こらず…。 コンソールです。こちらも今の所何も起きない（？）かも。 今はまだ機能が多くなく専用というほどの機能は持ち合わせていないようですが、今後機能が追加されればHaskellを習得する上での便利ツールになるかも知れません。 HcodeはMac OSX用のオープンソース・ソフトウェアでMIT Licenseになります。 MOONGIFTはこう見る Haskellは個人的に習得してみたいと思いつつもなかなか手が
試そう！PHPコードを解析して修正点を指摘·phpca MOONGIFT
phpcaはPHPを静的に解析して小さなミスやコードの修正点を指摘してくれるソフトウェアです。 PHPを書く際にどう書けば小さなミスによるバグの発生を防げるでしょうか。一定の基準に沿って記述することで整然としたコードを実現し、可読性をあげることでバグの混入を防ぐことができます。そこで使いたいのがphpcaです。静的にPHPファイル（ディレクトリ単位も可）を解析し、修正すべき場所を指摘してくれます。 解析処理を実行しています。PHPのパスと、解析したいファイルやディレクトリ名を指定して実行します。解析処理中は随時メッセージが出力されます。 メッセージ例です。タブの利用や行の使い方に関してなどメッセージが表示されます。 ?>がない場合もメッセージが出ます。これはPHPの書き方としては逆かも知れません（確かない方が良いという話なので）。 PHPを書く上でありがちなミスやバグにつながりそうな指摘を
開発用。JSONデータをツリー表示で閲覧する·JsonViewer MOONGIFT
JsonViewerはJSONデータをツリー表示で閲覧できるAdobe AIRアプリケーション。 JsonViewerはAdobe AIR製のオープンソース・ソフトウェア。Web APIでは幾つかのデファクトになるファイルフォーマットが存在する。それはXML、JSONだ。XMLは独自はもちろん、Atom/RSSといったフォーマットが採用されるケースが多い。 JSONはXMLに比べるとシンプルな記述にできるので採用されることが多く、JSONPのようにWebアプリケーションとの親和性も高いメリットがある。しかしWebブラウザでアクセスするとそのまま表示されてしまって分かりづらい。そこで使えるのがJsonViewerだ。 JsonViewerは入力したJSONをパースし、フォルダツリーにして表示してくれるソフトウェアだ。Adobe AIRでできているのでWindows/Mac OSX/Linux
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
