タグ

ブックマーク / www.moongift.jp (543)

  • ゲシュタルト崩壊しそう。PHPで開発されたPHP VM·PHPPHP MOONGIFT

    PHPPHPPHPで開発されたPHP VMです。 PHPを使っているWebプログラマーはとても多いです。そんなPHPはC言語のエンジンで作られています。しかしそこに満足しない人が作り出したのがPHPPHPです。PHPで作られたPHPのVMです。 実行例。ちゃんと評価されています。 phpinfo()も動きます。 PHPPHPは今の所、関数の作成と呼び出しのサポート、if文、変数、演算処理をサポートしています。クラスやエラーハンドリング、SAPIモジュール、例外処理のハンドリングなどはまだサポートされていません。実に変わったプロジェクトです。 PHPPHPPHP製のオープンソース・ソフトウェア(MIT License)です。 MOONGIFTはこう見る 素のJavaScriptを嫌うプログラマーによってCoffeeScriptやTypeScriptDart、JSXなどの言語が生み出され

    ゲシュタルト崩壊しそう。PHPで開発されたPHP VM·PHPPHP MOONGIFT
  • フォントを作るのに最適なフォント専用エディタ·Birdfont MOONGIFT

    BirdfontはWindowsLinuxで動作するフォントエディターです。 フォントを作るというのは大変な労力を要すると思われますが、その手助けになりそうなソフトウェアがBirdfontです。 メイン画面です。 プレビューです。 フォントを書く画面です。 作成したフォントがここに入っていきます。 英語圏のフォント向けになるようですが、ベクターグラフィックスを使って奇麗な文字が作成できます。作成されたフォントはTrueTypeやEmbedded OpenType、SVGフォントの出力が可能です。 BirdfontはWindows/Linux用のオープンソース・ソフトウェア(GPL)です。 MOONGIFTはこう見る フォントというのは一つの世界であり、体系的な作品と言えます。一つ一つの文字を考える上で、全体のバランスや個々の形状について一つの世界観をもって行われます。英字フォントはもち

    フォントを作るのに最適なフォント専用エディタ·Birdfont MOONGIFT
  • 取り扱い注意!JavaScriptを使ってMD5ハッシュをクラック·MD5-Password-Cracker.js MOONGIFT

    MD5-Password-Cracker.jsはJavaScriptを使ってMD5のハッシュ値から元テキストを検索するソフトウェアです。 パスワードをハッシュ化して保存しておくのは基と思われますが、その際によく使われるのがMD5ではないでしょうか。SHA-1/SHA-2のが良いと思うのですが、それをまざまざと知らしめてくれるのがMD5-Password-Cracker.jsです。 パスワードクラック開始!Web Workersが8つ使われています。 パスワードはheyaでした。1ワーカーあたり1秒間に約7万の解析が行われています。4文字のパスワードに対して23秒で解析されました。 網羅的に文字列を試しているので時間は要しますが、4文字程度のパスワードであればあっという間に解析されてしまうというのが分かるかと思います。パスワードの取り扱いについてはくれぐれもご注意を。 MD5-Passwo

    取り扱い注意!JavaScriptを使ってMD5ハッシュをクラック·MD5-Password-Cracker.js MOONGIFT
  • 様々なニーズを満たす多機能Webベース表計算ライブラリ·SlickGrid MOONGIFT

    SlickGridはWebベースで動作する多機能なグリッド、表計算ライブラリです。 Webベースで業務系システムを作っていると必ず要望に挙がるのがリッチな表計算(グリッド)表示ライブラリです。 こちらは通常の表示。縦横スクロール対応。 表示形式も色々指定できます。 スライダーでの入力。 カレンダー。 チェックボックス。 長い場合はフローティング。 縦スクロールをなくすこともできます。 Ajaxでデータの取得も可能です。 途中の集計も可能。 行を選択式にすることもできます。 入力方式の設定や、行を選択してといった機能はExcelにもないので便利ではないでしょうか。また、プラグインによってExcelとコピー&ペーストでデータの授受もできるようになっています。 SlickGridはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る グリ

    様々なニーズを満たす多機能Webベース表計算ライブラリ·SlickGrid MOONGIFT
  • Web上でGoogle Chrome機能拡張のベースを作成·Extensionizr MOONGIFT

    ExtensionizrはWeb上でオプションを選択して目的に合わせて最適化されたGoogle Chrome機能拡張のベースがダウンロードできるソフトウェアです。 Google Chrome機能拡張を作る際にぜひ使ってみて欲しいのがExtensionizrです。多様なオプションを使ってGoogle Chrome機能拡張のベースを生成します。 トップページです。 オプションが色々用意されています。 生成されたZipファイルを解凍すると機能拡張のスケルトンが入っています。 まず最初に機能拡張の種類を選びます。隠し、ページアクション、ブラウザアクションの3つがあります。さらにバックグラウンドページやオプションページ、機能の上書きなどをオプションで指定し、最終的にZipファイルとしてダウンロードします。 ExtensionizrはHTML/JavaScript製、MIT License/GPLのオ

    Web上でGoogle Chrome機能拡張のベースを作成·Extensionizr MOONGIFT
  • Webサイトをもっと万人に対してアクセスしやすくするために·HTML_CodeSniffer MOONGIFT

    HTML_CodeSnifferはウェブアクセシビリティ改善のためのブックマークレットです。 Webは限られた人たちのものではなく万人向けのものであるべきです。そこで考えられるべき項目として障害のある人に対するアクセシビリティです。そのチェックに使えるブックマークレットがHTML_CodeSnifferです。 実行すると右上にフローティングウィンドウが出ます。エラー、警告、通知の3つに分けてポイントが出ます。もちろんポイントが少ない方が良いです。 各項目の説明を見られます。これらはW3Cのウェブコンテンツ・アクセシビリティ・ガイドラインに則っています。 指摘されている箇所を確認できるマーカーも出ます。 MOONGIFTの場合…がっくりするくらいのエラー数です…。 アクセシビリティと漠然と言われてもなかなか具体的な施策が思いつきませんが、エラーや警告という形で表してくれれば対応もとりやすくな

    Webサイトをもっと万人に対してアクセスしやすくするために·HTML_CodeSniffer MOONGIFT
  • HTML5/CSS3を使った多機能デザインフレームワーク·HTML KickStart MOONGIFT

    HTML KickStartはBootstrapライクなデザインテンプレートフレームワークです。 最近ではWebサイトのベースにBootstrapを利用することが多いのですが、今回はその類似ソフトウェアとしてHTML KickStartを紹介します。こちらもかなり高機能です。 Typography。 リストとメニュー。 メニューは階層対応。 テーブル。 ツールチップ。上下左右自在です。 アイコン。 プログラミングコード。 ボタン。 タブ。 パン屑。 グリッド。 画像。 スライドショー。 動画、地図、カレンダー。 フォーム。 入力フィールドのサイズ。 その他色々。 極力シンプルなHTML構造設計、jQuery利用、HTML5、モーダルウィンドウなどが特徴に挙がっています。唯一残念なのは現状はレスポンシブWebデザインでないことかも知れません。しかし全てのデバイスへの対応を考えないならむしろ手

    HTML5/CSS3を使った多機能デザインフレームワーク·HTML KickStart MOONGIFT
  • Pythonプログラマー歓喜!JavaScriptの代わりにPythonが使える·Brython MOONGIFT

    BrythonはJavaScriptの代わりにPythonを使ってプログラミングできるようにするライブラリです。 Webブラウザ標準で使えるプログラミング言語と言えばJavaScriptです。しかしそれだけでは満足できない、そんな方が開発したのがBrythonです。Webブラウザ上でPythonが書けてしまいます。 アナログ時計です。ちゃんと秒針が動いています。 コードは見事にPythonです。 Ajaxのデモ。 やはりちゃんとPythonコードです。 テーブルのソートデモ。 Importも使えて便利です。 左右にデータを移動させるデモ。 ボタンやコンポーネントをPythonの中で生成しています。 3Dを動くデモ。 エリア情報を含めてPythonで定義されています。 BrythonはHTMLコンテンツのハンドリングはもちろん、Ajax、ローカルストレージ、Canvasの操作もできます。HT

    Pythonプログラマー歓喜!JavaScriptの代わりにPythonが使える·Brython MOONGIFT
  • Railsのコマンド実行を高速化·zeus MOONGIFT

    zeusはRuby on Railsのコマンド実行速度を高速化するソフトウェアです。 Ruby on Railsはここ数年で一気に知名度を高めてきました。そんなRailsですが、コマンドを実行した後の処理の重さにみんな辟易していました。そこで使ってみたいのがzeusです。 インストールします。 起動しました。 サーバを立ち上げます。おお、速いかも。 コンソールを立ち上げます。こちらも速い。 デモ動画です。 zeusはRailsのインスタンスを常に起動しておいて、それを使って他のコマンドを実行する仕組みになっていると思われます。そのため様々なライブラリなどをロードすることもなく、即座に実行できるのが魅力です。コンソールやサーバ、Generate系、rake、テストなどが高速で処理されるようになります。 zeusはRuby製、MIT Licenseのオープンソース・ソフトウェアです。 MOON

  • PythonのWeb開発で使いたい高性能デバッガー·wdb MOONGIFT

    wdbPython製のWSGI用のWebベースデバッガーです。 スクリプト言語の開発のが個人的には手軽ですが、IDEを使ったコンパイル系言語の開発において羨ましいと感じるのがブレークポイントを含めたデバッガー機能です。そんなデバッグ機能をWSGIを使った開発に用いられるのがwdbです。 アクセスするとデバッガーが立ち上がります。 ステップ実行、コンソールでの出力ができます。 別なライブラリへ遷移します。 最後は結果が出力されて完了です。 wdbを実行すると、1984番ポートでWebサーバが立ち上がります。そして/wtfにアクセスするとwdb.set_trace()を実行した次の行からステップ実行が可能になります。最後までいくと画面に結果のHTMLが出力されて完了となります。変数の内容を見たり、ステップ実行もできるようになり、より開発がスムーズになりそうです。 wdbPython製、GP

    PythonのWeb開発で使いたい高性能デバッガー·wdb MOONGIFT
  • 表示位置をいい感じに調整してくれるネットワークグラフ·Springy MOONGIFT

    Springyはネットワークグラフにおいてノード同士の表示を自動的に調整してくれるライブラリです。 オブジェクト同士の関連性からトレンドを見いだすのに使われるネットワーク図。そんなネットワーク図の表示において多数のオブジェクトが重なってしまう…といった時にはSpringyを使ってみましょう。 デモです。関連性が適切に見えます。この位置まで自動で調整されるのがSpringyの特徴です。 向きが変わったとしても大丈夫。 こんな感じに交わっていたとしても… 最終的にちゃんと調整されます。 Springyはこのレイアウトを決定するアルゴリズムを備えています。パラメータを自分で調整することもできますが、かなり高いレベルで表示が調整されるので殆どデフォルトのままで問題ないのではないでしょうか。 SpringyはJavaScript製のオープンソース・ソフトウェア(MIT License)です。 MOO

    表示位置をいい感じに調整してくれるネットワークグラフ·Springy MOONGIFT
  • Webでもサーバでも使えるJavaScriptテンプレートエンジン·doT.js MOONGIFT

    doT.jsはWebブラウザ、node.jsの両方で使えるJavaScriptテンプレートエンジンです。 Webアプリケーションを開発していると必ずJavaScriptHTMLを出力する必要性が出てきます。そのような時に使いたいのがテンプレートエンジンです。今回はWebブラウザ、node.jsの両方で使えるdoT.jsを紹介します。 テンプレートとJSONデータを組み合わせてHTMLを出力します。 繰り返しも対応。 パーシャルも使えます。 条件分け。 配列。 エンコード表示も可能です。 特徴としては外部ライブラリの依存性がないこと、高速であること、パーシャルサポート、イテレータなどがあります。ストリーミングのようにデータが随時追加されていく場合も想定されています。ifではなく、?を使うのがユニークです。 doT.jsはnode.js/JavaScript製のオープンソース・ソフトウェア(

    Webでもサーバでも使えるJavaScriptテンプレートエンジン·doT.js MOONGIFT
  • Webブラウザ、Google ChromeでJSON構造の確認、編集·JSON Editor Online MOONGIFT

    JSON Editor OnlineはWebブラウザやGoogle Chrome機能拡張として動作するJSONビューワー、編集ソフトウェアです。 RESTfulのWeb APIなどでよく使われるようになったJSONフォーマット。構造が分かりづらかったり、自分で手作業でJSONファイルを作成したりするといった時に便利なのがJSON Editor Onlineです。 トップページです。左側がJSON、右側がその解析結果のツリービューです。 項目を追加しました。中央にある左右の矢印ボタンをクリックすると反映されます。 右側でツリーを使って値を変更したりキーを追加したりできます。 その結果を逆に差し戻すこともできます。 配列も表現されています。 検索機能もあります。 URLを指定してJSONの取得ができます。 JSONの内容は小さくすることも可能です。 JSON Editor OnlineではJS

    Webブラウザ、Google ChromeでJSON構造の確認、編集·JSON Editor Online MOONGIFT
  • Webカムの映像を使ったソフトウェアを開発するなら使ってみよう·SimpleCV.js MOONGIFT

    SimpleCV.jsはWebカムの映像を手軽に扱えるようにするJavaScriptSimpleCVです。 Pythonベースで作られたOpenCVを手軽に扱えるようにするライブラリがSimpleCVです。そしてそれをJavaScriptにポーティングしたのがSimpleCV.jsになります。 上がWebカムから取り込んでいる画像です。下がそれをグレースケール処理したものになります。リアルタイムです。 さらに様々なイフェクトを加えた結果。かなり怖いです。 こちらはJavaScriptから映像データを取り込んでいるデモ。画像サイズを取得しています。 HTML5のgetUserMediaによってWebカムとWebシステムが容易に連携できるようになっています。それをさらにSimpleCV.jsによって扱いやすくできれば、もっと面白いサービスが生まれる可能性がありそうです。 SimpleCV.j

    Webカムの映像を使ったソフトウェアを開発するなら使ってみよう·SimpleCV.js MOONGIFT
  • CSS3アニメーションをWebブラウザ上で作成&実行·Stylie MOONGIFT

    StylieはCSS3のキーフレームベースのアニメーションをグラフィカルに設定できるソフトウェアです。 CSSでアニメーションを実行できるのは知られていますが、その実装となるとかなり面倒な雰囲気があります。しかしStylieを使えばグラフィカルに簡単に設定が可能です。 デフォルトの表示です。左から右へボールが流れていきます。 単純に流れる以外の動きも指定できます。 こんな感じで曲線にすることも。始点と終点はドラッグで移動できます。 対応ブラウザを選択することでCSSの内容が変化します。 StylieはRekapiというアニメーションライブラリをベースにしています。そのための設定をグラフィカルに指定できるツールと言えそうです。ボールの画像も自由に指定できるので、色々試してみてください。 StylieはJavaScript製のソフトウェア(ソースコードは公開されていますがライセンスは明記されて

    CSS3アニメーションをWebブラウザ上で作成&実行·Stylie MOONGIFT
  • オフラインでも使えるJavaScriptベースの全文検索エンジン·Fullproof MOONGIFT

    FullproofはJavaScriptベースの全文検索エンジンです。高速に動作します。 Webサイトのコンテンツが充実してきたら欲しくなるのが検索機能です。Google検索を使っても良いですが、ここではFullproofを紹介します。何とJavaScriptベースの全文検索エンジンです。 色検索エンジン。 動作は高速です。 動物検索エンジン。 ゲーム検索エンジン。スコアが表示されています。 スコアの高いデータが上に出ます。 FullproofはHTML5のローカルストレージに対応し、WebSQLIndexedDBにも対応します。Unicodeをフルサポートしています。スコアによって順位が決定します。発音記号に対応しますが、現在は英語とフランス語のみとなっています。JavaScriptだけとあって動作は高速です。 FullproofはHTML5/JavaScript製のオープンソース・ソ

    オフラインでも使えるJavaScriptベースの全文検索エンジン·Fullproof MOONGIFT
  • オフラインになったら操作を防ぎ通知を出すJavaScriptライブラリ·Heyoffline.js MOONGIFT

    Heyoffline.jsはネットワークのオンライン/オフラインをキャッチしてアクションを実行できるJavaScriptライブラリです。 Webアプリケーションの弱点はネットワークが閉ざされると使えなくなることです。そこで致命的なエラーになる前にネットワーク状態を感知して処理できるようにしましょう。そのために使えるのがHeyoffline.jsです。 オンラインです。 オフラインにすると指定したアクションを実行できます。 Heyoffline.jsでは入力系フィールドを指定して編集無効にしたりできます。またモーダルウィンドウを表示して現在オフラインである旨も通知できます。これにより不要なアクションを防げるでしょう。 Heyoffline.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る 光ファイバーやADSLの普及によって

    オフラインになったら操作を防ぎ通知を出すJavaScriptライブラリ·Heyoffline.js MOONGIFT
  • Google Chrome機能拡張を開発するならベースにどうぞ!·ChromeSkel MOONGIFT

    ChromeSkelはGoogle Chrome機能拡張を作るためのベースになるソフトウェアです。 Google Chromeは今や世界一のシェアを誇るWebブラウザになっています。そんなGoogle Chromeをさらに魅力的にするのが機能拡張です。Google Chrome機能拡張を作ってみたいと思う方はChromeSkelをベースにすると良いでしょう。 ファイル構成 インストールしました。 オプション画面があります。 アクションも設定されています。 別ページの設定画面。 ChromeSkelは手早くGoogle Chrome機能拡張を開発するためのテンプレートになります。サンプルのアイコンやManifest.json、jQueryを同梱、オプションページ、background.html、popup.htmlなど開発に必要な道具がたくさん揃っています。 ChromeSkelはGoogl

    Google Chrome機能拡張を開発するならベースにどうぞ!·ChromeSkel MOONGIFT
  • その場でデータを編集。BootstrapやjQuery UIに対応した·X-editable MOONGIFT

    X-editableはBoostrapやjQuery/jQuery UIで使えるIn-place Editorです。 表示されている内容を編集する際にその場ですぐに編集できるようにするのがIn-place Editorです。それをBootstrap、jQuery UIなどに対応させたのがX-editableになります。 こんな感じでポップアップで編集できます。 エラー表示にも対応。 カレンダーでの入力。 選択式も可能です。 インラインで編集もできます。 こちらはjQuery UI版。 この場合も選択式などが使えます。 X-editableは単純な文字列入力の他に、選択やテキストエリアでの入力にも対応しています。入力チェックも可能で、エラーの際にそのまま表示を残せます。純粋なjQueryにも対応しているのでWebサービスに組み込んでみるのはいかがでしょう。 X-editableはJavaSc

    その場でデータを編集。BootstrapやjQuery UIに対応した·X-editable MOONGIFT
  • Web上で画像の範囲を指定できる·imgAreaSelect MOONGIFT

    imgAreaSelectは画像の切り抜きに役立つ範囲選択機能を提供するjQueryライブラリです。 ユーザにアップロードされた画像の一部を切り出してアイコンに使うと言ったような操作はよくあります。そんなUIをjQueryを使って実現するのがimgAreaSelectです。 一例です。 選択されていない場所はグレーになるので分かりやすいです。 各ポイントの数値が取れます。 imgAreaSelectではユーザが縦、横の長さを自由に変更できる他、比率固定でサイズを変更したり、あらかじめ決められた場所に選択範囲を置くと言った指定ができます。切り抜く箇所や大きさの値が受け取れるので、後はサーバサイドで切り抜き処理を行えば良いでしょう。 imgAreaSelectはjQuery/JavaScript製のオープンソース・ソフトウェア(GPL/MIT License)です。 MOONGIFTはこう見る

    Web上で画像の範囲を指定できる·imgAreaSelect MOONGIFT