CoreUI - Vue/Bootstrap製の管理画面UI MOONGIFT
管理画面は主に運営元が使う画面になるので、デザインへのこだわりが殆ど感じられないことが多いです。しかし運営元が使いやすい画面でないと細かい制御がしづらかったり、サービスのステータス把握が遅れたりするのではないでしょうか。 そこで使ってみたいのがCoreUIです。VueとBootstrapを使って作られた管理画面テンプレートです。 CoreUIの使い方 スクリーンショット多めで紹介します。まずはダッシュボード。このようなUIの管理画面が簡単に作れます。 ボタン。 ソーシャルボタン。 カード。 フォーム。 モーダル。 スイッチ。 テーブル。 タブ。 アイコン。Font AwesomeかSimple Line Iconsがサポートされています。 ウィジェット。 こんなウィジェットも。 チャート。 ログイン画面。 登録画面。 エラー画面。 CoreUIはVueで作られていますので、表示する際にもW
PythonからJavaScriptに変換·PythonScript MOONGIFT
PythonScriptはPython製のオープンソース・ソフトウェア（LGPL）です。 Pythonプログラマーがふと思った（と思う）。なぜWebブラウザでPythonが動かないのか。PythonのエンジンをJavaScriptにしてしまう手もあるだろうが、実行速度が問題になる。そこで（多分）作られたのがPythonのコードをJavaScriptに変換してしまうPythonScriptだ。 インストール。これで全ての準備は完了。 別途pythonscript.jsというのをダウンロードする必要があるらしい。wgetで取得。 ごく単純に。Hello WorldをPythonとして出力。 そしてそれをPythonScriptを使ってJavaScriptに変換！ 内容を見ると確かにJavaScriptになっているのが分かる。 PythonScriptがサポートしているのはfor/while/t
pdfmake - クライアント/サーバサイド両方に対応したPDFジェネレータ MOONGIFT
Webシステムを作っていて、時々PDFの帳票が必要になることがあります。サーバサイドでPDF出力するツールは幾つかありますが、それらのセットアップは面倒ですし、サーバの負荷も気になるでしょう。 そこで使ってみたいのがpdfmakeです。サーバ、クライアントサイド両方に対応したPDF作成ツールです。 pdfmakeの使い方 pdfmakeではJSONを使ってPDFの形式を定義します。 スタイル設定も可能です。 より複雑なスタイルを使った例です。 段組のサンプル。 テーブルも使えます。 リスト。ネストもできます。 より本格的な形式ですね。 画像も使えます。 pdfmakeの良いところはJavaScriptによる生成なのでサーバサイドの負荷なく、かつ編集した内容をその場で反映して生成し直すこともできるということです。さらにnodeで動かすこともできるのでクライアントサイドのコードを使ってそのまま
moderniedownloader - IEの入った仮想マシンイメージファイルをダウンロード MOONGIFT
Mac OSXを使っていても、Webシステムの開発時にはIEでの表示確認が欠かせません。そこで使えるのがmodern.IEで配布しているVM（仮想マシン）のイメージです。VirtualBoxに対応しているので無償でIEを使った表示確認が可能です。 そんなmodern.IEですが、Microsoftのサイトにいってダウンロードしたりするのも面倒です。そこで使ってみたいのがmoderniedownloaderです。 moderniedownloaderの使い方 インストールはGitHubでバイナリが配布されているのでダウンロード&実行権限をつけてパスの通ったところに入れるだけです。 $ moderniedownloader -L IE6 - WinXP IE7 - Vista IE8 - WinXP IE8 - Win7 IE9 - Win7 IE10 - Win7 IE10 - Win8 I
noemoji - チャットワークの絵文字をテキストに戻すChrome機能拡張 MOONGIFT
チャットワーク + Chromeを使う、まさに筆者のためにあるようなソフトウェア！ チャットはIT系の仕事をこなす上で欠かせない存在になっています。そんな中、筆者はチャットワークを使うのが基本になっています。しかしこのチャットワークにおいて厄介なのが自動絵文字変換です。 便利な時ももちろんあるのですが、プログラミングコードを貼付けると自動変換してしまってうまく伝えられない時も度々あります。その度にイライラしていたのですが、今後はnoemojiを使うのが良さそうです。Chrome機能拡張で提供される絵文字展開ソフトウェアです。 まずはインストールします。今はChrome Storeに登録されていないのでcrxを直接ドロップします。 インストールされました。一番右にあるアイコンがそうです。 インストールが終わったらチャットワークを開いてみましょう。 変換されている例。ここでnoemojiのアイ
Bootstrapベースの管理画面用テンプレート·Charisma MOONGIFT
CharismaはHTML5/JavaScript製のオープンソース・ソフトウェア（Apache Licnese 2.0）です。 Webシステム開発において意外と不遇なのが管理画面です。内部の人が使うものなので適当に作られるケースが多くなります。そこで使ってみたいのがCharismaです。リッチな管理画面をBoostrapをベースに作り上げる事ができます。 ウィジェットがついた、リッチな管理画面です。ここまで恵まれているケースは早々ないでしょう。 ドラッグ&ドロップによる配置変更もサポート。 折り畳んで隠す事もできます。 グリッドは細かくサポートされています。 カレンダー。システム内部のデータをマッピングすると見通しが良くなりそうです。 メンバー一覧。検索やラベルもあって便利そうです。 ギャラリー。サムネイル写真をきれいに並べています。 タイポグラフィ。様々なタグをサポートしているので奇麗
Rubyのコードをもっと美しく書くために使いたい·rubocop MOONGIFT
rubocopはRubyのコード可読性をチェックするソフトウェアです。 プログラマーを何年やっていても、なかなか奇麗なコードに辿り着くのは困難です。ちょっと道を誤るとものすごいコードになっている場合もあります。そんな時には機械的に評価してくれるrubocopを使ってみましょう。 実行しました。色々な情報が出てきます。 Cは注意、Wはワーニングでしょうか。 ヘルプです。Emacsとの連携もできます。 rubocopでは内部での幾つかのルールに従って指定ディレクトリ以下のRubyコードについて評価を行ってくれます。筆者の場合、一行あたりの文字数が多くて引っかかるケースが多いようです。そうした点に注意して書くようにすれば、より可読性の高い美しいコードが書けるようになりそうです。 rubocopはRuby製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る 美
Rubyを実行できるWebKitベースのブラウザ·Decaf MOONGIFT
DecafはWebKitからフォークし、Ruby実行エンジンを載せたWebブラウザです。 Webブラウザで使えるプログラミング言語はJavaScriptだけです。ActionScript/.NET/Javaも使えますが、それはプラグインを使わないといけません。そんな状況に反旗を翻し、Rubyが動くようにしてしまったのがDecafです。 サンプル。クライアントサイドでRubyを実行して、その結果を描画しています。 コンソールも使えます。 CSSやJavaScriptのURLやパスを指定して読み込んでいます。 AjaxのようにGETでファイルを取り込めます。 Hello Worldを出力した例。 DecafはWebKitからフォークし、Rubyを組み込んだWebブラウザです。scriptタグにおいて、typeをtext/rubyとしてRubyコードを実行することができます。今のところMac O
エイプリルフールかと疑ってしまう。BashがまるでRubyのようになる·Skull MOONGIFT
SkullはBashの中でRuby風にオブジェクトを扱えるようにしてしまうソフトウェアです。 BashはサーバやMac OSXなどで誰しもが使っているかと思います。しかし記述がレガシーな感じで書きづらいと思ったことも多いはず。そこで使ってみたいのがBashをOOにしてくれるSkullです。 Skullを読み込みます。 strという文字型オブジェクトを定義します。そうするとlengthなんてメソッドが使えるようになります。 upcaseで大文字になったり。 methodsなんてメソッドまであります。 OSのバージョンも取れます。 System.osでmacと返ってきます。 SkullはRubyのようなオブジェクトをBashに提供してくれます。Bashがいきなりモダンな感じになって、面白いソフトウェアです。 SkullはBash製、GPL v3のオープンソース・ソフトウェアです。 MOONGI
HTML5/CSS3を使った多機能デザインフレームワーク·HTML KickStart MOONGIFT
HTML KickStartはBootstrapライクなデザインテンプレートフレームワークです。 最近ではWebサイトのベースにBootstrapを利用することが多いのですが、今回はその類似ソフトウェアとしてHTML KickStartを紹介します。こちらもかなり高機能です。 Typography。 リストとメニュー。 メニューは階層対応。 テーブル。 ツールチップ。上下左右自在です。 アイコン。 プログラミングコード。 ボタン。 タブ。 パン屑。 グリッド。 画像。 スライドショー。 動画、地図、カレンダー。 フォーム。 入力フィールドのサイズ。 その他色々。 極力シンプルなHTML構造設計、jQuery利用、HTML5、モーダルウィンドウなどが特徴に挙がっています。唯一残念なのは現状はレスポンシブWebデザインでないことかも知れません。しかし全てのデバイスへの対応を考えないならむしろ手
Mozilla製。JavaScriptにマクロ機能を追加·Sweet.js MOONGIFT
Sweet.jsはJavaScriptでマクロ機能を実現するライブラリです。 JavaScriptでSchemeやRustのようなマクロを実現するライブラリがSweet.jsです。柔軟に自前の構文を定義できるようになります。 インストールします。 例です。idというマクロを定義します。 sjsコマンドでコンパイルします。確かに展開されました。 次はmというマクロを定義します。 こちらも展開されました。 変数を定義するマクロです。 関数を定義するdefというマクロを作ると… functionに置き換わります。長ったらしい名称からおさらばです。 Sweet.jsを使うと既存のJavaScriptの中にマクロを組み込めるようになります。そしてコンパイルを実行することでマクロ部を展開して利用できます。よりJavaScriptを柔軟に使いこなせるようになりそうです。 Sweet.jsはJavaScr
Googleの二段階認証用のキーをJavaScriptで生成·GAuth Authenticator MOONGIFT
GAuth AuthenticatorはGoogleの二段階認証用のキーを生成するWebアプリケーションです。 Googleの二段階認証を有効にしているとGmailなどにログインする際にAuthenticatorというアプリを使ってワンタイムパスワードを入力する必要があります。そのワンタイムパスワード生成をWebベースで行えるのがGAuth Authenticatorです。 デモの画面です。 追加の画面です。 Google Chromeアプリ版もあります。 追加してみました。面白いのはiPhoneアプリ版と同じ数値がちゃんと出ていることです。 GAuth AuthenticatorはJavaScriptを使ってワンタイムパスワードを生成します。実際iOSアプリと同じ数字が出てきますので、Googleの各サービスでキー入力を求められた際にもアプリを立ち上げる必要がなく便利そうです。 GAut
タスクのステータスを見える化·かんばんりすと MOONGIFT
かんばんりすとはカンバン方式におけるカンバンボードをオンラインで実現するソフトウェアです。 トヨタの生産方式として名高いカンバン。様々なプロジェクト管理、生産管理などでその名が聞かれます。今回紹介するかんばんりすともまた、カンバン方式（のカンバンボード）をオンラインで実現するためのソフトウェアになります。 メイン画面です。Todo、Doing、Waiting、Doneの4つの枠があります。 Booksはカテゴリとして使えます。 Booksを選ぶとリストがフィルタリングされます。 編集はその場でできます。 プライオリティの変更や状況の変更はドラッグアンドドロップで行います。 タスクの実行履歴です。 かんばんりすとではタスクリストに枠を設けてそのステータスに従って状況を見える化しています。誰がどのタスクを行っているか、何が終わって何が終わっていないかが一元管理できるのが便利です。 かんばんりす
モトローラ社製。HTML5を使ったWebアプリケーションを作るなら·Montage MOONGIFT
Montageはモトローラ社製のHTML5 Webアプリケーションフレームワークです。 Webサイトに比べるとWebアプリケーションで求められる素養は多少異なります。アプリケーションゆえに予め決められたコンポーネントを組み合わせて作る方が一般的です。そこで紹介したいのはMontage、モトローラ社製のHTML5 Webアプリケーションフレームワークです。 デモのKitchen Sinkです。 ボタンです。デザインはすっきりとして見やすいです。 こちらは時刻を表示するデモ。 クリックで削除するタグのデモ。 Todoアプリのデモ。 Fiddleを使って試す事もできます。 画像からカラーピッカーするデモ。 計算機のデモ。 Montageには多数のコンポーネントが用意され、それらを埋め込む形で配置してけば画面が出来上がります。カレンダーやレンジ入力、トグルボタンなど様々な入力コンポーネントが用意さ
シュビーン！誰もがビームを出せる·目からビーム画像ジェネレーター MOONGIFT
目からビーム画像ジェネレーターは画像を解析し、目の部分にビームを合成します。 X-MENのサイクロプスと言えば目からビーム。そう、人間は誰しも目からビームを出す事に憧れているのです。確かピッコロも出せます。そんな訳で自分でもビームを出してみたいと思ったら目からビーム画像ジェネレーターを使ってみましょう。 左が元画像。左が変換された画像。目からビーム！！ もう訳が分かりません。 Facebookのプロフィール画像も利用できます。ビームびしーっ！ 目からビーム画像ジェネレーターはface.comのAPIを使って顔と目を検出し、独自のビームを合成して画像にしています。結果はともあれ技術的にとても面白いです。 目からビーム画像ジェネレーターはRuby/Sinatra製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 MOONGIFTはこう見る このソフトウェア
1,000のサーバでも監視できるnode.js製死活チェッカー·uptime MOONGIFT
uptimeはnode.jsで作られたWebサーバ死活チェッカーです。 Webサーバがきちんと正常に動き続けているかどうか一番簡単にチェックするのは定期的にアクセスしてレスポンスタイムを見ることです。そんなWebサービスの死活チェックに使えるのがuptimeです。 サーバを立ち上げました。最初に監視するWebサーバを設定します。 URLと監視する間隔を指定するくらいです。 監視を開始しました。グラフは自動更新されないのでご注意ください。 イベントがあればこちらに出力されます。 グラフではなく一覧で結果を確認できます。 徐々にグラフが更新されていきます。 uptimeは1000以上のWebサーバを一括で監視できるパフォーマンスを持っています。またダウンしている際にはWebアラートを表示できます。エラーがあった際にはHTTPステータスやその内容を記録してくれます。サーバはタグを使ってグループ管
すごいぞ！HTML5で顔認識·HTML5 Face Detection MOONGIFT
HTML5 Face DetectionはHTML5を使って動画から顔をリアルタイム認識します。 HTML5はどこまで行くのか、それを改めて思い起こさせる凄いソフトウェアがHTML5 Face Detectionです。何と動画の顔認識をリアルタイムに行ってしまいます。 デモ動画です。上が動画、下がそれを解析して顔認識しているものです。 顔を動かしても付け目がね＋鼻が追いかけてきます。 筆者トライの図。Glassesをタップすると認識処理が開始されます。 デモ動画 HTML5 Face Detectionは動画のフレームを読み込み、JavaScriptで顔認識をした後、Canvasタグに鼻眼鏡とともにレンダリングしています。はっきり言ってかなり重たいのですが、技術的にはとても面白いソフトウェアです。 HTML5 Face DetectionはHTML5/JavaScript製のソフトウェア（
笑えないくらいちゃんとしている。Pure BashなRailsライクなフレームワーク·shails MOONGIFT
shailsはPure Bashスクリプトで作られたRuby on RailsライクなWebアプリケーションフレームワークです。 Bashだけでどこまでできるのか…そんな限界は実はないんじゃないかと思わされるのがshailsです。Bash on Railsと名付けられたRuby on RailsをBashスクリプトで表現したソフトウェアです。 shailsを実行すると環境が作成されます。 Railsっぽくフォルダやファイルが生成されています。 意外とファイル内容がちゃんとしていたりします。 シェルスクリプトなのにYAMLっぽく見えます。 shailsは実際にWebアプリケーションを作ることができます。大枠としてはネタソフトウェアなのですが、本格的すぎて引いてしまうくらいです。モデルもルーティングもテンプレートもあって、ぜひ見て触れて楽しんでほしいソフトウェアです。 shailsはBashス
Three.js対応。Webブラウザ上で3Dモデルを作成·ThreeFab MOONGIFT
ThreeFabはTree.jsに対応した3DモデルをWebブラウザ上で作成できるソフトウェアです。 Three.jsはJavaScriptで高度な3Dモデルを描画するエンジンですが、そのモデル作成はやはり大変な作業になります。そこで使ってみたいのがThreeFabになります。 最初の画面です。3Dモデルが奇麗に描かれていて格好いいです。 マウスで視点の変更もできます。 モデルを追加できます。 回転したりライトを変更することもできます。 最終的に作成されるコードを使ってThree.jsで3Dモデルを描けます。 こんな感じにモデルを追加していきます。 ThreeFabを使えばThree.jsで使えるモデルをWebブラウザ上で作成できます。S、D、X、スペースキーがそれぞれショートカットキーとして使えます。最初、慣れるまではなかなか操作が難しいかも知れません。ThreeFabはさらにアニメーシ
異なるSNSを結びつけるnode.jsを使ったWebチャット·cavad MOONGIFT
cavadは異なるSNS（現状はFacebookのみ）を結びつけるWebチャットシステム。 cavadはJavaScript/node.js製のフリーウェア（ソースコードは公開されている）。今のWebはソーシャル真っ盛りだ。ソーシャル○○と銘打ったサービスが乱立し、みんなそろそろ飽きてきている。今からソーシャル○○を作るのは無謀だろう。 チャット画面 だが新たに作らずとも、既存のソーシャル系サービスではOAuthを通じて様々なデータを公開している。そんなWeb APIを使ってSNS同士をつなげてしまうのがcavadだ。 cavadはWebチャットサービスだが、異なるSNS間をつないで利用できることを目標としている。現状ではFacebookのみとなっている。cavadにアクセスすると、Facebook Connectが求められる。そこで許可をするとcavadに戻り、チャットルームにログインで
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
