Server Monitoring Dashboard - サーバ管理画面に使えるBootstrapテンプレート
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました サーバ管理者と言えばコンソールを叩いてサーバのステータスをチェックして…というのは過去の話なのかも知れません。何台ものサーバ、常時モニタリングを考えたならばサーバ管理用ダッシュボードの存在は重要です。 そこで自作のダッシュボードを作成する際にテンプレートにできそうなのがServer Monitoring Dashboardです。すっきりとしたUIで見やすいサーバの状況管理ができそうです。 1つのデータ表示、テーブルでの一覧表示、各ステータス別のリフレッシュボタン、ページネーションなど概ね必要そうな機能が揃っています。後はデータを蓄積できればグラフにしても良さそうです。 このテンプレートはサーバ用ですが、多少変更すればサービス向けの独自ステータス監視にも使えるかと思います。テンプレー
Mancy - GUIのNode実行環境
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました JavaScriptでの開発が盛んになったのはFindBugやDevToolsに代表されるコンソールなどの実行環境が充実したことにあるのではないでしょうか。今や開発ツールがなければJavaScriptでの開発が成り立たないほどです。 もう一つ（サーバサイド）のJavaScript実行環境であるNodeの場合はどうでしょうか。node -i もありますが、関数などがFunctionになってしまって分かりづらいかと思います。そこで使ってみたいのがMancyです。 Mancyの使い方 MancyはNodeのRead-eval-print loop（対話型実行環境）になります。書いたコードをその場で評価してくれます。 実行結果をコンソールを使って出力できます。 エラーも確認できます。 オブ
toEver – ファイルを指定してEvernoteにアップロード
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Evernoteは時々使っているのですが、Webクライアントもデスクトップ用クライアントも重たくて使っていません。また、文章を書いたりする際には普段使い慣れたエディタのが楽という方は多いでしょう。 とはいえデータは一元管理したいと言う筆者と同じような方にお勧めなのがtoEverです。コマンドラインからEvernoteにファイルをアップロードできるCLIツールです。 toEverの使い方 インストールはpipやHomebrewで行えます。 $ sudo pip install toever または $ brew install ngc224/toever/toever まず最初に設定を行います。 $ toever --config この際、EvernoteのAPIトークンを取得する必
Bootstrap Material - Material Designを適用したBootstrapテーマ
Googleが開発者向けイベントで発表した新しいデザインコンセプトのMaterial Design。フラットUIをベースとしつつ、さらにアニメーションやエフェクトを通してユーザに情報を分かりやすく伝達できます。 そんなMaterial DesignをBootstrapに適用したのがBootstrap Materialです。これは多くのプロジェクトで活躍しそうです。 Bootstrap Materialの使い方 Bootstrap MaterialはフラットUIのBootstrapテーマとしてもいい感じですし、さらにMaterial Designによって情報が分かりやすくなります。デスクトップはもちろんのこと、スマートフォン/タブレット向けのデザインとしても使えることでしょう。 Bootstrap MaterialはHTML5/CSS3/JavaScript製のソフトウェア（ライセンスは独自
nexe - nodeスクリプトをラッピングして実行ファイル化
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました nodeを使えばJavaScriptでローカルで動くコマンドなどを作ることが出来ます。これはとても便利で個人的にはよく使うのですが、そのためには予めnodeがインストールされていなければなりません。 もちろんバイナリでも配布されているのですが、インストールの手間は初回実行には相当大きいと言えます。そこで使ってみたいのがnodeスクリプトを実行ファイル化するnexeです。 nexeの使い方 nexeは他の同じようなソフトウェアと同じく、nodeの実行エンジンをスクリプトと一緒にするタイプのソフトウェアです。 コンパイルはこのように行います。 nexe -i ./ -o ./hello-world.nex -r 0.8.18 コンパイルのためにnodeのコンパイルまで行うので初回は時間
Famo.us·WebGL/Canvasを使って高度な表現を可能にするJavaScriptフレームワーク MOONGIFT
スマートフォンにおいてWebかネイティブかと言った議論は常にされています。ネイティブアプリは高度なUI/UXを提供する一方、インストールの手間が否めません。Webは速度やUXにおいて見劣りがします。 しかしWeb（HTML5）の進化は止まりません。ついにここまで！というフレームワークがFamo.usです。3Dを備えたレンダーを行うJavaScriptフレームワークになります。 Famo.usの使い方 たくさんのデモが登録されていますので見ていきましょう。 写真と画像の組み合わせ。左右から表示されるアニメーションもあります。 スクロールパララックスエフェクトのデモ。 アニメーションのデモ。 カレンダーの日付を選択するとスケジュールが開きます。アニメーションがスムーズです。 スライドして表示される写真のデモです。 ページ送りのデモ。 天気アプリデモ。ベクター調の表示がいいですね。 タスク管理。
Webアプリケーションの画面をさくさく作ろう。UIフレームワーク特集 MOONGIFT
今回はWebアプリケーションの画面作成に関する話です。かつて業務システムというのはエンジニア自身が画面を作ってロジックを実装して提供していました。UIがただコンポーネントを貼付ける程度だったからです。 しかしWebアプリケーションの時代になって、UIの制作が難しくなってきています。デザインの自由度が高いためです。しかし今後さらにWebアプリケーションが活用されていく中ではエンジニアもそれなりの画面を素早く開発できるようになっていかないといけない時代になっています。 そこで今回はUIフレームワーク、多彩なコンポーネントを備えたデザインフレームワークをまとめて紹介します。 iPhone/Android/Windows Phone対応のモバイルWebアプリフレームワーク「ChocolateChip」 モバイルWebサイトをネイティブ風にするUIライブラリは昔から多数存在しますが、今回はその最新版
Hierapolis – フラットUIを活かしたBootstrap管理画面テーマ
管理画面であれば社内の人くらいしか使いませんので、あまりデザインにこだわる必要がないのでベタなBootstrapを使ってもそんなに嫌がられることはないでしょう。とは言えちょっとは格好よく見せたい場合もありますよね。 そんな時に使ってみたいBootstrapテーマがHierapolisです。フラットなデザインで格好いい管理画面用テーマとなっています。 Hierapolisの使い方 Hierapolisはサイドバーがついていて、一覧性がある管理画面が作れます。デザインはフラットだけにシンプルで、各機能に素早くアクセスできるのが特徴です。使い勝手が良いのではないでしょうか。 HierapolisはHTML5/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 Sign in lab2023/hierapolis
Slate - Web APIのドキュメントを書く際にどうぞ！ MOONGIFT
Webサービスを提供していたり、スマートフォンアプリと連携するサーバを開発していたりすると必要になるのがWeb APIのドキュメントです。HTTPメソッド、パラメータ、返却値などが分かりやすく書かれている必要があります。 どういったドキュメントが読みやすいかは悩みどころですが、Slateは3ペインの構成になっていて見やすいのではないかと思います。ぜひご覧ください。 Slateの使い方 こちらがデモです。左が機能の一覧、中央が説明、右が実際のコードになります。 コードはShell、Ruby、Pythonで書かれています。 エラー時の内容も細かく書かれています。 Slateは一つのMarkdownファイルから生成されています。そのため単純なHTMLとして可読可能で、それをSlateを使って3ペインのより可読性高い形式にした訳です。Markdownで書く際に予めSlateの記法に沿って書いておく
Social Builder·自分のサイトにマッチしたソーシャルボタンを作ろう MOONGIFT
シェアボタンはサービス拡大の要です、気を抜かないようにしましょう。 ブログ、メディア、個人サイトを問わずいいねボタンやツイートボタンを設置するのはごく当たり前になっています。そんな中にあっては予め用意されているものを単に貼付けるだけでは目立たなくなっています。 多少なりとも工夫をしてみることをお勧めします。今回はサービスの選択が可能なソーシャルボタンビルダー、Social Builderを紹介します。 左側でサービスを選択します。その結果、右側にHTMLとスタイルシートの内容が表示されます。 サービスを選択すればリアルタイムにHTML/スタイルシートの内容が書き変わります。 サービスだけでなくアイコンの形も選択できます。 後はURLも入力すれば内容がちゃんと反映されます。 選択できるサービスはFacebook/Twitter/Goolge+/LinkedIn/Pinterestとなっていま
スクロールしよう。iPhone 5sのページを再現·jQuery One Page Scroll MOONGIFT
jQuery One Page ScrollはjQuery/JavaScript製のソフトウェアです。 ここ最近スクロールを上手に使って効果的な見せ方をするサイトが増えています。その一つがiPhone 5sの商品紹介ページです。その表示を真似したソフトウェアがjQuery One Page Scrollです。 トップページです。iPhone 5s風のイラストですね。 ちょっとスクロールしようとすると一気に2つ目のスライドまで滑っていきます。 さらにその下まで。3つのスライドがスクロールで切り替えられます。 ウィンドウ幅を縮めてもいい感じに表示できます。 使い方は簡単で、sectionタグごとにコンテンツを記述します。後はjQuery One Page Scrollを読み込んで$(".main").onepage_scroll()のようにメソッドを実行すれば良いだけです。 Webデザインは模
OAuth認証を一手に行うOAuth.ioのJavaScriptクライアント·oauth-js MOONGIFT
oauth-jsはJavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 ソーシャルなサービスが増えるのに伴ってOAuthプロバイダーはどんどん増えています。OpenIDと違って、同じ仕様で全てがこなせないのが辛いところです。そこで使ってみたいのがOAuthをまとめてくれるOAuth.ioで、さらにそれを簡単にしてくれるのがoauth-jsです。 デモの画面です。70を越えるプロバイダが利用できます。 ポップアップ版による実装です。 ウィンドウが閉じるとデモの画面でトークンが表示できています。 GitHubなどもポップアップにできます。 プロバイダによって多少のデータフォーマットの違いはありますが、概ね同じ形のようです。 oauth-jsを使うとリダイレクト方式とポップアップ方式を簡単に切り替えて使えます。いずれの形にしてもサーバサイド
レスポンシブ対応のフラットなUIフレームワーク·Furatto MOONGIFT
FurattoはHTML5/JavaScript/CSS3製のオープンソース・ソフトウェア（Apache License 2.0）です。 最近流行のフラットデザインでサイトを作ってみたいと思いつつ、そのデザインフレームワークを使いこなすのが大変…と感じている方はFurattoを試してみましょう。BootstrapをベースにしたフラットUIデザインが実現できます。 ボタンデザイン。四角い、立体感のないデザインです。 カラーバリエーションも良くあるフラット系になっています。 ボタンにアイコンを載せることもできます。 画像。丸く表示もできます。 囲みをつけることもできます。囲みの色も変更可能です。 テーブル表示。こちらは通常のテーブルです。 ちょっと詰まった感じのテーブル。 行ごとの色変更も可能です。 レスポンシブなテーブルもありますが、幅をスマートフォンサイズまで縮めるとうまく表示できませんで
デスクトップ、スマートフォンで使えるシックなデザインフレームワーク·TopCoat MOONGIFT
TopCoatはグレー系を主体とした落ち着いた雰囲気のWebデザインフレームワークです。 最近はWebデザインフレームワークが多数出揃ってきました。サイトの雰囲気によってフレームワークを選ぶと良いでしょう。グレー系の落ち着いた感じを出したいならばTopCoatを使ってみましょう。 グレースケールを基調としたはっきりとした見た目のUIです。 ウィジェットは数多く提供されています。 フォーム系。 スライダーなどもあります。 スピナー。効果的に青が使われています。 こちらはモバイル。スマートフォンで使えます。 アイコンとラベルのセット。 テキストエリアとチェックボックス。 基本的に濃淡2色のバックグラウンドが選択できます。 オーバーレイ表示。これも色々使えそうです。 TopCoatはデスクトップとモバイルのそれぞれにデザインが提供されています。グレー系が約6色、青系が2色程度で構成されています。
まるでネイティブのような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
Twitter製。大型Webアプリケーション開発にぜひ·Flight MOONGIFT
FlightはTwitter社の開発した軽量なコンポーネントベースのJavaScriptフレームワークです。 BootstrapのリリースでWebサービス開発のデザインに革命的なインパクトを与えたTwitterから次いで登場したのがFlightです。コンポーネントベースのJavaScriptフレームワークです。 デモのメーラー風アプリケーションです。 メニューが出たりメールの選択ができます。 新しいメッセージの作成ウィンドウ。フローティングです。 こんな感じのファイル構成になっています。 Flightではコンポーネントから別なコンポーネントを参照できるようになっていません。他のコンポーネントをサブスクライブし、アクションが起こった時に伝えてもらう仕組みになっています。一つのコンポーネントの一つのアクションから複数の別なコンポーネント呼び出しなども簡単に実現できるようになっています。 Fli
クライアントサイドのJavaScriptパッケージ管理·Jam MOONGIFT
JamはWebブラウザ用JavaScriptのライブラリマネージャです。 素のJavaScriptを用いず、jQueryやMootoolsなどのフレームワークをベースに利用することが増えてきました。そうなるとライブラリのバージョン管理やセットアップを手軽にできるソフトウェアが必要になるでしょう。そこで使ってみたいのがJamです。 インストールです。npmを使って簡単にインストールできます。 例としてjQueryをインストールします。 こんな感じに配置されます。 インストールされているライブラリを一覧できます。 compileを使えば利用しているライブラリ全体を一つのJavaScriptファイルに変換できます。 使い方です。requireを使って読み込めます。 JamではjQuery、underscore、backbone、sha1など大小さまざまなライブラリが登録されています。バージョン管
WebベースのMongoDB管理インタフェース·mViewer MOONGIFT
mViewerはWebベースのシンプルなMongoDB管理インタフェースです。 最近はNoSQLを運用の一部に使うことが増えてきました。そうなると必要になるのが管理ツールです。すぐに使えて手軽なものが良ければmViewerを使ってみましょう。起動コマンドも用意されていて簡単です。 トップページです。ログインします。 ログインしました。左側にデータベースが並んでいます。 データベースを選択するとコレクションが表示されます。 コレクションはツリーテーブルで表示もできます。 サーバの状況表示。 データベースの状況表示。 ツリーを開いてさらに内部の値を確認できます。 Flashベースの利用状況モニタリング。 新しいデータベースの作成もできます。 コンテクストメニュー。 デモ動画です。 mViewerはデータベースの作成や削除、コレクションの作成、更新と削除、GridFSファイルの追加、表示、ダウン
こんな手が…。Dropbox上で動的システムを動かす「Drapache」 - MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ
DrapacheはDropbox内のファイルを読み込んで動的に動かすWebサーバです。 DropboxではPublicに入れたファイルをHTTPを通じて読み込めるようにしています。この機能を使って静的なWebサイトを提供している人もいます。しかしそれで十分ではありません。時代は動的システム、Dropbox内のファイルを動的システムに対応させるソフトウェアがDrapacheです。 まずドメインを取ります。 次にDropboxをコネクトします。 接続を許可します。 完了です。そうするとアプリフォルダの中にDrapacheフォルダができあがります。 ファイル構成はこんな感じです。 サンプルのスクリプトです。確かに動的ファイルが動いています。 動的です。もちろん修正すれば若干のタイムラグはあれど反映されます。 Drapacheの仕組みとしては登録したユーザのデータを読み込み、DrapacheがWe
JavaScriptオブジェクト用問い合わせ言語·SpahQL MOONGIFT
SpahQLはJavaScriptオブジェクトのデータ抽出に使えるクエリライブラリです。 WebアプリケーションではデータをJSONで利用するのが一般的です。データが大量にあるのであれば、そこから欲しいデータだけを抽出する仕組みが必要になるでしょう。JavaScriptでそれを可能にするのがSpahQLです。 例です。hash1というキーに対応したデータを取り出しています。 ネストして調べられます。 配列、ハッシュどちらにも使えます。 配列の場合は0などとキー指定もできます。 配列でサイズが1以上のものをピックアップしています。 データは抽出するだけでなく、プロパティを使ってサイズやデータの種別を調べることもできます。さらに正規表現を絡めてマッチするか否かをチェックするといった機能もあります。node.js、Webブラウザどちらでも使えるライブラリになっています。 SpahQLはJavaS
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
