ng-admin - 次世代のWeb管理画面
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 最近はサーバサイドではHTMLレンダリングせず、RESTfulなWeb APIを使ってデータを取得、表示するといったWebアプリケーションが増えています。そうした中、運営側の管理画面においても求められるものが変わってきています。 そこで今回は次世代の管理画面、ng-adminを紹介します。AngularJSを使ったWeb管理画面になります。 ng-adminの使い方 Web APIを用意しておくことで、ユーザ向けはもちろんのこと管理画面においてもスムーズな操作ができるようになります。pushStateにも対応していますので、URLはユニークになるようです。 ng-adminはJavascript/HTML5製のオープンソース・ソフトウェア（MIT License）です。 Angul
Responsive - その名の通りレスポンシブなHTML5デザインテンプレート MOONGIFT
デザインフレームワークを使えば見栄えのいいWebサイトがさくさくと作れます。そのまま完成には至らなくとも、プロトタイプであれば十分な品質になるのではないでしょうか。 現在、様々なデザインフレームワークがありますが、今回は名前があれな気がするResponsiveというソフトウェアを紹介します。SEO的にきつそうな気はしつつも気にせずいきましょう。 Responsiveの使い方 今回はスクリーンショット多めでいきます。 タイポグラフィ。 幅によって表示する、しないクラスを指定できます。 グリッド。定番の12分割です。 オフセットもできます。 フォーム。 ラベルの横表示。 ボタン。 グループボタン。 テーブル。 テーブルはもちろんレスポンシブです。 画像表示。高さ固定もいけます。 iframe。動画表示、Googleマップなどもいけます。 VineやInstagramも埋め込みもいけます。 vi
psdiff - GitHub上でPSDファイルの差分表示を可能にするスクリプト MOONGIFT
デザイナーの方は覚えておくと便利そうですよ！ GitHubでは様々なファイルの差分表示が行えます。その一つに画像があります。PNGやJPEGといった画像の差分をWebブラウザ上で行えます。これはデザイナーの方にとってかなり便利な機能ではないでしょうか。 しかしデザイナーであればなんとしても対応して欲しいと思うのがPhotoshopのPSDではないでしょうか。GitHubではPSDをサポートしていませんが、それを可能にするライブラリがpsdiffです。 psdiffのインストール インストールは簡単で、一行のスクリプトで完了します。これは差分チェックを行いたいGitリポジトリ上で行います。 $ bash <(curl -sSL https://raw.github.com/filp/psdiff/master/install.sh) Damn, the 'psd' gem is not in
WOW.js - JavaScript/CSS3でスクロール連動型アニメーション MOONGIFT
最近Webサイトでアニメーションしながら表示される所が増えています。かといってかつてあったFlashのようにスプラッシュ的なものではなく、表示構成要素がさりげなくアニメーションしながら配置されていくといった感じです。 それはCSS3のアニメーションで作られているのですが、スクロールと組み合わせて容易に実現してくれるのがWOW.jsです。 何はともあれ動画を見てもらうのが良いと思います。 犬や猫のアイコンがアニメーションしながら表示されていきます。スクロールの感知はJavaScriptで行っていますが、実際のアニメーションはCSSアニメーションによるものです。 実用的にどうなの、と思ったのですが以下のサイト（利用例）を見るとかなりいけてることが分かります。 さりげないアニメーションで表示されます。 1640 iOS7 Icons for designers & Developers | St
Sitespeed.io - Webサイトパフォーマンスの統合環境 MOONGIFT
Webサイトは高速であればあるほど、ユーザ体験が向上して満足度向上につながります。その逆に遅いWebサイトはすぐにユーザが離れてしまいます。 そうしたWebサイトのパフォーマンスを第三者的に見られる仕組みを提供するのがSitespeed.ioです。詳細なレポーティングが可能で、定期的に測定することでWebサイトの改善につなげられるでしょう。 Mac OSXの場合、インストールはHomebrewでできます。 $ brew tap sitespeedio/sitespeedio $ brew install sitespeedio/sitespeedio/sitespeed.io 終わると sitespeed.ioコマンドが使えるようになります。ヘルプは以下の通りで、細かいオプションがたくさんあります。 $ sitespeed.io -h usage: /usr/local/bin/sites
SpinKit - 凄いテクニック。CSS3を使った各種スピナー MOONGIFT
CSS3だけで作れちゃうのが凄いですね！ 処理中にユーザがストレスを感じないように表示されるスピナー。最も簡単なのはアニメーションGIFを表示することかなと思いますが、背景色を微妙に違ったり、大きさを適切に考えないといけないなど画像だけに扱いがちょっと面倒に感じることがあります。 そこで使ってみたいのがSpinKitです。なんとCSS3のアニメーションを使ってスピナーを実現しています。 一例。四角いパネルが回転します。 円が次々に大きさを変えていくパターン。 棒の長さが変わっていくパターン。 スクリーンショットでは分かりづらいので動画を撮影しました。 例えば棒の長さが変わるウェーブの場合、次のようなスタイルシート設定になります。 .spinner { margin: 100px auto; width: 50px; height: 30px; text-align: center; fon
WebAudioControls – WebAudioと一緒に使えるUIコントロール
HTML5の新しい機能として知られているWebAudioですが、音楽という特性上これまでのWeb UIとは全く異なる使われ方をします。 そんなWebAudioを使いこなすためのUIコンポーネントとしてWebAudioControlsを紹介します。デジタル系の楽器にあったデザインのコントロールを提供してくれます。 WebAudioControlsは回転させられるノブ、縦または横に配置できるスライダー、スイッチ、キーボードなどを提供します。タッチ対応でiOSやAndroidでも利用できます。 クリックやドラッグ、ホイールイベントも取得できます。WebAudioを楽しむ上で便利に使えそうです。 WebAudioControlsはHTML5/JavaScript製、Apache License 2.0のオープンソース・ソフトウェアです。 [Polymer] WebAudio-Keyboard Te
O/Rマッパー当たり前な時代だからこそSQLテクニックを磨こう·SQL Fiddle MOONGIFT
SQL FiddleはColdFusion製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 開発環境をセットアップするというのは意外に面倒で、せっかく学習しようと思ってもその時点で頓挫してしまいます。もしあなたがSQLを学んでみたいと思うならばSQL Fiddleを使ってみましょう。 こちらがメイン画面です。左に構造、右に実行するSQLを書きます。 実行例。結果はテーブルで下に表示されます。 SQLを変えれば実際に結果も変わります。 対応するデータベースは多様です。 SQL FiddleはJSFiddleに代表されるWebプレイグラウンドサービスで、SQLをWebブラウザ上で実行、確認ができます。最初のテーブルのCreate文からはじまり、任意のSQLを実行してその結果をテーブル表示で確認できます。MySQL/PostgreSQL/MS SQL Se
HTML5/JavaScriptによる電子書籍風フリップアニメーション·Turn.js MOONGIFT
Turn.jsはHTML5/JavaScript製のオープンソース・ソフトウェア（BSD License）です。 電子書籍というとePubファイルが有名ですが、HTML5でも実現は可能です。特に紙をめくった時のようなフリップアニメーションが欲しい時にはTurn.jsを使ってみましょう。 デモです。幾つかのサンプル書籍が掲載されています。 開きました。 フリップしています。 別な書籍。マウスをもっていくと端が折れ曲がります。 こんな感じで斬新な表示も。 マガジン風の使い方もできます。 デモ動画です。 Turn.jsではめくる操作はもちろんのこと、拡大表示もサポートされています。デスクトップブラウザはもちろん、iPhone/iPadによる操作も可能です。コンテンツはAjaxによる動的取得にも対応しています。一部HTML5非対応ブラウザでも使えるようになっており、対応ブラウザはIE8からとなって
Vagrantを設定ファイルをWeb上で作成·PuPHPet MOONGIFT
PuPHPetはPHP製、MIT Licenseのオープンソース・ソフトウェアです。 Vagrantが注目を集めています。簡単に仮想サーバを立ち上げられますが、設定ファイルを書けばさらにコマンド一つで環境まで整ってしまいます。そんなVagrantの設定ファイルを設定を行うだけで生成してくれるのがPuPHPetです。 最初にディストリビューションを決めます。 次に最初にインストールするパッケージや設定を決めます。 HTTPサーバです。Apacheまたはnginxから選択します。 PuPHPetなのでPHPメインです。バージョンも5.3/5.4/5.5から選択できます。 PHPのモジュールです。入力補完がついているので簡単に選択できます。 PEARを組み合わせることもできます。 データベースです。MySQLまたはPostgreSQLが使えます。 後は設定ファイルをダウンロードするだけです。Zi
セキュアなRuby on Rails環境を実現するセキュリティチェッカー·Hakiri MOONGIFT
HakiriはRuby製、MIT Licenseのオープンソース・ソフトウェアです。 Webサーバのセキュリティは万全でしょうか。できるだけのことはしつつも、それでもバージョンアップが適切に行われていない場合もあります。特に外部に公開されるWebサーバや、そこから接続されるデータベースサーバについては重点的にチェックが必要です。そこで使ってみたいのがHakiriです。 最初にマニフェストを作成します。必要な箇所を修正します。 後はsystem:scanで自動的にシステムのバージョンチェックが実行されます。ローカルということもあってバージョンアップを放置し過ぎていますね…。 セキュリティ情報をリストアップできます。おとなしくバージョンアップするのが良いです。 HakiriはWebサービスとして公開されているHakiri PlatformのCUIクライアントという位置づけです。主にRuby/R
iOSアプリのデザインをスタイルシートで行う凄い技術·Pixate MOONGIFT
PixateはMac OSX用のソフトウェアです。 iOSアプリのデザインはXcodeを使って行うのが一般的です。しかしWebデザイナーや開発者にとっては思い通りにいかなくてやきもきするときがあるかも知れません。そこで注目したいのがPixateです。何とスタイルシートと同じ記述で画面を作成できます。増資し、フリーになりました。 ボタンのデザイン。確かにスタイルシート調です。 記述を変えればダイナミックに描画が変わるのも特徴です。 SVGの表示も行えます。 さらにタップすると線だけに。 こちらはプレイグラウンド。様々な表示例があります。 ラベル。テキストエリアの部分は変更できます。 こんな感じにダイナミックに文字サイズを変更できます。 地図のポインター部分の大きさを変更。 本当に数多くのデモがあります。 検索ボックス。 セクション付きのテーブルビュー。 様々なテキストビュー。 Pixateは
これは凄い！iOSアプリ内で動作するPHP·iPHP MOONGIFT
iPHPはObjective-C製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 iOS上で動作するプログラミング言語と言えばObjective-CやJavaScriptくらいと思われています（アプリを開発できる言語はもっとありますが）。しかしその壁を打ち破るソフトウェアがiPHPです。名前の通り、PHPの実行エンジンをiOSアプリ内に埋め込んだソフトウェアです。 立ち上げました。さっそくphpinfoを実行します。 見慣れた画面です。PHPのバージョンは5.4.15となっています。 curlも組み込まれています。外部コンテンツを取り込んで…といったこともできるでしょう。 fileinfoやgdもあります。色々な使い方ができそうです。 evalを使って入力したテキストを評価させることができます。 こちらはベンチマークを実行した結果です。 iPHPは思
Bootstrapで物足りなく感じているウィジェットをまとめて提供·Fuel UX MOONGIFT
Fuel UXはBootstrap用、JavaScript/CSS製のオープンソース・ソフトウェア（MIT License）です。 Bootstrapを使ってWebアプリケーションを開発していると、どうしても足りないコンポーネントが出てきます。ネットで探せば見つかるのですが、組み合わせている内にバランスが悪くなってしまいます。そこで使ってみたいのがFuel UXです。 様々なウィジェットが提供されています。まずチェックボックス。 コンボボックス。選択した情報が取得しやすいです。 データグリッド。検索でのフィルタリング、ページネーションもサポート。 検索すると右側に×ボタンが出ます。分かりやすいですね。 タグ。×ボタンも出ていて消すのも簡単です。 検索ボックス。 スピナー。上下のボタンを使って値をインクリメントできます。 ツリー。エクスプローラライクな表示が実現できます。 ウィザード。パン屑
Yahoo製、軽量なレスポンシブWebデザインフレームワーク·Pure MOONGIFT
Pureはスタイルシート製、BSD Licenseのオープンソース・ソフトウェアです。 Webサービスのデザインテンプレートとして一躍有名になっているBootstrap。そのライバルとも言える存在、Pureが登場しました。開発元はあの米Yahooです。 様々なテンプレートが登録されています。こちらはフォーム。 ボタン。フラット系の色合いです。 メニュー。ドロップダウン付きのメニューもサポートされています。 もちろんページネーションも用意されています。 サンプルデザイン。メール風。 Pureは短縮化およびGzip圧縮して5.7KBと小さいサイズなのが特徴です。もちろんレスポンシブWebデザインをサポートしています。ガチガチなデザインテンプレートではなく、必要な場所だけをピックアップしたり、自分なりのカスタマイズが行えるのが特徴に上がっています。 MOONGIFTはこう見る Boostrapは
Xcodeを使った開発をより便利にしてくれるパッケージ管理·Alcatraz MOONGIFT
AlcatrazはXcode向けのプラグイン、テーマ、テンプレートを配布するパッケージ管理ソフトウェアです。 iOS/Mac OSXアプリの開発IDEとして有名なXcode。その周辺にはXcodeをより便利にしてくれるソフトウェアが多数存在します。Alcatrazはそんなパッケージを管理するためのソフトウェアです。 インストールはターミナルでコマンドを実行するのみです。 立ち上げました。色設定系のパッケージがたくさんあります。 All Packagesを選べば、プラグイン系のパッケージが数多く並びます。 チェックボックスをクリックするとインストールが開始されます。 Xcodeのプラグインやテーマを探して個別にインストールするのは大変ですが、Alcatrazを使えばXcodeの中でインストールができるようになります。iOS/Mac OSXアプリの開発をより便利にしたい方は要チェックです。 A
意外と便利？PHP製のHTML用問い合わせ言語·htmlSQL MOONGIFT
htmlSQLはHTML構造にSQLを使って検索できるようにするライブラリです。 HTMLを操作する際にはDOMを使ったり、正規表現を使うのが一般的です。しかしもう一つのやり方を提案するのがhtmlSQLです。何とSQL（問い合わせ言語）を使ってHTMLソースを探索できます。 コード例。PHPで操作します。 こんな感じで取得できます（301になってしまっていますが…）。 こちらもコード例。SQLっぽい記述が面白いです。 クラスやIDなどで絞り込んだり、特定のタグだけを抽出することも簡単にできます。そして指定した要素だけ抽出して処理が可能です。今後、LIMITなどにも対応していくとのことです。 htmlSQLはPHP製、New BSD Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る SQLはサーバサイドで使われるプログラミング言語と構造体系が大きく異なるために
JavaScriptで国際化処理をするのに便利·Pomo MOONGIFT
PomoはJavaScript製のgettextです。po/moファイルの読み込みに対応しています。 プログラミングの出力するメッセージを国際化する際によく使われているのがgettextです。類似の仕組みを提供するJavaScriptライブラリは幾つかありますが、poファイルをそのまま読み込めるのがPomoです。 ソースコードです。poファイルをダイレクトに読み込んだり、コード上でテキスト変換情報を与えることもできます。 確かにpoファイルを読み込んでいるのが分かります。 対応しているフォーマットがpoまたはmoになります。普段使っている翻訳エディタが使えて、そのファイルをそのまま読み込めるのでサーバとクライアントで作業が分断せずに済むのではないでしょうか。 PomoはJavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 MOONGI
要注目！PHP製のWeb IDE·ICEcoder MOONGIFT
ICEcoderはPHP製のWeb IDEです。JavaScriptやHTML、Rubyのコードに対応しています。 Webブラウザを使った開発環境もそろそろ本格化しそうな雰囲気です。今回紹介するのはICEcoder、PHP製のWeb IDEです。 最初にパスワードを登録します。 トップページです。 コード表示です。ハイライト処理されています。 コンソール機能があります。ターミナルとして使えます。 catなどのコマンドを打てばそのまま出力が返ってきます。 DOMを選択するとその中のタグ全体が選択状態になります。 MySQL管理も付属しています。 主な機能はタグの構造チェック、テーマによるカラーリング、検索/置換、コマンドを使ったタグの高速入力、JavaScriptのヒントおよび構文チェックとなっています。対応している言語はHTML/CSS/JavaScript/Less/CoffeeScri
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Homebrewを見やすいインタフェースで管理·Homebrew GUI MOONGIFT