iOSアプリのデザインをスタイルシートで行う凄い技術·Pixate MOONGIFT
PixateはMac OSX用のソフトウェアです。 iOSアプリのデザインはXcodeを使って行うのが一般的です。しかしWebデザイナーや開発者にとっては思い通りにいかなくてやきもきするときがあるかも知れません。そこで注目したいのがPixateです。何とスタイルシートと同じ記述で画面を作成できます。増資し、フリーになりました。 ボタンのデザイン。確かにスタイルシート調です。 記述を変えればダイナミックに描画が変わるのも特徴です。 SVGの表示も行えます。 さらにタップすると線だけに。 こちらはプレイグラウンド。様々な表示例があります。 ラベル。テキストエリアの部分は変更できます。 こんな感じにダイナミックに文字サイズを変更できます。 地図のポインター部分の大きさを変更。 本当に数多くのデモがあります。 検索ボックス。 セクション付きのテーブルビュー。 様々なテキストビュー。 Pixateは
iOSの開発効率化に。高機能デバッガー·SuperDB MOONGIFT
SuperDBはiOS/Mac OSX用のオープンソース・ソフトウェア（BSD License）です。 iOSのデバッグや、ちょっとした調整をしてはコンパイルし直して確認する…といった開発で苦労した覚えはないでしょうか。そこで今回はiOSアプリのインタラクティブなデバッガーSuperDBを紹介します。 Mac OSXアプリをコンパイルすると、iOSシミュレータで立ち上がっているアプリ名が表示されます。ダブルクリックして接続します。 そうするとコンソールが開くので、例えばselfと打ちます。 こちらはiOSアプリの画面です。 角に丸みをつけました。これはコンソールから実行するのみで、iOSアプリは立ち上げたままになっています。 この44という部分が丸み指定場所で、マウスでドラッグして数値を変更できるのがユニークです。 SuperDBはiOSアプリの操作をF-Scriptのようなシンタックスで
Seleniumを使ったiPhoneアプリの自動操作テストツール·Appium MOONGIFT
AppiumはiOSのテストを自動化するSeleniumを使ったテストツールです。 iOSのテストはユニットテストが基本と思われます。実際の操作については人が細かくテストを行っているのではないでしょうか。その面倒なUIテストを自動化してくれるのがAppiumです。 実行中です。 文字の入力などは自動で行ってくれます。 テストコード。 AppiumはテストコードをJava/Ruby/PHP/node.js/Pythonで書くことができます。さらにSeleniumを使って開発されているのも特徴です。テストは分離しているため、既存のアプリに何らかのSDKを組み込んだりする必要はありません。近く、Androidもサポートされるそうです。 AppiumはMac OSX用のオープンソース・ソフトウェア（Apache License 2.0）です。 MOONGIFTはこう見る iPhoneを自動操作して
Google Chromeを使ったWebシステム開発がもっと簡単になる·Tincr MOONGIFT
TincrはGoogle Chromeデベロッパーツール上の修正をローカルファイルに反映できるソフトウェアです。 Webシステムを開発している際にGoogle Chromeのデベロッパーツールはおおいに役立ちます。Web上での修正をそのままローカルに反映できるTincrを使うとさらに便利になるでしょう。 インストールします。Google Chrome機能拡張として提供されています。 開発中のサイトで使います。 静的なWebサイトの他、Google Chrome機能拡張やRailsのassetsにも対応しています。 デモ動画です。 Tincrはローカルファイルの修正の他、ローカルファイルを修正した際の自動リロードにも対応しています。ログをコンソールに出力することもできるので、動かない場合の原因調査も容易になりそうです。 TincrはGoogle Chrome用のオープンソース・ソフトウェア（
ついつい削ってしまうスクラッチ風UI·STScratchView MOONGIFT
STScratchViewはスクラッチ風UIを実現するiOSライブラリです。 スピードくじで代表されるスクラッチ。世代を超えて未だに人気があるシステムではないでしょうか。そんなスクラッチ風の機能をiOSで実現するのがSTScratchViewです。 最初の表示です。このビリヤードのボールがスクラッチになっています。早速チャレンジ！ ごしごしごし… 78ドルゲットだぜー！ STScratchViewで用意するのはスクラッチ前の画像とスクラッチできる部分の画像になります。その下に書かれるべき内容は独自に決められます。当たり、はずれや1等、2等など様々な表示が使えそうです。 STScratchViewはiOS用、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る 個人的には宝くじの類は一切買わないのですが、時々買い物してきた時についてくるスクラッチカードはつい
アプリ開発者必見。リアルタイムアプリ利用解析·Countly MOONGIFT
Countlyはモバイルアプリの利用解析ソフトウェアです。 Webサイトにはアクセス解析ソフトウェアを導入するのが当たり前になっています。同様にモバイルアプリについてもその利用について解析が必要な段階にきているのではないでしょうか。今回紹介するCountlyはまさにそのためのソフトウェア、モバイルアプリ解析サービスになります。 ログイン画面です。 ダッシュボードです。 個々のウィジェットにマウスオーバーなどが仕掛けてあってインタラクティブなっています。 グラフをドラッグして範囲指定すれば表示範囲が絞り込めます。 イベント関係のログです。 ユーザごとのログです。 ユーザロイヤリティです。 キャリア分析です。 アプリのマネジメント画面です。 Countlyはリアルタイム解析、MongoDBを使った高速さ、スタイリッシュな画面、高い拡張性、イベント駆動対応、セッションやキャリアなど様々な情報との
200を越えるアイコンが揃ったBootstrap向けWeb Font·Font Awesome MOONGIFT
Font AwesomeはBootstrapと組み合わせて使えるアイコンを集めたWeb Fontです。 Twitter Bootstrapの便利な機能の一つにアイコンパックがあります。ちょっとした装飾を手軽に付け加えられるのは便利です。そんなBootstrapに200以上のアイコンを追加するのがFont Awesomeです。Web Fontで作られたアイコンパックです。 全てのアイコンです。 ソーシャルアイコンも揃っています。 例です。ドロップダウンやボタンにつけています。 大きさが自由に変更できるのもフォントならではです。 ドロップダウンにつけると機能がより分かりやすくなります。 カスタマイズすればレーティングに使ったりもできます。 ファイル構成です。SVGやフォントが提供されます。 Font AwesomeはTwitter Bootstrapで提供されているものに加えて色々な場面で役立
iOSアプリでツリーマップを表示·TreemapKit MOONGIFT
TreemapKitはiOSにおいてツリーマップ表示を行うライブラリです。 データをビジュアル化する手法は幾つかありますが、その一つにツリーマップがあります。HDD内容を表示するといった際にも良く使われています。そんなツリーマップ表示をiOS上で実現するのがTreemapKitです。 デモアプリです。色分けされたツリーマップが表示されます。 タップするとその場所のサイズが大きくなります。それによって他のブロックが影響を受けて配置が変わります。 どんどん大きくしていくこともできます。 デモ動画です。タップするたびにブロックが移動しているのが分かります。 ツリービュー表示は利用できるケースを選びますが、ぴたりと当てはまるケースもあるでしょう。覚えておくと使える場面がありそうです。 TreemapKitはObjective-C製、iOS向けのオープンソース・ソフトウェア（MIT License）
OpenUDIDをセキュアに·SecureUDID MOONGIFT
SecureUDIDはUDIDに代わるデバイス/アプリごとに生成されるIDです。 AppleがついにUDIDを使ったアプリをリジェクトするようになったそうです。これに伴ってUDIDに代わる技術が求められていますが、その一つとしてSecureUDIDを紹介します。 コードです。 使い方です。 SecureUDIDではドメインとsaltを使う点が特徴になります。そのため、ドメインとsaltが共通でなければ万一SecureUDIDが漏洩したとしても別な所から得たSecureUDIDと結びつけられなくなっています。OpenUDIDもありますが、漏洩時の対策を取りセキュアにしたものがSecureUDIDになります。 SecureUDIDはObjective-C製、iOS向けのオープンソース・ソフトウェア（MIT License）になります。 MOONGIFTはこう見る UDIDが問題になったのは個人
すげえ！WebブラウザからTitaniumアプリを開発、試せる·TiShadow MOONGIFT
TiShadowはWebブラウザからインタラクティブにTitaniumアプリケーションを開発できるソフトウェアです。 JavaScriptでiOS/Androidアプリを開発できるTitanium。そんなTitaniumを使ってインタラクティブにWebブラウザからアプリを開発できてしまうのがTiShadowです。 こちらはデスクトップのWebブラウザです。 次にアプリからサーバに接続します。これで準備完了です。 最初の表示です。何もありません。 こんな感じのコードを実行します。 アラートが出ました。 次に複雑なUIを実行します。 おお、ちゃんと描画されました。 デモ動画です。 TiShadowはrequireなどは使えないのでシンプルなアプリに限定されると思いますが、サーバに接続しているデバイス全てにデータが送信できるので複数をデバイスをまとめて試すと言ったこともできます。 TiShado
Clear風のUI、操作を実現するスマートフォン向けWebアプリケーション·HTML5 Clear MOONGIFT
HTML5 ClearはiOSのTodoアプリClearに似た操作をHTML5で実現しています。 これまでにないほど先進的なUIをもったTodoアプリがClearです。こちらはiOSアプリですが、同様の操作をHTML5で実現しているのがHTML5 Clearになります。 トップ画面です。タスクリストが並んでいます。 次にタスクが並んでいます。操作がそのままタスク名になっています。 タップでエディットです。 ドラッグダウンで新しいタスクを追加できます。 タスクを右にスワイプすると完了になります。 HTML5 ClearはClearの全ての動きを再現している訳ではありませんが、何となくそれっぽい動きが実現できています。HTML5でここまでできるのか、という点からも興味深いソフトウェアです。なおデータは保存されていないのでご注意ください。 HTML5 ClearはHTML5/JavaScript
iOSアプリをMac OSX上で動作させるフレームワーク·UMEKit MOONGIFT
UMEKitはiOSアプリ風UIをMac OSX上で動作させるフレームワークです。 ちょっと古いですが一応動いたのでご紹介。Mac OSXアプリとしてiOSアプリ風のデザインで開発できるようにするフレームワークがUMEKitです。 デモアプリです。本当にiOS風です。 タブを切り替えたりできます。 ボタンを押してビューを切り替えます。 画面の大きさを変更できます。 Xcodeでデザインを見た場合です。 アプリにするとずれていましたがデザインでは問題ないようです。 UMEKit APIはほぼiOSのUIKitに則ったものになっています。iOSアプリをMac App Storeでも販売したいという時に使えるかも知れません。 UMEKitはMac OSX用、Apache License2.0のオープンソース・ソフトウェアです。 MOONGIFTはこう見る Mac OSXとiOSは徐々に融合し始め
WebSocketを使えばリアルタイムメッセージの夢が広がる·WebSocket client for Titanium Mobile MOONGIFT
WebSocket client for Titanium MobileはTitanium MobileでWebViewを使わずにWebSocketを直接扱えるようにするライブラリです。 Webブラウザでリアルタイムにメッセージを交換したいならば使ってみたいのがWebSocketです。そんなWebSocketを使う場合、Webブラウザ（またはコンポーネント）を使いますが、直接扱ってしまおうというのがWebSocket client for Titanium Mobileです。Titanium開発者は必見です。 まずサーバを立ち上げます。サンプルサーバが付属していますのでそれを使います。 ついでサンプルのiPhoneクライアントを立ち上げます。 コネクトを実行するとサーバ側で接続が確認できます。 メッセージを飛ばせば表示されます。 iPhone側ではこんな感じに表示されます。 切断しました。
タップして表示される華麗なメニューモックアップ·QuadCurveMenu MOONGIFT
QuadCurveMenuはPath 2.0というiOSアプリのメニュー表示機能を模したモックアップアプリです。 デザインやコンポーネントの工夫で人気に雲泥の差が出るのがiOSアプリです。そして人気のあるアプリはそのコンポーネントが真似されます。QuadCurveMenuもその一つです。 起動した直後の画面です。 赤いマークをタップするとメニューがスムーズに表示されます。 もう一度赤いマークをタップするとメニューが回転しながら収納されます。メニュー項目をタップすると選択されたマークが回転します。 デモ動画です。 QuadCurveMenuはPath 2.0というiOSアプリに搭載されているメニュー表示機能を模したアプリになっています。QuadCurveMenu単体で意味をなす訳ではありませんが、機能的にはとても面白いです。 QuadCurveMenuはiOS向けのソフトウェア（ソースコード
たった一行のJavaScriptでガラケー向けWebサイトをスマートフォンに最適化·sparrow.js MOONGIFT
sparrow.jsは既存のガラケー向けWebサイトをスマートフォン向けサイトに変換してくれるJavaScriptです。 sparrow.jsを使うと既存のガラケー向けWebサイトをスマートフォン向けサイトに変身させてくれます。それもたった一行のJavaScriptタグを追加するのみです。 ガラケー向けサイトをiPhoneで表示したところです。いわゆる普通の携帯電話向けサイトとしての表示です。テンプレートは「携帯専用無料テンプレート配布中 ： フリースタイル 携帯無料レンタルサーバー」よりお借りしました。 sparrow.jsを適用した表示です。デフォルトではフォントサイズや画像の表示が最適化されるのみとなっています。 sparrow.jsではその他、Viewportの自動挿入、スマートフォン向けのCSS定義、半角仮名を全角に変換、ページ内リンクをアニメーションに、絵文字を絵文字画像に変換
iOSアプリ開発者に。iOSシミュレータのスクリーンショットを自在に·iOS Screen Shot Helper MOONGIFT
iOS Screen Shot HelperはiOSシミュレータの一部をカットしたスクリーンショットを撮影するSIMBLプラグインです。 iOS Screen Shot Helperを使うとiOSシミュレータのスクリーンショット撮影がかなり楽になります。ぜひ開発者の方はお使いを！ インストールが完了した後、iOSシミュレータを立ち上げるとメニューが追加されています。 普通にスクリーンショットを撮った場合です。まぁ普通です。 ステータスバーを消してみました。キャリアの表示がなくなっています。 ナビゲーションバーを消してみました。余計な表示がないのですっきりです。 タブバーを消した感じです。これもまたすっきりです。 ツールバーを消しました。メインコンテンツだけの説明をしたい時に良さそうです。 iOS Screen Shot Helperはコマンド+Ctrl+Cを押すとスクリーンショットを撮影し
注目！サーバサイドからjQueryを使ってDOM操作·nodeQuery MOONGIFT
nodeQueryはnode.js用のサーバサイドjQueryで、サーバサイドでクライアントサイドのDOMを変更できたりします。 node.jsでjQueryライブラリを読み込むと、jQueryが提供するメソッドを使えますが、さらに一歩進めたのがnodeQueryです。サーバサイドからクライアントサイドの描画を変更できたりしてとても面白い実装ができます。 インストールはnpmで行います。 まずサンプルのブログです。普通に表示されているのが分かります。 サーバサイドです。node.jsのスクリプトの中でHTMLタグを出力しているのが分かります。構文にjQueryが使われているのも分かります。 ブログの新規投稿です。 投稿できました。 Twitter検索です。 時間が更新されるデモです。サーバサイドの時間であるのがミソです。 サーバサイドのソースです。 nodeQueryを使うとサーバサイドと
アプリベースでも実装したい、iPad用ロックスクリーンコンポーネント·ABPadLockScreen MOONGIFT
ABPadLockScreenはiPadにスクリーンロック機能を提供するコンポーネントです。 iPadをプレゼンや商品案内に使ったりとビジネスで利用されることも増えてきました。そんな中、次に考えるべきなのはセキュリティです。誤って情報が漏洩しないようABPadLockScreenを使ってロック機能を実装してみましょう。 起動した直後の画面です。迷わずボタンを押しましょう。 ロック画面が表示されます。パスワードは1234です。またはCloseボタンを押しても消せます（本来は不要なボタンでしょう）。 入力していきます。 ミスしました。 3回ミスするとボタンが押せなくなります。 ABPadLockScreenはモックなのでCloseボタンがありますが、リリース時には不要でしょう。ロック機能があれば間違って放置してしまった時に見られたりする心配がなさそうです。色々なアプリに組み込めそうです。 AB
情報をどんどん探っていくアプリに使える。Twitterアプリを真似たUIモックアップ·CLCascade MOONGIFT
CLCascadeはTwitterのアプリを真似して作られたドリルダウン型のUIです。iPad用になっています。 CLCascadeはiPad用のUIモックアップです。Twitterアプリ風のUIを再現しています。 最初の表示です。左にリストが並びます。 そこから選択すると右側にまたリストが表示されます。 さらに選択すると右側にリストが追加されていきます。これを何度も繰り返せます。 横向きの表示。 横向きだと3つならんでも可読性が高いです。 Webビューを使うこともできます。 XIBからビューを追加もできます。 デモ動画 右へ右へいくUIはTwitterのようにツイートからユーザ情報を見てさらにそのツイート一覧を見て…といったようなドリルダウンが続くサービスにぴったりと言えます。その意味ではWikipediaなどで採用しても面白そうです。 CLCascadeはApache License
小さな改善を積み重ねる。CSSを短縮化するコンソール向けソフトウェア·clean-css MOONGIFT
clean-cssはnode.jsを使ったCSS短縮化ソフトウェアです。コンソールで動作します。 一日数十万、数百万とアクセスのあるWebサイトではほんの少しの改善が積み重なって大きな速度改善につながることもあります。CSSも作成したそのままではなくちょっと工夫すれば大きな負荷軽減につながるかも知れません。そのための短縮化ライブラリがclean-cssです。 インストールはnpmを使って一発で完了。コマンドとして使うので-gをつけておきます。 ヘルプです。-oでアウトプットするファイル名、後は入力ファイルを指定するだけです。 catで標準出力としてCSSの記述を渡すことで、複数のファイルをまとめてマージして短縮化もできます。 元ファイルです。 こんな感じで短縮化されます。 またnode.jsのライブラリとしてテキストでCSSを渡して短縮化もできます。 -oをつけないと標準出力に渡るので、さ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
