縦長テーブルをスクロール対応にするシンプルなjQueryプラグイン「Lightweight Scrollable Tables」 2011年05月17日- Lightweight Scrollable Tables | jQuery Plugins 縦長テーブルをスクロール対応にするシンプルなjQueryプラグイン「Lightweight Scrollable Tables」 $('table').scrollbarTable();のように呼び出すだけで簡単にスクロール化してくれます。 特に派手な演出はありませんが、シンプルで汎用的に使うことが出来ます。とかく長くなりがちなテーブルも１行で簡単にスクロール化できるというのは色々な場面で使えるでしょう。 $('table').scrollbarTable(100)のように引数を渡せば高さを100pxに指定出来ます。 デモページはこちら 関連エ

3Dify Plugin ? Rendi qualsiasi elemento della tua pagina web 3D ページの要素を3D化できる面白jQueryプラグイン「3Dify」 マウスカーソルを合わせると、要素がインタラクティブに３Dで動くというインタフェースを実現できるjQueryプラグインです。 通常は平面の要素がグリグリ３Dで動きます。 ブログレイアウトでも次のようにグニャグニャとなります。ちょっとしたサプライズ要素として覚えておいてもよさそうです。 動作ムービーは以下。 一昔前はこんなことが出来るなんて誰が想像したでしょう、というインタフェース。 使いどころはそれほど無いかもしれませんが、覚えておけば何かびっくり要素を入れたい、的な時に役立つかも。 関連エントリ スポットライトを画像にあてる効果を作れるjQueryプラグイン「Spotlight」 リンクの開きかた

画像を使用しないで、ストライプ柄のボタンを作成するスタイルシートのチュートリアルを紹介します。 ストライプ柄はボタン以外にも適用が可能です。 Simple buttons with light stripes (pure CSS) デモページ [ad#ad-2] かわいいストライプ柄のボタンは、マウスホバーのエフェクトも実装されています。 HTML ボタンはテキストを使ったa要素で作成されています。 <a class="bt-blue fx-stripes" href="#"><span>Blue button</span></a> <a class="bt-grey fx-stripes" href="#"><span>Grey button</span></a> CSS：ストライプ ストライプのベースとなるスタイルシートです。 .fx-stripes:before { content:

Androidには、様々なWidgetが実装されています。 しかし、実際に使用するに当たり、取得したい情報が取れないなどの問題が起こる事があります。 今回取り上げる、TimePickerクラスでは、TimePicker#getCurrentHour() 、並びに、TimePicker#getCurrentMinute()を使用する際に、以下の挙動が起こります。 「＋」「−」ボタンを押下時 想定通りに、入力値を取得出来る。 ソフトウェアキーボードからの入力時 入力が反映されず、変更前の入力値を取得してしまう。 ※Focusが変更された時に入力値を反映するため。 今回から数回に分けて、TimePicker Widgetを自作し、上記課題を解決していきたいと思います。 その①では、AndroidOSが保持しているTimePickerと同等の外見を作成する所までを扱っていきます。 今回はXML L

このエントリは ライブラリ へ移動しました。

このエントリは ライブラリ へ移動しました。

昨今のスマートフォンの普及に伴い、 mixi においても Android や iPhone といった端末からのアクセスが増加しています。mixi でもタッチスクリーンに最適化された新しいスタイルの『mixi Touch』を提供させていただいており、mixi アプリにおいても2010年9月よりスマートフォン対応版の提供を開始しております。 今回、このmixiアプリのAndroidネイティブ版も開発していただくことができるようになりました。また、開発者の方がより簡単に開発できるようにSDKを提供いたします。まずは Android 用を提供し、後ほど iPhone 用を提供させていただく予定です。 特徴 mixi Android SDK の特徴は、以下の通りです。 個人・法人に関わらず、Developer登録すればどなたでも開発可能です。 OAuth 2.0の認証/認可手順の実装が不要 Toke

jQuery Smooth Animated Search Field Freebie | The Finished Box カーソルを合わせると拡大するかっこいい検索窓作成jQueryサンプル。 通常はグレーで目立たないように表示されていて、クリックするとハイライトされ検索窓が大きくなるものが実装できます。 小気味よくアニメーションする部分もいいです。 プログラム一式のダウンロードが可能なので再利用できます。 関連エントリ jQueryベースの画像スライダー３０まとめ iPhone/iPad用サイト作成時に使えるスワイプイベント実装jQueryプラグイン「TouchSwipe」 背景画像を自動リサイズしてうまくフィットさせられるjQueryプラグイン「Backstretch」

CSSのキャッシュ対策 クロスブラウザ対応の角丸、ボックスシャドウ、不透明 ショートハンドCSS、再利用可能なclass ページ下部に固定表示されるSticky Footer CSS（Reset関連） リセットはHTML5ベースのEric Meyer's Reset Reloaded フォントのノーマライゼーション Webkit系ブラウザのフォントのスムージング フォーススクロールバー ラベルの一列化 クリック可能なインプット要素 スクリーンリーダー対応 IE7のイメージリサイジング 印刷時のスタイル X(HTML) クリーンなコード構造 コンテンツ幅は940px F型レイアウト 古いバージョンのIEからイメージツールバーの削除 最新のIEのレンダリングエンジン jQuey 1.5.2ベース（1.4.4も可） ページ上部へスムーズにスクロール HTML5のプレースホルダー機能 ナビゲーショ

フォントを配置した親要素のサイズに合わせて、フォントサイズをフレキシブルにフィットさせるjQueryのプラグインを紹介します。 ※ブラウザのサイズ、ディスプレイのサイズ・解像度に合わせて、ではありません。 FitText - A plugin for inflating web type デモページ [ad#ad-2] デモでは、width=100%で実装された「FitText」とその下のダウンロードに適用されており、それぞれ親要素のサイズが変更されると共に、フォントサイズが変更されます。 サイズを変更したキャプチャ h1要素のwidthを「100%」にしているため、ブラウザのサイズを変更するとフォントのサイズも追従します。 FitTextの実装 下記は、デモ（h1要素とダウンロード）での実装例です。 HTML <header> <h1>FitText</h1> <p class="dow

Flared Borders with CSS デモページ ※上：ディテールを強化したタブ、下：旧式のタブ [ad#ad-2] 対応ブラウザは「:before」「:after」はCSS2ですが、スタイルに角丸などのCSS3を使用しているため、CSS3対応ブラウザ（Firefox, Chrome, Safari, IE9）でご覧ください。 HTML リスト要素を使用して、実装します。 <ul> <li class="current"><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Products</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> CSS：タブのベース シンプルな角丸

今回はVideoViewクラスを使って動画ファイルを再生する方法を紹介します。 再生や一時停止などのコントローラも簡単に利用することができます。もちろん独自のボタンを作成し、再生をコントロールすることも可能です。 ローカルのファイル ネットワーク上のファイル を再生することが可能です。 それでは続きへどうぞ 再生までの手順 VideoViewクラス まずはViewViewクラスを生成します。 名前から推測できるようにスーパークラスはViewクラス（1段上のスーパークラスはSurfaceView）です。レイアウトファイルにXMLで記述するしてもよいですし、ソースコード上で生成してaddViewする方法でも大丈夫です。 サンプルではレイアウトファイルに記述します。 <VideoView android:id="@+id/videoView" android:layout_height="wra

TortoiseSVNでSSHを使ってリポジトと通信を行う場合の設定方法です。 TortoiseSVNをインストールしたときにTortoisePlink.exeという、SSHクライアントがすでに付いているのでそれを使います。（PuttyのPlink.exeでも可能） 【前提条件】 下記は既に済んでいるという前提です。 ・鍵の作成 ・サーバーへの鍵の登録 ●パスワードでSSH通信する場合 TortoisePlink.exeのパス　 -l ユーザ名 -pw パスワード 例：C:\Program Files\TortoiseSVN\bin\TortoisePlink.exe -l mizu -pw mizunopass ●秘密鍵でSSH通信をする場合 TortoisePlink.exeのパス -l ユーザ名 -i 鍵の置き場所 例：C:\Program Files\TortoiseSVN

以前、カスタムタブについてのエントリ『カスタムタブと selector』を書きましたが、カスタムタブを使うとタブのプレス状態やフォーカス状態で背景イメージが変わらないという指摘を頂きました。試してみようと思いましたが、このエントリのサンプルアプリではプレス状態やフォーカス状態の背景を設定していませんでしたので新たにサンプルアプリを作成しました。 左図は「さん」のタブがフォーカス状態です。右図は「さん」のタブがプレス状態です。 drawable/tab_focus.xml, drawable/tab_press.xml を追加し、念のため drawable/tab.xml は Android のソースのタブの部分の内容にそっくり入れ替えました。また、Main.java の内容を一部修正しました。 private class MyView extends FrameLayout { priv

新規ページ作成 すでにあるページをコピーして新規ページを作成 スレッドフロート型掲示板から引用して新規ページ作成(α版) ブログの内容から引用して新規ページ作成(α版) ファイルをアップロードして新規ページ作成(α版) 他のホームページから引用して新規ページ作成(α版) [PR] 無料でホームページをつくろう @PAGES [PR] オークション情報ならオークション@PEDIA [PR] 2ch風の掲示板のレンタルなら @chs [PR] おすすめ iPhone iPad アプリ情報 @wikiで新規wikiを作成

アイコン画像の付与(Window.FEATURE_LEFT_ICON、Window.FEATURE_RIGHT_ICON)については、タイトルバーにアイコンを表示するを参照してください。今回はWindow.FEATURE_NO_TITLEとWindow.FEATURE_CUSTOM_TITLEについて紹介します。 サンプルコードはGoogleCodeのこちらで公開しています Windowクラスで定義されている上記の値は、Activity#requestWindowFeatureメソッドを利用してActivityに設定します。たとえば、タイトルバーを非表示にする場合は以下のように記述します。 タイトルバーを非表示にする public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); /

モバイル端末上のアプリケーションデータを、PC上の別アプリケーションに送りたいような場合に、HTTPサーバーを立ててやる方法もあるにはあるんですが、事前にIPアドレスを知っていないといけないとか、もひとつエレガントさに欠けると思うんですよ。 で、PC側がMacintoshでモバイル側がiPhoneならば、Bonjour(リンク)を使ったらネットワークの面倒な設定をしなくても簡単にやり取りを出来るんじゃないかと思い、試してみました。 iPhone側はTitanium MobileがBonjourをサポートしているので、これを利用すれば良さそうです。今回は、Kitchen SinkにBonjourを使ったサンプルがあるので、せっかくだから、これをそのまま使用します。 Mac側はAIRでアプリを作ることに決めているんですが、残念ながらAIRではBonjourをサポートしておりません。仕方ないので

JavaScriptパターン本の5章で紹介されているサンドボックスパターンがおもしろかったので試してみました。 これは広く使われている名前空間を使ったモジュールパターンとは違うアプローチになっています。モジュールパターンというのは以下のような書き方で、即時関数が返すオブジェクトをモジュールとして利用するものです。 * Module Pattern // 名前空間を定義 MYAPP = { utilities: { } }; // ... MYAPP.utilities.array = (function() { // 依存関係 var uobj = MYAPP.utilities.object, ulang = MYAPP.utilities.lang, // プライベートプロパティ array_string = "[object Array]", ops = Object.prototy

dakkie | Hiroki Onoda 愛知県名古屋市在住のWebデザイナー。雑貨、カメラ、カフェ、旅、空、海、コーヒー、料理が大好き。ボリビアにあるウユニ塩湖に行くこと、写真で個展（2013年7月22日～28日にmonogramで開催予定）を開くこと、独立すること、空とコーヒーと写真と雑貨が楽しめるカフェを開くことを夢見てる。 E-mail：dakkie.com@gmail.com twitter：dakkie_ facebook：hiroki.onoda sumally：dakkie booklog：dakkie textarea要素とは、複数行のテキストを入力するエリアを作成するHTMLタグのことです。例えば、コメント欄ですね。 Firefox 4.0以降、Safari 3.0以降、Google Chrome 1.0以降では、そのテキストエリアをリサイズすることができます。Int