Dashboards by Keen IO – グラフを多用したBootstrap管理画面テンプレート
Bootstrapが特に活かされている場面というと、管理画面ではないでしょうか。そこまで画面デザインにこだわらなくてよく、情報設計がきちんとできていれば見栄えの良いUIが作成できます。開発者自らが設計、デザインできるのが手軽で良いです。 そんなBootstrapを使った管理画面デザインは多数ありますが、今回はビジュアル化を特に想定しているDashboards by Keen IOを紹介します。 Dashboards by Keen IOの使い方 まずはデザインを見てみましょう。 Dashboards by Keen IOはBootstrap 3.2に対応しています。Bootstrapのバージョンアップは早いのでこの辺りの対応バージョンのチェックも忘れないようにしましょう。 Dashboards by Keen IOはHTML5/JavaScript製、MIT Licenseのオープンソース
thumbor - 画像加工はお任せなWebサーバをどうぞ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 画像の加工は面倒で、それが数千にも及ぶ画像ファイルであったり、ユーザがアップロードするような画像を自動で加工したいと思ったら何らかのシステムを考えるでしょう。その選択肢の一つとして考えてみたいのがthumborです。 thumborの使い方 thumborはURLのパラメータを使って画像加工を行います。リサイズはもちろんのこと、フィルターもあります。明るさ、コントラスト、ノイズ、赤目、角丸、シャープ、ぼかし、フレーム、ウォーターマークなど様々です。 プラグインで拡張する機能もあったりと、画像加工を一元的にまかせられるソフトウェアになっています。別ドメインに分けて使うこともできますので、本体のWebサービスとは別で画像加工を提供するのに便利そうです。 thumborはPython製、
Fabric.js·Canvasで2Dオブジェクトを自在に描画/操作 MOONGIFT
HTML5の新機能であるCanvasですが、HTMLとは随分使い勝手が違うためになかなか手出ししづらいのではないでしょうか。2D/3Dのどちらも扱えますが、3Dになるとさらに敷居が高くなりますので、まずは2Dから入るのが良さそうです。 Canvas内で2Dオブジェクトを描くのに使えるライブラリがFabric.jsです。Fabric.jsを使ってCanvasを積極的に使ってみましょう。 Fabric.jsの使い方 デモです。様々な描画が行われています。 SVGを描くこともできます。キャッシュ機能を使うと多くのオブジェクトもスムーズに動かせます。 影をつけるデモです。アニメーションもします。 データをJSONで出力できます。 こちらはSVGでの出力結果。 Fabric.jsでは文字や画像の描画、マウスイベント、アニメーション、オブジェクトのグルーピング、マウスによる変形など様々な操作ができるよ
PaperTester·SIer感涙。テスト画面のスクリーンショットをExcelに貼付 MOONGIFT
SIerなどで良く聞かれる話で、テストを行う際には1画面ずつスクリーンショットを撮ることが要求されます。中小企業のシステム開発会社からすると信じがたいのですが、テストを行ったという確認にもなるのであながり無意味ではないのかも知れません（それをダブルチェックしているかは不明ですが）。 そんなSIerの方にぜひ使っていただきたいのがPaperTester、IE×Excel連携のテストツールになります。 PaperTesterの使い方 こちらはテスト仕様書です。動作コマンドとかあるのでかなりプログラム的ではあるのですが。 実行中。ブラウザが立ち上がって文字が入力されます。 そして結果のExcel。スクリーンショットが貼付けられていて作業内容が分かるようになっています！ これはSIerに限ったものではなく、スクリーンショットがあることでエラー部分が分かったり、Excelベースなのでテスト仕様書が書
shaky - 意外と難しい。正確に書かないドローライブラリ MOONGIFT
コンピュータは正確な図形を描くのは得意です。逆に人は正確な線をフリーハンドでは引けませんが、それがかえって味があったりして柔らかな印象を与えます。コンピュータの描く線は冷たい印象を受けるでしょう。 そこで使ってみたいのがshakyです。Canvasを使ってドローするのですが、その描く図形が手書き風でいい感じなのです。 shakyの使い方 デモの編んだ図形。右側に行くほど乱れているのが分かるかと思います。 マウスに連動して動く線。ちょっとした乱れがいい感じです。 こちらは四角。並んではいつつも線がぶれています。 直線。 四角。これはぶれて動きます。 円。とはいっても完全な円にはなっていません。 こちらはちゃんとした円。ですが崩れています。 楕円。かなり乱れています。 右下にいくほど崩れる図形。 正確に書かないというのは面白いテクニックと言えます。フリーハンド風に描くことで、プロトタイプをスク
使えるWebサービス・オープンソース（26）·クローラー MOONGIFT
今回のテーマはクローラーです。Webサイトを開発していたりする際に欲しくなるのがクローラーです。外部のコンテンツを取得するのにJavaScriptではクロスドメインの制約があるのでサーバサイドから取得するなんてことはよくあると思います。 しかし意外とHTTPヘッダーの解釈や文字エンコードなどクローラーを書くのも一筋縄ではいきません。そこで今回はクローラーに似たサービスやオープンソース・ソフトウェアを紹介します。 kimono : Turn websites into structured APIs from your browser in seconds 特徴としてスクレイピングではなく、DOM構造を理解した上で似たような構造部分を自動でピックアップしてJSON/CSVにしてくれるという点があります。一覧ページなどで、リスト部だけを効率的に取得したいなんて使い方が考えられます。 html2
Viz.js·Web上でGraphvizをSVGでレンダリング MOONGIFT
フローチャートなどの高度なグラフを描こうと思った時に使われるのがGraphvizです。テキストベースで記述していくだけでできるというのはやはり手軽です。しかしローカルソフトウェアをインストールしたり、セットアップしたりするのは面倒と感じる人も多いでしょう。 そこでさらに再利用性を高めてくれるのがViz.jsです。WebベースでGraphvizを使えるようにしてくれます。可能にするのはまたしてもEmscriptenなのですが、面白さを体感してください。 例として以下のようにGraphvizのDOT言語をそのままscriptタグに記述します。 <script type="text/vnd.graphviz" id="cluster"> digraph G { subgraph cluster_0 { style=filled; color=lightgrey; node [style=fill
Smooth Online Signatures – 滑らかな線に変換するサインライブラリ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました この書き心地は良いぞ！ Apple Storeでクレジットカードで購入した人は知っていると思いますが、iPhoneに指先を使ってサインを行うと思います。慣れない書き心地で線が歪んだり、変な文字になってしまってがっかりするのではないでしょうか（筆者はいつもそうですが）。 しかしAppleもSmooth Online Signaturesを導入すればそんなことがなくなるので良いのではないかと思います。というかぜひこの技術を取り入れて欲しい。 Smooth Online Signaturesはアルゴリズムに従って線を滑らかに変換しています。その結果、みすぼらしいカクカクした線ではなく滑らかなサインが可能になっています。 これだけスムーズに書けるとマウスやスマートフォンでの署名がしやすくな
Googleリーダーに似たUIのWebフィードリーダー·Leselys MOONGIFT
LeselysはGoogleリーダーライクなUIのWebベースのフィードリーダーです。 Googleリーダーが7月1日で終わりというニュースを受けて、世界中のITエンジニアがざわついています。代替のサービスを探す人、これを機に情報収集スタイルを変える人、そして自分でサービスを作ってしまう人もいます。今回はその一つLeselysを紹介します。 ログインします。 メイン画面です。左側にフィード一覧が表示されています。 フィードを選ぶと記事タイトルの一覧が出ます。 記事タイトルをクリックすると記事本文が表示されます。 未読の記事はタイトルが太字になっています。 設定画面です。 購読しているフィード一覧。 LeselysはGoogleリーダーと似たスタイルでの購読ができます。現時点ではキーボードショートカットがなかったり、記事本文を表示する際のアニメーションがちょっと面倒であったりしますが、今後の
要注目！高機能なjQuery製のCalDAVクライアント·CalDavZAP MOONGIFT
CalDavZAPはjQuery/JavaScriptで構築されたCalDAV対応のフロントエンドです。 CalDAVというのはGoogleカレンダーやiCloudのカレンダーでも実装されているカレンダー用のプロトコルです。そんなCalDAVをWebベースで扱うソフトウェアがCalDavZAPです。 ログインします。 最初の表示は今日の予定表示になっています。 カレンダーを選択すると予定が表示されました。 月表示です。 予定の詳細です。 編集モードです。 検索すると対象外の予定が薄くなります。 新規予定の作成です。 カレンダーで期間を選択して予定作成も可能です。 ドラッグで予定を移動させられます。 Todoも登録できます。 CalDavZAPはjQuery/JavaScriptで作られており、サーバサイドを必要としていません。バックグラウンドでデータ同期を行う仕組みであったり、イベントやT
今時のクールな掲示板を作れるRails製OSSディスカッションボード「Discourse」:phpspot開発日誌
Discourse 今時のクールな掲示板を作れるRails製OSSディスカッションボード「Discourse」。 ユーザインタフェースが今時の物になっており、Likeボタンやお気に入り、Ajaxによる次ページ読込機能等、使いやすく、必要な物が揃ってる感じです。 社内のディスカッションボードなんかに使ってみるとよさそうです。 GitHubでソースコードが入手出来ます 関連エントリ コーディングもブラウザ上でできるオープンソースソフトウェア「Codiad」 オープンソースのHTML5お絵かきウィジェット「Literally Canvas」 Excelそっくりな表計算モジュールを実装可能なオープンソースモジュール「Gelsheet」
CMSに組み込みたい、見たままにページの編集を行うJavaScript·Create.js MOONGIFT
Create.jsはユーザ向け画面をそのまま編集できるJavaScriptライブラリです。 CMSは一般的にユーザ向けの画面と管理画面とが分かれて提供されています。しかし運用時にはユーザ向けの画面を見ながらその場で修正したいこともあるでしょう。その際に使えるライブラリがCreate.jsです。 メイン画面です。この時点では普通に表示されています。 エディターを立ち上げました。Editボタンを押します。 編集可能な部分に色がつきました。 編集中の画面です。 編集しました。 コンソールで見ると編集した内容がJavaScriptのオブジェクトになっているのが分かります。 Create.jsは単体で動作する訳ではなく、編集した内容を別途サーバサイドに送ってDBやファイルを更新する必要があります。ただし、編集可能な箇所を決めたりすることはできるので、運用担当者の編集可能範囲について自由に更新し、保存
取り扱い注意！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
これがHTML？と言いたくなるようなPDF変換ソフトウェア·pdf2htmlEX MOONGIFT
pdf2htmlEXはレイアウトの再現性を極めたPDFからHTMLへの変換ソフトウェアです。 PDFはそのままでは容易に編集できないフォーマットです。そこが利点でもあり欠点でもあります。PDFを別フォーマットに変換するソフトウェアは幾つかありますが、今回は驚いてしまうくらい品質高いHTML変換を行うpdf2htmlEXを紹介します。 これがHTMLだと思えないくらいの再現度です。 計算式にも対応。 段組み、画像埋め込みも問題なし。 白黒に限らず扱えます。 中国語。マルチバイト対応です。 まるで素のPDFを表示しているかのような再現度の高さがpdf2htmlEXの売りです。PDFを一つのHTMLファイルとして出力し、色や文字の装飾も反映します。リンクもそのまま使えます。なお、Type3のフォントには対応しておらず、テキスト以外のオブジェクトは画像としてレンダリングされるようになっています。
オープンソースで作れるランディングページ·Desant MOONGIFT
Desantはランディングページの申込者を管理するシステムです。 Webサイト、iOSアプリ、キャンペーン…何らかのサービスを開始しようと思ったら欲しいのがサービスの紹介ページです。まだリリースされていない場合にはそこでユーザに先行登録を促す事もできます。その結果を集約するサービスがDesantです。 ログイン画面です。 ログインしました。登録したユーザが一覧表示されています。 こちらはリファラーです。 登録してくれたユーザのIPアドレスから参照できる場所が地図上にマッピングされています。 都市ごとにすることもできます。 日本からの登録もあるようです。 Desantは言わばランディングページを管理するソフトウェアになります。結果としてはメールアドレスを登録して完了となります。メールマガジンの登録を促したり、メールを使ったアップデート通知に使えるでしょう。 DesantはRuby製、GNU
やってみよう。HTML5で作られたソーシャルゲーム·Pocket Island MOONGIFT
Pocket IslandはHTML5製のソーシャルゲームです。 Zynga系のゲームと言えば畑やアイテムを育てて収穫し、さらに家や町を育てていくゲームが多くなっています。いわゆるソーシャルゲームですが、これをHTML5で作成し、かつオープンソース化したのがPocket Islandです。 スプラッシュ画面です。 最初はチュートリアルです。説明を見ながらゲームを勧めます。 トロールです。タップして攻撃します。 王様の望みを叶えたようです。 王様の望みを叶えるとゴールドが手に入る仕組みです。 自宅を配置します。ドラッグアンドドロップでできます。 王様の望みは55個もあるようです。どんだけ強欲なのか…。 初期の全体図です。可愛いイラストです。 作物は時間が経つと育ち、収穫できます。 今回紹介したのはまだまだはじまりで、船を造り冒険がはじまってからが本番のようです。ゲームとしての基本的機能は網羅
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
今風のWEBベースチャットを作れるオープンソースソフト「kandan」:phpspot開発日誌
オープンソースのHTML5お絵かきウィジェット「Literally Canvas」:phpspot開発日誌
Adobeから初めてとなるオープンソースのフォントがリリース -Source Sans Pro
https://jp.techcrunch.com/2012/07/27/20120726parse-shows-off-anypic-the-open-source-instagram-clone-that-took-30-minutes-to-build/
