CoreUI - Vue/Bootstrap製の管理画面UI MOONGIFT
管理画面は主に運営元が使う画面になるので、デザインへのこだわりが殆ど感じられないことが多いです。しかし運営元が使いやすい画面でないと細かい制御がしづらかったり、サービスのステータス把握が遅れたりするのではないでしょうか。 そこで使ってみたいのがCoreUIです。VueとBootstrapを使って作られた管理画面テンプレートです。 CoreUIの使い方 スクリーンショット多めで紹介します。まずはダッシュボード。このようなUIの管理画面が簡単に作れます。 ボタン。 ソーシャルボタン。 カード。 フォーム。 モーダル。 スイッチ。 テーブル。 タブ。 アイコン。Font AwesomeかSimple Line Iconsがサポートされています。 ウィジェット。 こんなウィジェットも。 チャート。 ログイン画面。 登録画面。 エラー画面。 CoreUIはVueで作られていますので、表示する際にもW
SchemaRD - RailsのER図を生成 MOONGIFT
Ruby on Railsではデータベースのスキーマをコードを使って自在に作成できます。テーブル同士の関連性もコードで記述できるので、殆どデータベースを意識せずに作り込んでいけます。しかし、時にER図が必要になるケースもあるでしょう。 そうした時に使ってみたいのがSchemaRDです。Ruby on Railsのスキーマファイルを読み込んでER図に展開してくれます。 SchemaRDの使い方 最初の表示です。テーブルはただ並んでいるだけです。 テーブルの配置はマウスで変更できます。さらにちゃんと記憶しておいてくれます。 リレーションのファイルを生成すればテーブル同士のつながりも可視化されます。 SchemaRDを使えば現在のテーブル構造を可視化できるようになります。さらにi18nにも対応しており、日本語で表示も可能です。システム開発をRuby on Railsで行っており、そのER図を随時
Bootstrap Clean Dashboard Theme - 管理画面に向いたBootstrap製ダッシュボードテンプレート MOONGIFT
Bootstrapが最もよく使われるのは個人のWebサービス、そして企業の管理画面ではないでしょうか。そこまでデザインがよくある必要はないですが、見逃し防止の一覧性やグラフの見やすさなどが求められます。 そんなBootstrapを使った管理画面テンプレート、Bootstrap Clean Dashboard Themeを紹介します。情報が一カ所に集中したダッシュボードが作れそうです。 Bootstrap Clean Dashboard Themeの使い方 デモ画面です。殆どのボタンは機能しません。 グラフもあります。各コンテンツはボックスに入っています。 ボックスをクリックするまでは折りたたんでおくといった表示もできます。 フォーム。 アドレス帳風。 ログイン。 Bootstrap Clean Dashboard Themeはダッシュボードなので、管理画面上にたくさんの情報を見やすく配置す
Mattermost - Go製のSlack代替サーバ MOONGIFT
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Slackが急成長しています。多くの企業でSlackが使われており、遠隔地（または社内であっても）のコミュニケーションに役立てられています。しかし企業によってはセキュリティ上の理由などで導入できないこともあります。 そんな企業が使ってみたいのはSlackクローンになるでしょう。今回はDockerを使って簡単に導入できるMattermostを紹介します。 Mattermostの使い方 既にDockerが入っているならば、以下のコマンドを実行するだけです。 docker run --name mattermost-dev -d --publish 8065:80 mattermost/platform:helium 後はサーバにアクセスするだけですが、サブドメインを使うのでhostsな
BikeBook - Rubyで作る自転車比較サイト
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました これは応用がききそう！ 新しいモノを買う時には同じ分野の商品で比較しますよね。むしろその比較している時間が最も充実している可能性すらあります。色々な商品を横並べにして眺めるのが楽しいです。 価格コムには商品を選択して詳しく比較する機能がありますが、それと同じようなUIを提供するのがBikeBookです。名前の通り、自転車を比較します。 BikeBookの使い方 BikeBookは自転車の比較サイトとなっていますが、同じ仕組みを使えば家電などもできるでしょう。他のサイトでは行っていないようなジャンルで比較サイトを作ってみる時のベースにするのも良さそうです。 BikeBookはRuby製、GNU Affero General Public Licenseのオープンソース・ソフトウェアで
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リポジトリに移動します。例えば最後のコミットとの比較はこんな感じです。
AdminLTE·ここまで多ければ何でもできそう。多機能なBootstrapベースの管理画面テンプレート MOONGIFT
これで十分でしょ！ Bootstrapで作る管理画面は相当増えてきているようです。確かに一般ユーザ向けに提供するとBootstrap臭が出てしまいますが、管理画面であれば問題はないですよね。 ということで今回は新しいBootstrap製の管理画面テンプレートAdminLTEを紹介します。高度なウィジェットが数多く提供されていますので使い勝手良さそうですよ。 AdminLTEの画面 今回もスクリーンショット多めで紹介します。 ダッシュボード。この時点でかなりリッチ。 ボックス。これだけ多彩なパターンがあると言うのも凄いですね。 左端にはちょっとした設定を表示させています。 背景色を変えるだけでも随分印象が違います。 グラフ。 こちらもグラフ。 外部ライブラリもそつなく使いこなしています。 スパークラインも！ アラート。ちょっと飛び出しているのがいい感じです。 アイコン。 ボタン。フラット系で
Maplace.js - 軽量なjQuery × Googleマップライブラリ MOONGIFT
Googleマップをプログラマブルに組み込むのに良さそうです。 GoogleマップはAPIの多彩さ、機能の柔軟さもあって様々なサービスで使われています。位置情報や地図を扱おうと思ったら一番に考えるのではないでしょうか。 そんなGoogleマップをさらに手軽に使えるようにしてくれるライブラリがMaplace.jsです。機能は限られますが広範囲に利用できそうです。 まずは簡単なデモ。地図の表示を行います。コードとしてはたった数行です。 // JavaScript var maplace = new Maplace(); maplace.Load(); // or new Maplace().Load(); // HTML <div id="gmap"></div> その結果は次のようになります。 シンプルな地図表示。 次はドロップダウンやリストを使ったマーカーのデモ。マーカーは自動的に中央に表
Gumby - Bootstrapの強力なライバルになるか！？シンプルかつ強力なCSS3フレームワーク MOONGIFT
CSS3フレームワークは数多くなってきたのでその特徴をちゃんと掴んでおかないといけないですね。 GumbyはSassを使ったCSS3フレームワークです。他のフレームワークと同じようにレスポンシブ、モバイルフレンドリーになっています。その特徴を見ていきましょう。 まずデスクトップからです。 ヘッダーバー。フラットだったり、幅が固定だったりと色々な形式が想定されています。 タイポグラフィ。可読性高いです。 リストだけでも黒丸、白丸、ドット、数字など多数用意されています。さらに定義リストまで！ ボタン。サイズ、色、形が様々です。片方だけ丸い、なんて便利そうですね。 インジケーターやラベル、アラート。こういうのもよく使いますよね。 フォーム。基本的にplaceholderを使った表示になっているようです。 テーブル。角丸サポートです。 タブ。幅が設定できます。 縦のタブもあります。 ドロワー。クリ
node.jsを組み込んでローカルアプリケーション風に動作·node-webkit MOONGIFT
node-webkitはWindows/Mac OSX/Linux用のオープンソース・ソフトウェア（MIT License）です。 nodeは一般的にサーバサイドの技術で、サーバを立ててその上で実行されます。しかしnode.jsを使ってクライアント向けのアプリケーションが作れたらとても便利そうです。そんな夢を実現してくれるのがnode-webkitです。 こちらはデモアプリ。ブラウザはChroniumになります。 こんな感じでHTML/JavaScript/CSSで作ったアプリケーションを実行できます。 実行結果です。面白いのはJavaScriptではなく、node.jsのライブラリを組み込めることでしょう。 node-webkitはnpmで組み込む類のソフトウェアではありません。Chroniumをベースにnodeを動かせるように組み込んだソフトウェアです。Windows/Mac OSX/
Google Driveをより使いこなすためのRubyライブラリ·Google Drive Ruby MOONGIFT
Google Drive RubyはGoogle Driveのファイル操作やGoogleドキュメントの編集ができるRubyライブラリです。 Dropboxに押されて今ひとつ人気が出ないGoogle Driveですが、豊富なユーザ数とコンテンツを持っているGoogleのサービスと組み合わせればきっと面白いことができるはずです。さらにサーバサイドと組み合わせて面白いサービスが作れそうな時に使って欲しいのがGoogle Drive Rubyです。 ドキュメントの一覧を取得しました。 特定のスプレッドシートを開きます。 特定のセルの値を読み取ります。 さらに更新もできます。 Google Drive Rubyを使うとGoogle Drive上にストアされているドキュメントを読み込んだり、ローカルのファイルをアップロードすることもできます。クライアントサイドで使うのにも、サーバサイドでの連携において
JavaScriptを使ったリアルタイムA/Bテスト·Abba MOONGIFT
AbbaはJavaScriptを使ったUIのA/Bテストを行うソフトウェアです。 Webサイトの良いところは変更コストがとても小さい所にあると思っています。ちょっとしたテストを行うのが簡単で、戻すのもそれほど難しくありません。そこでWeb上でA/Bテストを行う際に遣ってみて欲しいのがAbbaです。 管理画面です。この右側に出ているコードを実行することでA/Bテストを行えます。 測定結果はリアルタイムに反映されます。 Aの方が反応が良いといった結果が簡単に分かります。 Abbaの仕組みとしては、A/BそれぞれについてJavaScriptを実行します。例えばボタンの配置を変えたり、CSSのクラスを変えて見た目を変更できます。そしてその結果クリックなどのイベント対してテストが完了したというアクションを実行する仕組みです。 AbbaはRuby製、MIT Licenseのオープンソース・ソフトウェア
まるでネイティブのようなUIを実現できる高機能JavaScript UIライブラリ·w2ui MOONGIFT
w2uiはデスクトップ、スマートフォン、タブレットに対応したJavaScript UIライブラリです。 新しいJavaScript UIライブラリの紹介です。名前はw2ui、多数のウィジェットを搭載したUIライブラリとなっています。 レイアウト。 グリッド。 詳細検索対応。 ツールバー。 サイドバー。階層表示に対応しています。 タブ。 フォーム。 ポップアップ。 ツールチップ。 その他ユーティリティ。 w2uiのサイズは37KB（ミニファイ&Gzip）で、これはExtJSの1/12、Kendo UIの1/6となっています。また、jQueryベースという特徴、全てのウィジェットをまとめて提供、IE9、Firefox7、Google Chrome、Safari5に対応となっています。デスクトップはもちろん、タブレットやスマートフォンにも対応しています。 w2uiはJavaScript製、MIT
Webアプリケーション開発に使えるJavaScriptフレームワーク·ComponentJS MOONGIFT
ComponentJSはWebアプリケーション開発用のMVC対応JavaScriptフレームワークです。 ここ数年JavaScriptのフレームワークが幾つも登場していますが、今回紹介するのはComponentJS、HTML5のリッチWebアプリケーション開発用のJavaScriptフレームワークです。 デモのログイン機能。 ビジュアルデバッガーが売りの一つです。 ComponentJSは階層化されたコンポーネント、MVC、イベント駆動型、状態管理などが特徴になっています。他のライブラリへの依存がなく、jQuery UIやSencha Touchなどとも連携できます。さらにビジュアルデバッガーという強力なライブラリが提供されています。 ComponentJSはJavaScript製、Mozilla Public Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る
HTML5/CSS3を使った多機能デザインフレームワーク·HTML KickStart MOONGIFT
HTML KickStartはBootstrapライクなデザインテンプレートフレームワークです。 最近ではWebサイトのベースにBootstrapを利用することが多いのですが、今回はその類似ソフトウェアとしてHTML KickStartを紹介します。こちらもかなり高機能です。 Typography。 リストとメニュー。 メニューは階層対応。 テーブル。 ツールチップ。上下左右自在です。 アイコン。 プログラミングコード。 ボタン。 タブ。 パン屑。 グリッド。 画像。 スライドショー。 動画、地図、カレンダー。 フォーム。 入力フィールドのサイズ。 その他色々。 極力シンプルなHTML構造設計、jQuery利用、HTML5、モーダルウィンドウなどが特徴に挙がっています。唯一残念なのは現状はレスポンシブWebデザインでないことかも知れません。しかし全てのデバイスへの対応を考えないならむしろ手
JavaScriptを使ってSVGでグラフを描く·Morris.js MOONGIFT
Morris.jsはjQueryを使ったSVG描画型のグラフライブラリです。 Webブラウザ上でグラフを描画しようと思ったら従来はサーバサイドの仕組みかFlashを使うのが一般的でした。しかし今後はJavaScriptが便利です。Morris.jsはjQueryを使ったグラフライブラリです。 二つのデータがある折れ線グラフ。 棒グラフ。 エリアグラフ。 パイチャート。 今のところ対応しているのは折れ線、棒、エリア、ドーナッツチャートになっています。それぞれ豊富なオプションが用意されています。また、マウスオーバーで値をフローティング表示してくれるのも便利です。データはJavaScriptで与えますが、グラフはSVGで出力される仕組みになっています。 Morris.jsはjQuery/JavaScript製、BSD Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る
JavaScriptでXLSX形式を扱う·XLSX.js MOONGIFT
XLSX.jsはJavaScriptでExcelファイル（Base64エンコード）を読み込んだり、ダウンロードさせられるソフトウェアです。 Googleスプレッドシートをはじめ、Webブラウザ上で表計算表示を行ったり、編集したりするWebアプリケーションがあります。しかし最も有力なのはExcelでしょう。そこで試したいのがExcelファイルを読み書きできるJavaScriptライブラリ、XLSX.jsです。 ダウンロードされたファイルです。ちゃんとXLSXとして認識されます。 ファイルを読み込む処理のデモです。Base64エンコードされたデータが解析されています。 XLSX.jsはbase64のXLSXファイルを読み込み、JavaScriptオブジェクトに変換できます。後はいかようにも表示できるでしょう。また、シート名と各セルの値をHTMLテーブルから読み込んでXLSXファイルに変換してダ
オフラインでも使えるJavaScriptベースの全文検索エンジン·Fullproof MOONGIFT
FullproofはJavaScriptベースの全文検索エンジンです。高速に動作します。 Webサイトのコンテンツが充実してきたら欲しくなるのが検索機能です。Google検索を使っても良いですが、ここではFullproofを紹介します。何とJavaScriptベースの全文検索エンジンです。 色検索エンジン。 動作は高速です。 動物検索エンジン。 ゲーム検索エンジン。スコアが表示されています。 スコアの高いデータが上に出ます。 FullproofはHTML5のローカルストレージに対応し、WebSQLやIndexedDBにも対応します。Unicodeをフルサポートしています。スコアによって順位が決定します。発音記号に対応しますが、現在は英語とフランス語のみとなっています。JavaScriptだけとあって動作は高速です。 FullproofはHTML5/JavaScript製のオープンソース・ソ
管理画面もあるPHP製の認証システム·AuthManager MOONGIFT
AuthManagerは認証およびユーザ管理を提供するシステムです。 Webサイトを作っていて認証はよく必要になります。しかしその度に作っていては面倒に感じることでしょう。そこでAuthManagerを組み入れてみましょう。認証とユーザ管理を一手に引き受けてくれる便利なソフトウェアです。 登録画面です。 ログイン画面です。 ログインしました！アイコンも表示されています。 こちらは管理向け。ユーザ管理画面です。 設定です。 reCAPTCHAの設定です。 AuthManagerの主な機能は指定されたコードを埋め込むことでコンテンツへのアクセスを制限できるようにする、管理画面を使ったユーザ管理、reCAPTCHA対応、Facebookコネクト、メールテンプレート、アクセスログ、Google Analyticsサポートとなっています。 AuthManagerはPHP製のソフトウェア（ソースコード
これは凄い。JavaScriptで作られたPHP VM·php.js MOONGIFT
php.jsはJavaScriptで作られたPHP VMです。PHPコードをJavaScriptに変換して実行します。 世の中には色々変わったことを考える人がいます。Webブラウザでデフォルトで実行できるプログラミング言語がJavaScriptだけなんて許しがたい、そう考えたPHPプログラマーが生み出したのがphp.jsです。その名の通り、PHPの実行エンジンをJavaScriptに実装したというとんでもないソフトウェアになります。 確かに実行できています。PHPのコードからJavaScriptに変換を行っているようです。 配列、クラスさらにvar_dumpまで実装されているのが興味深いです。 かなり突っ込んだPHPの処理もできている模様です。これは面白い。 ダブルクオートの中に変数を入れて普通に出力できているのが興味深いです。 php.jsではPHPのコードがそのまま実行できます（もちろ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
