UI Tiles·Webサイト全体の画面遷移設計に使えるデザイン集 MOONGIFT
Webサイトを開発する際に使われるのが画面遷移を表現するフローチャートです。例えばコマースであればトップページから商品一覧、カテゴリ一覧や商品のピックアップなどの遷移が考えられます。 深くなってしまう場所がないか確認したり、ユーザ動線が正しく描けているかどうか確認するのに便利です。UI Tilesはそんなフローチャートを作成するのに便利なデザイン集です。 UI Tilesの使い方 UI TilesはPNGの他、PhotoshopやIllustrator形式でファイルが配布されています。 PNG版。画面のモックがたくさんあります。 それぞれ小さいながらも特徴があります。 動画プレーヤ、ポートフォリオページもあります。 PSDはデモも用意されています。 デザイン一覧。 Illustratorも同様です。 UI Tilesを使うと、これまでは単なる四角い枠に対してトップページなどとラベルを貼って
Alasql.js - オンメモリで動作するJavaScriptデータベース MOONGIFT
JavaScriptを活用したWebアプリケーションを開発している際に、一時的に保存したいデータをどのように扱うかは大きな問題です。何となく変数や配列、ハッシュに保存してしまいがちですが、そのデータの取り出しや更新が面倒だったりします。 そこで使ってみたいのがAlasql.jsです。JavaScriptだけで作られたクライアントサイド向けのSQLデータベースになります。 Alasql.jsの使い方 使い方の例。データを配列で放り込んで、SQLで取り出せます。 デーブルの作成を含めてSQLが書けます。 データはlocalStrageに保存することもできるので、再読込時に復元も可能です。 Alasql.jsはHTML5仕様の中で検討されていたWeb SQLとは異なる実装で、オンメモリで動きます。高速で動作し、かつデータはlocalStrageに保存しておくこともできるので容量は小さいながらも永
意外と便利？PHP製のHTML用問い合わせ言語·htmlSQL MOONGIFT
htmlSQLはHTML構造にSQLを使って検索できるようにするライブラリです。 HTMLを操作する際にはDOMを使ったり、正規表現を使うのが一般的です。しかしもう一つのやり方を提案するのがhtmlSQLです。何とSQL（問い合わせ言語）を使ってHTMLソースを探索できます。 コード例。PHPで操作します。 こんな感じで取得できます（301になってしまっていますが…）。 こちらもコード例。SQLっぽい記述が面白いです。 クラスやIDなどで絞り込んだり、特定のタグだけを抽出することも簡単にできます。そして指定した要素だけ抽出して処理が可能です。今後、LIMITなどにも対応していくとのことです。 htmlSQLはPHP製、New BSD Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る SQLはサーバサイドで使われるプログラミング言語と構造体系が大きく異なるために
素敵なカンファレンスページを提供したいなら·Conference MOONGIFT
Conferenceはカンファレンスサイトです。ノート機能やオフラインでも使える機能があります。 日本でも随所で行われているカンファレンスですが、その紹介サイトにConferenceを使ってみるのはいかがでしょう。すっきりとしたUIで使い勝手が良いです。 トップページです。日ごとのスケジュールが一目で分かります。 スピーカーの一覧。 ノートを残しておけます。 ユーザ登録もできます。 オフライン対応です！ Conferenceはカンファレンスの紹介ページであり、利用者はノートを残しておいたり、ブックマークしておくこともできます。GOOD/BADをつけることもできるので、面白そうなセッションを見つけたりするのにも役立つでしょう。 Conferenceはnode.js製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 MOONGIFTはこう見る よくあるカン
BootstrapのUIをWindows8のModern UI Style風に·BootMetro MOONGIFT
BootMetroはBootstrapをベースにWindows8のModern UI Style風にしたソフトウェアです。 ついにWindows8が発売になりました。機能的なことはもちろん、注目を集めているのはModern UI Style（旧Metro UI）でしょう。そんなUIをWeb上でBoostrapをベースに作られたのがBootMetroです。 デモサイトです。確かにWindows8 UI風です。 設定は右側に表示される仕組みです。 テーマを変更できます。 メニューは左側。 グリッド表示。 正方形のタイル表示。 テーブル。 Bootstrapの各種JavaScriptライブラリにも対応しています。 タブ表示。 追加機能は下に表示されます。 アイコンは多数用意されています。 BootMetroはBootstrapの機能性、汎用性の高さとModern UI Styleのシンプルな表示
プロジェクト管理に使ってみたい。jQuery製のガントチャートライブラリ·jQuery.ganttView MOONGIFT
jQuery.ganttViewはjQuery製のガントチャート表示ライブラリです。 jQueryを使ってガントチャートを表示するライブラリがjQuery.ganttViewです。表示だけでなくデータのメンテナンスもできるようになっています。 いい感じにガントチャートが表示されています。 ドラッグでタスクを左右に移動させられます。 期間の変更は枠の端をドラッグします。 データはJSONで与えるだけです。 jQuery.ganttViewは表示系のライブラリなのでデータベースに蓄積された内容をガントチャートにして表示すると言った使い方が便利そうです。なお表示はタスクごとに横に表示される形で、複数のタスクを同一線上に表示することはできないようです。 jQuery.ganttViewはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 MOONGI
エンジニアの勉強会に向けたつながり交流会（第一回） MOONGIFT
概要 エンジニアが各々持ち寄りのテーマで勉強会ができるような ネットワークを作りたいと思っています。 勉強会の場所は当社で無料で貸し出しいたします。 まずは、興味のある方同士で、交流会の場を持ってはどうかと思い、 懇親の場を企画しました。 情報交換も兼ね、勉強会に興味のある方の参加を募ります。 当日の流れ ・自己紹介タイム ・勉強会企画アイデア発表 ※なんと、飲み物／フード／アルコールが無料！ ※主催者からの連絡メールを受信するために、メール登録をお願いします ■対象者 ・勉強会がしたいけど、場所がなくて困っているエンジニアの方 ・勉強会に参加してみたいけど、敷居が高くて踏み切れない方 ・勉強会を主催していて、新しいメンバーを募りたい方 ※上記に当てはまる場合でも、営業や採用目的の方は参加できません。 ※本交流会は、当社の転職斡旋のための登録目的ではありません。 あくまでも、エンジニアに強
凄いん…だよな？デザインの自由度を最大化したCMS·Berta MOONGIFT
Bertaはデザインの自由度が高いCMSです。データベースを使わないCMSになっています。 なんか凄いソフトウェア…。BertaはCMSですが、自由度が非常に高く、コンテンツの配置が自由にできてしまいます。その自由度の高さも相まって、デザインや写真家の方が数多く使っているようです。 まずログインします。 サイトをセットアップします。 セクションを作ります。これがメニューになります。チュートリアルのヘルプ付きで分かりやすいです。 セクションを作ったら、その内容を編集します。 これがページです。ほぼ何もありません。ここから自由にコンテンツを配置していきます。 配置する場所はX/Y軸ともに自由です。 ファイルを貼付けたりテキストを入れたりできます。 例えばこんな画像を。場所は自由に設定できます。 実際にBertaを使ったWebサイトです。ポートフォリオ的なサイトでしょうか。 こういった写真系のサ
Metro UIをiOS/Androidに移植·TiMetro MOONGIFT
TiMetroはWindows PhoneのMetro UIをTitaniumで再現したモックアップアプリになります。 Windows Phoneが渾身の力をこめて投入してきたUIがMetroです。確かにすっきりとした格好いいインタフェースになっています。そんなMetro UIをTitaniumを使って再現したのがTiMetroになります。 最初にパネルが並んで表示されます。 パネルを選択するとアイテムが一覧されます。アニメーションが格好いいです。 デモ動画です。流れるようなアニメーションが格好いいです。 パネルやメニューをタップして情報を一覧表示するので、ダッシュボード的アプリで使っても面白いかも知れません。情報量が多いアプリにはぴったりです。 TiMetroはJavaScript/Titanium製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）になりま
アジャイル開発におけるKPTをまとめるのに役立つ·KPT it MOONGIFT
KPT itはアジャイル開発などにおけるKPTをまとめるためのソフトウェアです。 KPTとはKeep（継続）、Problem（課題）、Try（挑戦）の頭文字を取ったもので、アジャイル開発や反復型開発においてイテレーション単位の振り返りに用いられるフォーマットになります。そんなKPTをする際に役立つのがKPT itです。 最初の画面です。 Keepを登録してみました。登録はタブをクリックして、テキストエリアに入力するだけです。 思いついたことをどんどん入力できます。 KPT itをイテレーションミーティングの際に使えば、各メンバーの意見を吸い上げていけそうです。KPT itはフレームワークにPadrinoを使ったRackアプリケーションになります。 KPT itはRuby製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）になります。 MOONGIFTはこう見る
JavaScriptに便利なメソッドを盛り込んだライブラリ·mofmof.js MOONGIFT
mofmof.jsはJavaScriptを積極的に拡張したライブラリで、Number/Array/Stringに便利なメソッドを追加しています。 JavaScriptは今やWebだけでなく、様々な環境で使われるようになっています。そこで基礎になりえるライブラリとして紹介したいのがmofmof.jsです。かゆい所に手が届く、便利なメソッドがたくさん追加されています。 コード例です。コピーメソッド。 日付周りの拡張も多いです。 Hashを取り扱うメソッドも多数用意されています。 二つのHashをミックスします。 Hashからキーと値を取り出します。 Hashのキーだけを抽出します。 mapメソッドです。 実行するたびにインクリメントされるユニークな値を返します。1秒間に100万回実行したとしても285年間ユニークであり続けます。 一気に配列を生成します。 文字列を置換しつつ生成します。 検索メ
許可する機能、データは自分で選ぶ。Facebookアプリの権限設定機能拡張·fPrivacy MOONGIFT
fPrivacyはFacebookアプリをインストールする前に許可する権限を変更できるGoogle Chrome/Safari機能拡張です。 Facebookアプリを使う場合、現在は相手の要求するデータに対してイエス、またはノー（つまりインストールしない）でしか対応できません。後から変更はできますが、それは一度はリダイレクトを行った後になります。そこで事前に許可する権限を変更できるのがfPrivacyです。 インストール画面。Google ChromeまたはSafariに対応しています。 インストール確認です。 任意のFacebookアプリをインストールする際に、上にツールバーが追加されます。 許可しない権限に対してチェックを外してアップデートを押します。 通常、Facebookアプリをインストールした後で設定画面で権限を変更できます。それを予め変更できるのが便利です。 fPrivacyは
デスクトップで音楽を聴くならこれで十分。軽量高速な音楽プレーヤ·Enqueue MOONGIFT
Enqueueは軽量でUIの整ったデスクトップ向け音楽プレーヤです。 iTunesの鈍い動作に辟易していた方に朗報です。軽量で使える音楽プレーヤEnqueueがいい感じですよ。 最初に起動した画面です。フォルダから追加するか、iTunesからのインポートができます。 iTunesからの取り込み中です。音楽量によりますが、筆者は結構時間がかかりました。 その間に設定画面でも。フォルダも監視ができます。 ショートカットキーに対応しています。変更も可能です。 取り込みが終わりました。ジャンル、アーティスト、アルバムの順番でドリルダウンできます。 再生時のGrowlにも対応しています。 楽曲情報も表示できます。 プレイリストへの登録もできます。 EnqueueはかつてのiTunesを彷彿とさせるようなUIながら、手元の音楽を聴くという行為に特化しています。iPodと同期したりすることはできませんが
手軽に使える！解凍するだけでnginx+PHPの開発環境を準備·wnp MOONGIFT
wnpはnginx + PHPの環境を解凍するだけで使えるWindows用開発環境です。 最近のWebシステムではApacheではなくnginxを採用するケースも増えています。もし本番環境がnginx + PHPであったら開発環境としてセットアップしたいのがwnpです。 解凍直後のファイル構成です。wnp.exeを実行します。 タスクトレイに常駐します。PHP、nginxを別々にリスタートできます。 localhostへアクセスした時の表示です。 PHPの情報です。色々な拡張が入った状態です。FastCGIで、バージョンは5.2.12となっています。 Webルートのファイル構成です。ここにPHPファイルを作成すれば動作します。 MOONGIFTはこう見る 数年前であればLinux + Apache + PHP + MySQLという組み合わせはLAMPスタックと呼ばれ、Webアプリケーション
Webデザイナーにオススメ！SCSS/Sassで記述してリアルタイムに変換、デザインを確認·Compass MOONGIFT
独自の記法でCSSを記述するフレームワークがいくつか出てきました。しかし実際に利用する際にはCSSに変換する必要があります。記述して変換、では手間に感じて利用したくないでしょう。そこでCompassを使って自動変換してくれる環境を構築しましょう。 実行しているところです。メニューバーに常駐します。 設定です。SCSSまたはSassに対応し、自動で短縮化もしてくれます。 通知機能があります。Mac OSXの場合はGrowlで通知してくれます。 Webサーバ機能とlivereload機能があります。保存したタイミングで任意のポートをたたいて再読み込みさせます。 プロジェクトを追加したときの通知です。 Rubyファイルを含めてまとめてファイルを生成してくれます。 ファイルの配置はこんな感じです。デザインを組む前の準備が簡単になります。 ファイルを修正すれば自動で再コンパイルしてくれます。 いくつ
アイディア次第で使い道色々。フリック入力対応のギャラリーライブラリ·flickGal MOONGIFT
flickGalはiOSのフリック操作に対応したギャラリーライブラリです。デスクトップ向けWebブラウザでも表示できます。 Webサイトにフリック操作で画像を切り替えられるギャラリー機能を追加したいと思ったらflickGalを使ってみましょう。jQueryプラグインで手軽に導入できます。 フリック操作なので主にiOS向けです。でもSafariやGoogle ChromeなどのデスクトップWebブラウザも問題なく利用できます。 写真の切り替えはタブをクリックする他、フリック操作でも大丈夫です。 フリック操作でアニメーションしながら写真が切り替わります。 大きな画像を表示している場合です。prev/nextのリンクでも写真を切り替えられるようになっています。 Yahoo! Japanのトップページにあるのに似た表示形式です。写真だけではなくアイコンを並べて機能を選択するといった使い方も考えられ
UDIDが使えなくなる今、それに代わるユニークID取得ライブラリ·OpenUDID MOONGIFT
OpenUDIDはUDIDに変わるユニークなIDを取得しようとするiOS向けライブラリ。 OpenUDIDはiOS向けのオープンソース・ソフトウェア。iOS5から開発規約が変わり、UDID（端末識別ID）へのアクセスが禁止されることになった。元々UDIDの利用については勧められなかったが、明確に禁止されることになった。これによって様々なアプリ、サービスが影響を受けると思われる。 肝の部分 広告系のシステムはもちろん、コンテンツのダウンロードにUDIDを使っていたアプリも多いのではないだろうか。UDIDの代わりを目指すソフトウェアとしてOpenUDIDを紹介しよう。 OpenUDIDはUDIDに変わるユニークなIDを提供することを目指している。使っているのはgloballyUniqueStringだ。これをMD5でハッシュにしたものをベースに固有のIDを作っている。globallyUniqu
ストーリーベースのアジャイル開発に。Railsのプロジェクト管理·Fulcrum MOONGIFT
Fulcrumはストーリーベースのアジャイル開発にマッチしたプロジェクト管理システム。 FulcrumはRuby on Rails製のオープンソース・ソフトウェア。アジャイル開発において用いられるユーザストーリー。利点としては機能をユーザ視点で捉えることで、実装されるべき機能が明確になりイテレーションが終わった段階できちんとできているか確認がしやすいことだ。 4つの枠が特徴 そのため通常のタスク管理に比べると大ざっぱに見えてしまい、逆に細かな進捗が見づらくなってしまう場合もあるようだ。そんな状態を解決するには、最適なプロジェクト管理を導入することにあるだろう。今回紹介するのはFulcrumだ。 Fulcrumはストーリーベースのタスク管理を実現する、アジャイル開発向けのプロジェクト管理だ。完了したストーリー、作業上、バックログ、Chilly Bin（終わらなかったタスクを放り込んでおく場所
Google+からFacebookやTwitterにクロスポスト！·Start Google Plus MOONGIFT
Start Google PlusはGoogle+/Facebook/TwitterにクロスポストできるGoogle Chrome/Firefox/Safari用機能拡張。 Start Google PlusはGoogle Chrome/Firefox/Safari用のフリーウェア。Google+は既に2,500万人を越え、どんどん増え続けている。トラフィックが下がっているというレポートもあるが、そんなことは物ともせずに突き進んでいる。 投稿画面 しかし最大の問題点として未だにWeb APIが提供されていないことがある。そのため他のソーシャルサービスにクロスポストもできない。だが、それを技術の力で乗り越えてしまうのがStart Google Plusだ。 Start Google PlusはGoogle ChromeやFirefox、Safariに対応した機能拡張を提供している。これをイン
ついにきた！Mac OSXで動画再生対応のAirPlayを実現·Airmac MOONGIFT
AirmacはiOSのAirPlayでMac OSX側での動画再生にも対応するソフトウェア。 AirmacはMac OSX用のオープンソース・ソフトウェア。iOSやAppleTVに搭載されているAirPlay機能。iOSで流している音楽や映像をAppleTVで閲覧できるとても便利な機能だ。これはAppleTV独自の機能だったが、秘密鍵が漏洩して以来、様々なソフトウェアが実装してきた。 動画再生中 しかし二つ目の問題として、AirPlayで音楽は再生できても、映像が出てこないというのがあった。これではあまりに半端だ。そんな状況を乗り越えるのがAirmacだ。 AirmacはMac OSXのメニューバーに常駐するソフトウェアだ。立ち上げておくとiOSから見た時にAirPlay先として母艦が表示されるようになる。iPodで音楽を聴いている時にスピーカーとして指定すれば母艦で音楽が聴けるようになる
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
