AdminLTE·ここまで多ければ何でもできそう。多機能なBootstrapベースの管理画面テンプレート MOONGIFT
これで十分でしょ！ Bootstrapで作る管理画面は相当増えてきているようです。確かに一般ユーザ向けに提供するとBootstrap臭が出てしまいますが、管理画面であれば問題はないですよね。 ということで今回は新しいBootstrap製の管理画面テンプレートAdminLTEを紹介します。高度なウィジェットが数多く提供されていますので使い勝手良さそうですよ。 AdminLTEの画面 今回もスクリーンショット多めで紹介します。 ダッシュボード。この時点でかなりリッチ。 ボックス。これだけ多彩なパターンがあると言うのも凄いですね。 左端にはちょっとした設定を表示させています。 背景色を変えるだけでも随分印象が違います。 グラフ。 こちらもグラフ。 外部ライブラリもそつなく使いこなしています。 スパークラインも！ アラート。ちょっと飛び出しているのがいい感じです。 アイコン。 ボタン。フラット系で
jscpd·不具合防止に。コードの重複をチェック！ MOONGIFT
DRY（Don't repeat yourself）という概念があります。つまり同じコードは繰り返すなということです。もし繰り返す必要があるならば、それは関数にするなどまとめるようにしなければなりません。 DRYをなくしていくことでコードの可読性を高めたり、メンテナンスしやすくなります。そんなコードの改善を手助けしてくれるのがjscpdです。 jscpdのインストール npmなのでインストールは簡単です。 $ npm install jscpd -g jscpdの使い方 例えば以下のように使います。 --path でパスを指定し、 --languages でチェックする言語を指定します。 $ jscpd --path ~/Dropbox/markry --languages js,coffee info: jscpd - copy/paste detector for programmin
Server Monitoring Dashboard - サーバ管理画面に使えるBootstrapテンプレート
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました サーバ管理者と言えばコンソールを叩いてサーバのステータスをチェックして…というのは過去の話なのかも知れません。何台ものサーバ、常時モニタリングを考えたならばサーバ管理用ダッシュボードの存在は重要です。 そこで自作のダッシュボードを作成する際にテンプレートにできそうなのがServer Monitoring Dashboardです。すっきりとしたUIで見やすいサーバの状況管理ができそうです。 1つのデータ表示、テーブルでの一覧表示、各ステータス別のリフレッシュボタン、ページネーションなど概ね必要そうな機能が揃っています。後はデータを蓄積できればグラフにしても良さそうです。 このテンプレートはサーバ用ですが、多少変更すればサービス向けの独自ステータス監視にも使えるかと思います。テンプレー
Vagrant – 仮想化を使って開発フローを効率化しよう
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 数年前から仮想化が盛り上がっています。本番環境でハードウェアリソースを有効活用するための仮想化もありますが、今回は開発環境を仮想化し、効率化するVagrantを紹介します。 セットアップ 使い方はとても簡単です。ダウンロードとインストールが終わったら順番にコマンドを叩いていきます。 最初にボックスの作成。 $ vagrant box add base http://files.vagrantup.com/precise32.box Downloading box from URL: http://files.vagrantup.com/precise32.box Extracting box...te: 52818/s, Estimated time remaining: 0:00
Backbone-Eye·Backboneアプリを開発するならFirefoxでいこう！ MOONGIFT
これは面白い！ Webアプリを開発する際に注目を集めているフレームワークBackbone。あまり厚くない仕組みになっているので理解はしやすいのですが、それでも開発時には色々難問にぶつかることがあります。そこでDevtoolsのような開発ツールが役立ちます。 さらにそれを一歩進めてBackbone専用に特化させたのがBackbone-Eyeになります。Firebug専用のツールになっており、Firefoxに元々含まれている開発ツールでは動きませんのでご注意ください。 インストール インストールはMozilla Add-onsから行えます。Firebugも忘れずにインストールしましょう。 インストールしたらBackboneアプリケーションを開きます。 使い方 こちらはサンプルのBackboneアプリケーションです。Firebugを開きます。 Firebugを開くとBackbone-Eyeのタブ
GitHubをもっと便利に使うためのツールを一気に紹介！ MOONGIFT
数多くのプログラマーにとってもはやなければならないツールになっているGitHub。企業ベースでの利用も増えており、その周辺サービスも数多く出揃ってきています。MOONGIFTでもこれまで多くのGitHub関連ソフトウェアを紹介してきました。 そこで今回はGitHubのデータを利用したり、もっと便利にするためのソフトウェアを紹介します。GitHubでソフトウェアを公開しているケースが多く、単にサイト内検索だけでは抽出しきれません。そこで直接データベースを掘り返して探してみました。 外部利用 GitHubは開発者向けのソーシャルサービスとあって、その活動をアクティビティに活かす試みが数多く存在します。またWeb APIが公開されているのでそれを使ってデータ操作を行う試みも増えています。 gist-it – GitHubのファイルをGist風に埋め込み表示|オープンソース・ソフトウェア、ITニュ
videoconverter.js - なんてこった！Web上で動作するFFMPEG MOONGIFT
Emscriptenの限界が見えない…。 JavaScriptを使ってどこまでのことをやらせるのか、そんな限界に日々挑戦している人たちがいます。その際に注目したいのがEmscriptenではないでしょうか。 既存のソフトウェアをJavaScriptに変換することで無茶と思えるような行為が平然と行われています。今回は動画の変換ソフトウェアとして知られるFFMPEGをJavaScriptにしてしまったvideoconverter.jsを紹介します。 ライブラリ読み込み中。意外と時間がかかります。 読み込みが終わりました。ヘルプが出ています。 コーデックの表示です。 画像の変換もできます。 WebMフォーマットの動画をMPEG4に変換する無茶を試みます。 時間はかかりますがちゃんと変換されました。 使い勝手としてはFFMPEGなので画像や動画を自在に操作することができます。動画をアニメーションG
tag – Mavericksのタグファイル管理をターミナルから利用
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Mac OSX 10.9 Mavericksになってから追加された機能の一つにタグがあります。ラベル機能はこれまでもありましたが、よりタグの付け替えがしやすくなったことでタグを使ってファイル管理をしてみようと思えるようになったのではないでしょうか。 そのタグ機能をターミナルから扱えるようにするソフトウェアがtagです。コマンドラインで使えるということはシステムとの連携も含めてやりやすくなりそうです。 コマンド名はtagです。オプションは以下のようになります。 $ tag --help tag - A tool for manipulating and querying file tags. usage: tag -a | --add <tags> <file>... Add tag
iniscan·php.iniの設定ファイルをチェックして危険なポイントを洗い出し MOONGIFT
PHPは年々進化していて、それでいて過去のバージョンとの互換性もほぼ維持されています。しかしネットワークが進化する中で従来は使われていた設定が非推奨になっていることも少なくありません。 もしかするとWebサーバのPHPの設定が危険な状態になっているかも知れませんよ。それをチェックできるのがiniscanです。 iniscanはcomposerを使ってインストールします。まずはcomposer.jsonを下記の内容で作成します。 $ cat composer.json { "require": { "psecio/iniscan": "dev-master" } } そしてインストールを実行します。 $ sudo composer install Loading composer repositories with package information Installing depende
Resumable.js - HTML5で実現したリジューム付きファイルアップローダー MOONGIFT
アップロード途中で止まると相当なストレスですよね。そこで使ってみたいライブラリです。 HTML5を使うとファイルをドラッグ&ドロップでアップロードできるようになってとても便利になっています。しかしごく小さなファイルのアップロードであればまだしも、巨大なファイルをアップロードするとなるとまだ大きな問題が残っています。それがネットワークエラーです。 Webではファイルを一括でアップロードしますので、途中でエラーが起きるとまた最初からやり直しになってしまいます。これはクライアント/サーバ双方に負荷がかかる仕組みです。これを改善できるのがResumable.js、リジューム対応のファイルアップローダーです。 サンプルのnodeアプリケーションで実験します。 900MBくらいのファイルをアップロードします。 右側にある一時停止ボタンを押すとアップロードが停止します。 いつでも再開が可能です。 この仕
Gumby - Bootstrapの強力なライバルになるか！？シンプルかつ強力なCSS3フレームワーク MOONGIFT
CSS3フレームワークは数多くなってきたのでその特徴をちゃんと掴んでおかないといけないですね。 GumbyはSassを使ったCSS3フレームワークです。他のフレームワークと同じようにレスポンシブ、モバイルフレンドリーになっています。その特徴を見ていきましょう。 まずデスクトップからです。 ヘッダーバー。フラットだったり、幅が固定だったりと色々な形式が想定されています。 タイポグラフィ。可読性高いです。 リストだけでも黒丸、白丸、ドット、数字など多数用意されています。さらに定義リストまで！ ボタン。サイズ、色、形が様々です。片方だけ丸い、なんて便利そうですね。 インジケーターやラベル、アラート。こういうのもよく使いますよね。 フォーム。基本的にplaceholderを使った表示になっているようです。 テーブル。角丸サポートです。 タブ。幅が設定できます。 縦のタブもあります。 ドロワー。クリ
HTMLコーディングの問題点を浮かび上がらせてくれるブックマーク·DiagnostiCSS MOONGIFT
DiagnostiCSSはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 Webブラウザはよく出来ていて、Web標準に沿っていなくともそれっぽく表示してくれます。しかしそれに安穏としているとレガシーなブラウザなどで表示が失敗したり、意図した動作にならないことがあります。そこでDiagnostiCSSを使ってチェックしてみましょう。 MOONGIFTで実行しました。様々な枠が表示されました。 マウスオーバーで画面上部にメッセージが表示されます。例えばonclick指定の指摘です。 かなりダメなところは赤い枠になっています。 DiagnostiCSSでは問題のあるHTML要素について枠で囲むことで問題を把握しやすくしてくれます。主にインラインスタイルやイベント属性、無効なリンク、空または廃止予定の要素、必要な属性のない要素などがリストアップされます。 HT
等幅なコーディング向けフォント·Anonymous Pro MOONGIFT
Anonymous ProはOpen Font Licenseのオープンソース・ソフトウェアです。 プログラミングやWebデザインを行う際にフォントは厳選して選んだ方が良いです。より可読性、品質の高いフォントを選ぶのが良いでしょう。今回はその一つ、Anonymous Proを紹介します。 Anonymous Proのレギュラー。等幅フォントでそれぞれの文字がはっきりと分かれています。 ボールド。こちらも見やすさは変わりません。 Anonymous Pro Minus。こちらはちょっとフォントの数が少なくなってサイズが軽減しています（標準文字だけなので分からないですが…） Anonymous Proの特徴は等幅フォントであること、レギュラー/ボールド/イタリック/ボールドイタリックがあること、各種キーボードのシンボル（Mac OSXのコマンドキーなど）対応、英語の他ヨーロッパ圏の拡張言語サポ
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/
PHPで簡単に構築できるCalDAV/CardDAVサーバ·Baïkal MOONGIFT
BaïkalはPHP製、GPL v3のオープンソース・ソフトウェアです。 社内での情報共有の基礎になるのがスケジュールやアドレス帳の共有です。外部サービスを使っても良いですが、社内でCalDAV/CardDAVサーバを立ち上げるならば採用したいのがBaïkalです。 インストールを開始します。ウィザードに沿って進めていくのみです。データベースはMySQLの他、SQLiteも選択できます。 ダッシュボードです。まずユーザを追加します。 格好いいUIでツールチップも表示されてとても入力しやすいです。 ユーザに紐づいたカレンダーが自動的に生成されます。 こちらはアドレス帳です。 Webベースの管理画面も備わっていますが、基本的な利用は全てクライアントソフトウェアから行います。iPhoneやMac OSX、Thunderbird、Androidなどの多様なデバイスがCalDAV/CardDAVをサ
クライアントサイドの全文検索エンジン·lunr.js MOONGIFT
lunr.jsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 Webサイトを運営していて、煩雑な仕組みになりがちながらも実装を考えなければならないのが全文検索エンジンです。もし作ろうとしているのがWebアプリケーションであれば、いっそのことクライアントサイドで提供してみるのはいかがでしょう。lunr.jsを使えば手軽に実現できます。 デモアプリケーションです。左上に検索ボックスがあるのが分かるかと思います。 検索はインクリメンタルに行われます。ただし全文と言ってもタグとして指定された文字だけに限定されるようです。 インデックスの作り方です。まずindexとしてフィールドを作り、その後addメソッドを使ってオブジェクトを追加していきます。 lunr.jsではテキスト処理部分を別で設ける事ができますので非英語圏では別途分かち書きを行ってインデックス化でき
HTML/JavaScriptを使ってAndroidモックアップアプリをさくさく作ろう！·Fries MOONGIFT
FriesはHTML/JavaScriptを使ってAndroidモックアップアプリを開発できるソフトウェアです。 Androidの普及はiOSを抜き去り、アプリもどんどん増えています。そんな中にあって必要になるのが素早くAndroidアプリを作る技術です。今回はWebブラウザを使ってモックアプリを作っていけるFriesを紹介します。 デモです。左側にAndroid端末のモックが出ています。 シンプルなタイトルを表示した例。 メニューを追加した例。 メニューアイコンをタップするとメニューが表示されます。 タブ。 ボタン。 リスト。 複数行のリスト。 iScrollにも対応しています。 Friesを使って作法に則って進めるとAndroid 4.0系のUI風モックアップアプリが簡単に作成できます。簡易的に作成できるなら、どんどん試して色々な機能を試すことができます。さらにPhoneGapなどでラ
イメージに合わせてどんどんプロトタイプを作れるフレームワーク·Framer MOONGIFT
Framerはデスクトップ、スマートフォンのWebに対応したプロトタイプを作成するためのフレームワークです。 インターネット上のサービスはより素早く実装が求められるようになっています。そこで必要になるのがプロトタイプライブラリです。今回はWeb/スマートフォン双方に対応したFramerを紹介します。 例。単純にビューを表示しています。中央がコード、右側がその結果です。 アニメーションもできます。 ボックス。スタイル指定を行っています。 イベントももちろん取れます。 こんな表示も短いコードで実現します。 Framerはビューを基本単位として表示設定を行います。どの場所に表示するかを指定し、貼付けていくイメージです。単色の他、画像を入れることもできます。さらに簡単にアニメーションの指定もできたり、CSSのスタイル設定も追加できます。イベントとアニメーションを組み合わせれば、動作が分かりやすく確
他言語対応、FuelPHPを使ったCMS·Novius OS MOONGIFT
Novius OSは多言語コンテンツに対応したCMSです。 CMSというジャンルは新しい言語、新しいフレームワーク、新しい技術が登場すると必ず出てきます。今回紹介するNovius OSもそうです。新しい技術をこれでもかと盛り込んだ素敵なCMSになっています。 管理画面のログインです。 ダッシュボードです。 メディア管理。 記事管理です。一つの記事に対して各国語版を作成できます。 編集画面です。 ユーザ一覧。 アプリケーション設定です。 アカウント設定。 ユーザ向けの画面はこんな感じです。 Novius OSはHTML5を使い、UIにはjQuery UIを、フレームワークにFuelPHPを使っています。管理画面とユーザ画面が分離したちょっと昔風ながらしっかりとした印象のCMSとなっています。 Novius OSはPHP製のオープンソース・ソフトウェアです。 MOONGIFTはこう見る オープ
見た目が格好いい。node.jsをWebベースで開発する·Nide MOONGIFT
Nideはnode.jsプロジェクト用のWebベースIDEです。Mac OSX向けアプリもあります。 ここ最近になってようやくWebベースのIDEが本格化してきました。Nideもその一つで、node.jsプロジェクトの開発に最適化されています。 Mac OSX向けにはバイナリも提供されています（今回はnpmでインストールできるものを使っています）。 npmで一発インストールできます。 最初に設定を行います（node.jsのプロジェクトで実行すれば必要ありません）。 ファイルの一覧が出ました。 ハイライトも行われていて編集も楽々です。 バージョン管理機能、Spaceです。Mac OSXのTime Machineライクで格好いいです。 package.jsonもメンテナンスできます。 フォルダの作成もできます。 NideではWeb上での編集に加えて、バージョンごとの履歴管理（これがアニメーショ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
