カテゴリー:iPhone関連

リスト表示へ

[Fixnel] iOS風スクロールを実現するライブラリを書いてみた

2012年9月23日 17:38

iOS風スクロールライブラリ、名前は「Fixnel」

最近の案件で、ライブラリを使用すること自体がNG、というケースの案件があり、そういう場合でも対応できるよう、iOS風スクロールをさせるライブラリ を自前で書いてみた。発端がそういう状況なので、もちろんどのライブラリにも依存していない。このライブラリ単体で動作します。

ちなみに名前の由来ですが、hogehogeスクロール的なものはなんか色々出ているので、どうせならまったく違う名前を、っていうことと、"fix" と "panel" を組み合わせた造語になっていますw

[デモ、詳細はこちら]

[Downloadはこちら]

GitHubページを初めて作ってみた

さて、今回のライブラリはGitHubにて公開中です。
また当ブログのコンセプトとして、デモとソースを同時に公開するようにしているので(できてないのもあるけど・・)、当然ながらデモもあります。
そしてデモをどうしようかなーと思った時に、どうせならと思ってGitHubページで作ってみました。

使い方や実際に使用したデモなど、すべてそちらに記載されているので詳細はそちらをご覧ください。
色々使ってみてはいるものの、多少のバグなどもあるので、もしバグを発見された方は連絡をいただけると助かります><

スマホの開発が超絶楽に! weinreでスマートフォンをPCでリモートデバッグ!

2011年9月 5日 09:07

weinreって?

weinreとは、サイトでは次のように書かれています。weinre is Web Inspector Remote.
この単語の頭2文字ずつをつなげて「we in re」ということのようです。読みは「ワイナリー」とか「ワイナー」みたいな。

つまり、リモートでデバッグができる、ということです。百聞は一見にしかず、ということで、実際に使ってみたものの動画キャプチャをアップしているので、下の動画を見てみてください。きっとその機能に驚くはずです。(ちょっと画面が小さいので、720pにしてフルスクリーンで見るといいかも

ダウンロード

Githubで公開されているphonegap / weinre - Githubからダウンロードできます。

zipで公開されている2ファイルのうち、今回は「weinre-jar-1.5.0.zip」を使いました。Mac版はアプリになっていて使いやすいのですが、ただ設定をいじるのが大変だったので、jarファイルを直接実行するのがいいでしょう。デモもそれを想定してターミナルから実行しています。

weinreをターミナルから実行する

さて、今回のデモでやっているように、weinreをターミナルから実行してみます。(社内のサーバに設置しておくときにもやりやすいかと思います)

まず、Githubから落としてきたファイルを解凍します。生成されるファイルは2つで、使う方はweinre.jarのほうです。場所はどこでもいいので、あとあと使いやすい場所に保存しておくといいでしょう。

次に、ターミナルを起動します。通常は、アプリケーション > ユーティリティのフォルダの中にアプリケーションがあります。

起動したら、上記で保存したファイルの場所まで移動してください。(操作がよくわからない人は、cd (cdの後ろに半角スペース)と入力後、保存したフォルダをFinderで表示し、そのフォルダをターミナル上にドラッグ&ドロップし、Enterキーを押すと移動できます)

続いて、java -jar weinre.jar --httpPort 8080と入力し、Enterキーを押します。エラーが特になければ、実行成功です。

ブラウザでweinreを表示する

起動が無事完了したら、あとはブラウザで実行すればOKです。Google Chromeを立ち上げ、http://localhost:8080/にアクセスしてください。

デモで見た画面が表示されればOKです。ページが表示されたら、ページ中程にあるbookmarklet url in a preと書かれた箇所にあるJavaScriptのソースをコピー*1します。

コピーしたら、一番上にあるリンク http://localhost:8080/client/#anonymous をクリックしてデバッグページを表示させます。

続いて、iPhoneエミュレータか、別のGoogle Chromeのウィンドウでリモートデバッグしたいページを開き、*1でコピーしたJavaScriptをロケーションバーに貼りつけて実行*2してください。

デバッグページの画面にデバッグしたいページのURLが表示されれば接続完了です。あとは、Google Chromeで普段行なっているのと同じようにデバッグすることができます。

Tips

実はファイルを落としてきてやる方法以外に、weinreのAPIがすでに用意されていて、そちらを使うことで手前で準備しなくてもリモートデバッグを体験することができます。

http://debug.phonegap.com/client/#hogeにアクセスし、*2で実行したJavaScriptの、読み込むJS部分をhttp://debug.phonegap.com/target/target-script-min.js#hogeに変更すればOK。

ちなみに、#hogeとなっている箇所(ローカルで実行しているもの、APIどちらも)はIDになっていて、それを任意の文字列に変更し、JSを読み込ませるブックマークレットの部分のIDも同じものにすることで、ひとつのサーバで複数のページのデバッグができるようになります。(※http://localhost:8080/client/#debugtest のように)

APIを利用する場合は、実機でも確認することができるのでさらにそのすごさを実感することができると思います。(ネットワークの設定などをいじれば、同じネットワーク内のものであればローカルで準備したものでも実機での検証ができますが、ちょっと話がそれるので割愛)

今回の記事を書くにあたって、「スマートフォンブラウザのWebInspectorをリモートで実現するweinreが凄い」の記事を参考にさせてもらいました。

これは簡単! a要素にクラスを追加するだけでiPhone UIボタン

2011年8月29日 09:05

↓実際に動いているデモはこちら(iPhone向けに作っているため、iPhone / WebKitでしか最適化されていません)

これは簡単! a要素ひとつでiPhone UIボタン - jsdo.it - share JavaScript, HTML5 and CSS

ちなみにiPhone / WebKitで実際に見るとこんな感じに見えます↓

実際に適用したサンプル

a要素に1クラス追加するだけで実現するのでお手軽

今回のサンプル作成でこだわったのは、1要素に1クラスを指定するだけでiPhoneのようなデザインを実装することです。
つまり、以下のように指定するだけでiPhone風ボタンに早変わりする、というような手軽さを意識しました。

HTMLソース

CSSソース

実は見出し部分も画像なし

実はタイトル周りもCSSのみで実装しています。
ソースもかなりシンプル。
さらには背景の縞々模様もCSSのみで作っていたりします。

まとめ

CSS3のポテンシャルは非常に高いです。
こうした比較的シンプルなデザインであればCSSのみで、かつ要素を何重にも入れ子に・・なんてしなくても実現できてしまいます。
(具体的には、:after擬似要素、:before擬似要素を匠に使うことで、無理に思えるデザインも実装できてしまったりします)
[追記] Twitterで指摘をもらいましたが、:after(:before)擬似要素はCSS3からの定義ではありません。ここで言いたかったのは、それらを工夫して使うことでCSS3の力が増し、CSSのみで複雑なデザインが実現できる、ということでした。:after(:before)擬似要素がCSS3だと勘違いされる人がいるかもしれないので追記しておきます。

iPhone4の対応で画像サイズがーという悩みを解消できることを考えると、色々とテンプレートとして作ってみるのも面白いのではないでしょうか。
ぜひぜひみなさんも色々なデザインを、少数構成で実現できるように挑戦してみてください。

ちなみにこのサンプルは、自分で作ったCSS3ジェネレーターでグラデーションを調整しながら作りました。よかったら使ってみてください。

iOSのフォトビューワのような動きを実装するfrick-image.js

2011年7月11日 09:34

JavaScriptライブラリ作りました

久々にJavaScriptライブラリを作ってみました。その名も「frick-image.js」。

まずは下のデモを見てもらうと、どんなものか分かると思います。ちなみに、アニメーションを実装しているのはFirefoxとWebKit系(iOS、Android含む)のブラウザのみになります。それ以外は、ドラッグ可能なことと、あふれた要素を強制的に定位置に戻す機能のみとなります。

iOSのフォトビューワのような動きを実装する - jsdo.it - share JavaScript, HTML5 and CSS

使い方

使い方は簡単です。写真を内包するコンテナになる要素(*A)と、その中に写真を含むボックスのふたつの要素(*B)を用意し、以下のようにスクリプトを実行すればOKです。指定するのは、コンテナではなく、Bの方の要素のID(やクラス)を渡します。指定方法はjQueryで指定できる方法で指定することができます。

JavaScript

HTML

ダウンロード

1