iOSのテスト、ちゃんと行っているでしょうか。もちろん人力ではなく、自動化のテストです。ユニットテストは書きやすいですが、UIが絡んでくるとなかなかテストが難しいケースもあり、十分に行われていない婆もあるようです。 そこで使ってみたいのがEarlGrey、Google製のiOS自動テストフレームワークです。 EarlGreyの使い方 EarlGreyの特徴はネットワークや操作を伴う中での同期した動作です。 EarlGreyのテストを実行したところです。スクロールなどをしつつ、テストが行われています。 デフォルトでは自動的に同期をはかってくれるとのことですが、自分のタイミングにカスタムすることもできるとのことです。XCTestと連携できるので、これまでのテストコードと一緒に活用できるでしょう。 EarlGreyはiOS用、Apache License 2.0のオープンソース・ソフトウェアです

デザインフレームワークを使えば見栄えのいいWebサイトがさくさくと作れます。そのまま完成には至らなくとも、プロトタイプであれば十分な品質になるのではないでしょうか。 現在、様々なデザインフレームワークがありますが、今回は名前があれな気がするResponsiveというソフトウェアを紹介します。SEO的にきつそうな気はしつつも気にせずいきましょう。 Responsiveの使い方 今回はスクリーンショット多めでいきます。 タイポグラフィ。 幅によって表示する、しないクラスを指定できます。 グリッド。定番の12分割です。 オフセットもできます。 フォーム。 ラベルの横表示。 ボタン。 グループボタン。 テーブル。 テーブルはもちろんレスポンシブです。 画像表示。高さ固定もいけます。 iframe。動画表示、Googleマップなどもいけます。 VineやInstagramも埋め込みもいけます。 vi

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました あなたが開発者であるならば差分表示にはいつもお世話になっているのではないでしょうか。かく言う筆者も毎日のように使っています。しかしそれの主な利用はプログラミングやHTMLコーディングではないかと思います。 差分表示をもっと色々な場面で使ってみたいと思うならば、自作のWebアプリケーションに組み込んでみると面白そうです。そこで使ってみたいのがPHP Fine Diffです。 PHP Fine Diffの使い方 使い方の例としては次のようなコードになるようです。テキストを二つ与えるだけで使えます。 include 'finediff.php'; $opcodes = FineDiff::getDiffOpcodes($from_text, $to_text); 比較は文字、行、単語単位

最近はフラットUIの流行もあって説明をなるべく少なめに、アイコンでどういった機能かを表すことが増えてきています。しかしアイコンが分かりづらかったり抽象化され過ぎていると一見して機能が分かりづらくなります。そこでマウスオーバーによる説明表示がおすすめです。 スマートフォンやタブレットでは使えませんが、デスクトップであればマウスオーバーを上手に使えばユーザビリティが高まるでしょう。そのためのライブラリとしてiHoverを紹介します。 iHoverの使い方 iHoverはとにかくパターンが多いのが特徴です。まずは動画をご覧ください。 マウスを載せると上下左右から説明文が飛んできたり、元々の画像が回転したりします。 元々。マウスを載せると… 説明が表示されました。 こんな感じにサムネイルになったり。 上下左右に変更できます。 iHoverはピュアなCSSで作られていますのでJavaScriptが使

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました これは応用がききそう！ 新しいモノを買う時には同じ分野の商品で比較しますよね。むしろその比較している時間が最も充実している可能性すらあります。色々な商品を横並べにして眺めるのが楽しいです。 価格コムには商品を選択して詳しく比較する機能がありますが、それと同じようなUIを提供するのがBikeBookです。名前の通り、自転車を比較します。 BikeBookの使い方 BikeBookは自転車の比較サイトとなっていますが、同じ仕組みを使えば家電などもできるでしょう。他のサイトでは行っていないようなジャンルで比較サイトを作ってみる時のベースにするのも良さそうです。 BikeBookはRuby製、GNU Affero General Public Licenseのオープンソース・ソフトウェアで

おお、これは企業で使えそうですよ！ 企業によっては外部にソースコードを預けられないため、自社でGitサーバを構えているところも多いでしょう。しかしそうなると管理画面が欲しくなります。GitHubの管理画面は優秀で、ああいったWebブラウザ上でリポジトリの情報を見たいと思うはずです。 そこで使ってみて欲しいのがGitonomyです。デザインの格好いい、Gitリポジトリマネージャです。 Gitonomyの使い方 GitonomyはPHP + Symfonyの組み合わせで作られていて、Webブラウザ上でGitリポジトリの操作が一通りできるようになっています。ユーザはプロジェクト単位にグループに入り、そこで権限管理される仕組みです。 ソーシャル機能はありませんが、企業ユースであれば十分ではないでしょうか。社内でGitサーバを立てている場合はぜひ導入を検討してみてください。 GitonomyはPHP

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました これはGitを使っているならぜひ入れておきたいツールです。 GitHubのコード差分表示はとても見やすくて、一旦あれに慣れてしまうとターミナルで出力されるDiffが非常に見づらく感じるようになります。しかしプロジェクトによってはGitHubを使えないというケースもあるでしょう。 そこで使ってみたいのがPretty Diffです。任意のGitリポジトリでGitHub風の差分表示を実現してくれるライブラリです。 Pretty Diffのインストール インストールはnpmを使って行えます。 $ npm install -g pretty-diff これで準備は完了です。 Pretty Diffの使い方 使っているGitリポジトリに移動します。例えば最後のコミットとの比較はこんな感じです。

創造意欲がかき立てられますよ！ Boostrap臭を嫌って導入に踏み切れないという方は多いですが、それもあって多彩なテーマが開発されています。それらと入れ替えると、イメージががらっと変わって見えるはずです。 今回は最近流行のフラットUIを取り入れたBootflatを紹介します。フラット＝角張っているというイメージも壊してくれる素敵なテーマです。 Bootflatのスクリーンショット 今回はスクリーンショット多めで紹介します。 基本カラー。パステル系ではっきりとしていますね。 まずはボタンとボタングループ。 ボタン＋ドロップダウン、ラベル、バッジ、ツールチップなど。 ドロップダウンはもちろん階層対応です。 フォーム。 フォームの横にドロップダウンを付けることもできます。何かと応用できそうですね。 アラート。 タブ。4辺全てに対応しています。 ナビゲーションバー。 パン屑、通知、プログレスバー

デザイナーの方は覚えておくと便利そうですよ！ 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

最近Webサイトでアニメーションしながら表示される所が増えています。かといってかつてあったFlashのようにスプラッシュ的なものではなく、表示構成要素がさりげなくアニメーションしながら配置されていくといった感じです。 それはCSS3のアニメーションで作られているのですが、スクロールと組み合わせて容易に実現してくれるのがWOW.jsです。 何はともあれ動画を見てもらうのが良いと思います。 犬や猫のアイコンがアニメーションしながら表示されていきます。スクロールの感知はJavaScriptで行っていますが、実際のアニメーションはCSSアニメーションによるものです。 実用的にどうなの、と思ったのですが以下のサイト（利用例）を見るとかなりいけてることが分かります。 さりげないアニメーションで表示されます。 1640 iOS7 Icons for designers & Developers | St

2010年はiPhoneなどスマートフォン向けのツール、ソフトウェアに人気が集まったようです。スマートフォン最適化サイトは今なお人気のあるジャンルで、トレンドに合わせて様相が変化しています。これからもきっと新しいテーマが登場してくるはずです。 5. シンプルなWindows用Linuxコマンド集「Gow」 Gow 現代版cygwinといった感じのソフトウェアです。Linux系のコマンドをごそっとWindowsでも使えるようにしてくれます。仮想化ではちょっと敷居が高いという場合は良いのではないでしょうか。 Home · bmatzelle/gow Wiki 4. スマートフォン最適化サイトの本命か「jQuery Mobile」 jQuery Mobile jQuery Mobileは2010年10月に登場です。もっと流行るかと思ったのですが、あまり使われていないですね…デザインや仕組みでちょ

Facebookからまた面白そうなソフトウェアが出てきましたよ！ JavaScriptにおけるテンプレートフレームワークは数多く出てきています。いずれも興味深い作りなのですが、ここにきてFacebookがReactというライブラリをリリースしました。 ReactはUIを生成するJavaScriptライブラリで、MVCでいうところのVになります。さっそくコードを見てみましょう。 一番シンプルな実装例。左側がコード、右側が実行結果になります。 Reactは必須ではないのですがJSXというXMLライクな記法を使っています。 <hellomessage name="John" />のように定義するとthis.props.nameで値が取り出せます。実際の描画はリアルタイムに反映されるので、Helloのところを修正すればすぐにレンダリング内容が変わります。 こちらはタイマーを使った例。コードが見やす

業務システムではテーブルがよく使われますが、大量のデータを表示するとカラムが見えなくなっていったりきたりする操作が発生します。それはユーザにとってストレスで改善要望を出されること請け合いな訳ですが、丁度自分たちのシステムにあったものを探すのは大変です。 さらに業務システムがスマートフォンからも使いたいなんて言われたらどうしたら良いでしょう。そこで紹介したいのがSticky Table Headers & Columns、横に長いテーブルにも対応したヘッダー追従テーブルライブラリです。 デモです。こういった感じのテーブルがあったとします。 スクロールしてもヘッダーがついてきて常に一番上に固定されます。 続いて左側のカラムも固定されるパターン。これも顧客名やIDを常に出しておくとデータの確認がしやすくなります。 幅が広いテーブルでも右側にスクロールできるので問題ありません。 Sticky Ta

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました WebアプリケーションはAjaxを多用するので処理状態を分かりやすくためローディングアイコンを使うと良いでしょう。通常その手のリソースにはアニメーションGIFが使われますが、色やサイズを変えたいと思う度に素材を作らないといけないのは不便です。 そこで新しいローディングアイコンを提供してくれるのがLoaders Kitです。なんとCSS3を使って多彩なローディングアイコンを提供しています。 画像では分かりづらいので動画にて。 実際の使い方ですが、例えば左上のタイマーの場合は次のようなスタイルシートになっています。 /* Timer*/ .timer{ width: 24px; height: 24px; background-color: transparent; box-shado

おお、これはかなり使えそう！ テキストボックスやテキストエリアに入力された文字列に対して何らかの処理を行いたいと思うことは良くあります。さらにキャレットのある場所や選択されている文字に対して処理を行うのも良くある処理ではないかと思います。 例えばWYSIWYGエディタを作ったり、選択文字を別なサービスに飛ばしたりといった使い方が考えられます。意外と選択範囲を取り出すというのは面倒な処理なのですがjQuery.selectionを使うとごくごく簡単にできそうです。 テキストボックスの場合 例えばテキストボックスの例です。 $('#sel-input').click(function(){ alert($('#input').selection()); $('#input').focus(); }); $('#input').selection() で選択されている文字が取れます。 こんな感じ

Webベースの業務システムを作っていると度々データを一覧で表示する機会があります。そんな中で度々あがってくるのが一覧の時点でデータ編集したいという要望です。 In place editのような仕組みを使って作り込んでも良いですが、専用の仕組みを使った方がユーザビリティ高くできるはずです。そこで使ってみたいのがjQuery editTableになります。 最初の表示です。適当にセルをクリックします。 そうするとその場で編集可能になります。 行の追加もできます。 ポストすると各行ごとにデータが入ってくるのが分かります。 Ajaxの場合もJSONの配列で受け取れます。 日付選択に際してカレンダーピッカーを使うこともできます。 行の追加できる数を制限した場合。3行追加した時点でボタンが押せなくなります。 jQuery editTableの使い方は以下のようになります。 var mytable =

CSS3だけで作れちゃうのが凄いですね！ 処理中にユーザがストレスを感じないように表示されるスピナー。最も簡単なのはアニメーションGIFを表示することかなと思いますが、背景色を微妙に違ったり、大きさを適切に考えないといけないなど画像だけに扱いがちょっと面倒に感じることがあります。 そこで使ってみたいのがSpinKitです。なんとCSS3のアニメーションを使ってスピナーを実現しています。 一例。四角いパネルが回転します。 円が次々に大きさを変えていくパターン。 棒の長さが変わっていくパターン。 スクリーンショットでは分かりづらいので動画を撮影しました。 例えば棒の長さが変わるウェーブの場合、次のようなスタイルシート設定になります。 .spinner { margin: 100px auto; width: 50px; height: 30px; text-align: center; fon

WebGLを使えば高度なグラフィックスが描けるというのは分かっていても、実際どれ程度のことができるのかはサンプルがあまり多くありません。それだけグラフィックスの作り込みが大変ということでしょう。 そんな中登場したのがBabylon.js、WebGLを扱うためのJavaScriptフレームワークです。Babylon.jsを駆使すれば3Dゲームだって作成できるとのことです。 デモです。Webながら70MBもあります。 マウスやキーボードで視点を変えたり動き回ったりできます。 グラフィックスはかなり奇麗です。 ロボットのデモ。長細い部分が何かというと… スライドを引っ張りだしてきます。 こちらは心臓をモデリングしたデモ。 マイクロソフトカフェ。 幾つかのデモは矢印キーではなく、傾きセンサーを使って視点の操作ができます。MacBook Proなどを持って動かせば3D空間を動き回れるようになっていま

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました やり方は分かるんですが本当にやってしまうのが素晴らしい。 MS Office 2007以降ではファイルフォーマットがXMLをベースにリソースファイルなどをZipで圧縮したものになっています。そのためZipを解凍すればファイルの内容を読み取ることもできます。 とは言え記法の問題もあって読めるのと情報を読み取れるのとでは意味合いが違っています。そこで作られたのがjs-xlsxです。ExcelファイルフォーマットであるXLSXファイルを読み取るJavaScriptライブラリです。 デモのHTMLファイルにXLSXファイルをドロップします。 CSVとして解析させるとちゃんとファイルの内容がカンマ区切りで取り出せているのが分かるかと思います。 JSONにするとさらにJavaScriptとの連

Ghostはnode/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 今はソーシャルの時代であえてブログを書く人は少なくなっています。確かにソーシャルに投稿するのに比べると幾分面倒な感じがします。しかしシンプルなブログであればきっと使いたくなるはずです。それがGhostです。 最初にサインアップします。 管理画面です。投稿が一覧表示されています。 編集画面です。Markdownで記述します。右側にライブプレビューが表示されます。 コンテンツは自由に追加できます。 日本語も問題ありません。 設定画面です。 プロフィール画面。こちらもすっきりとしたデザインで格好いいですね。 公開画面。デザインはかなりシンプルです。Tumblrのようですね。 記事詳細。こちらもとてもシンプルです。 GhostはKickstarterのキャンペーンで見事に目標を達成して開発さ