.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #DevFest23 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads
$(function(){ var $container = $('#container'); $container.isotope({ itemSelector : '.element' }); var $optionSets = $('#options .option-set'), $optionLinks = $optionSets.find('a'); $optionLinks.click(function(){ var $this = $(this); // don't proceed if already selected if ( $this.hasClass('selected') ) { return false; } var $optionSet = $this.parents('.option-set'); $optionSet.find('.selected').r
Google Maps APIで地図を表示したページを印刷した際、IE6~8でマップのタイル画像がずれて印刷されてしまう不具合があります。 この不具合の解決はどうにもできなさそうなんだけど、GoogleマップにはStaticMapsAPIっていうマップを画像で出力してくれるAPIがあるので、印刷前にStaticMapsAPIで生成した画像に差し替えて、印刷後に元に戻せばきれいな地図が印刷されるっていう寸法です。 うまい具合にIEには印刷前に呼ばれる「window.onbeforeprint」と、印刷後に呼ばれる「window.onafterprint」ってイベントが存在します。 以下jqueryを使用したコードの例です。 //mapAreaというIDのDOM要素にマップを表示 var map=new google.maps.Map(document.getElementById("m
Free HTML5 Admin Template | MediaLoot フリーでHTML5ベースのリッチな管理画面テンプレート。 次のようなカッコいいHTML5ベースのテンプレートが公開されています。 管理画面ということでIEユーザとかは抜きにして考えてよい場合が増えそうでHTML5にしちゃっても問題無さそうです。 フリーなのにパーツ豊富ですね。ここまで使えていいんでしょうかと思ってしまうほど。 関連エントリ CodeIgniter開発での管理画面作成を楽にする「grocery CRUD」 カッコイイWEB管理画面を作成するPhotoshopチュートリアル TwitterBootstrapベースのテーマやテンプレートが入手できる「WrapBootstrap」
先日エントリーした「ブラウザの幅に応じてレイアウトをきれいに整列できる「jQuery Masonryプラグイン」」の続きで、レスポンシブWebデザイン制作にjQuery Masonryプラグインを利用するための重要なポイントについて詳しく解説します。 サンプル(リンクは2項) 手前味噌ですが、jQuery MasonryによるレスポンシブWebデザインの記事は他にも多く存在する中、実用レベルまで踏み込んでいるのはおそらくこのエントリーだけだと思います。 なお、jQuery Masonryプラグインの基本的な設定方法については割愛してますので、上記のエントリーを参照してください。 1.はじめに このエントリーでは「NHKスタジオパーク」のサイトを参考に、次の内容について解説します。 NHKスタジオパーク まず、カラムレイアウト全体をセンタリングさせるためのCSSの設定について紹介します。 ま
先日、iOS6のSafariでFile API、HTML Media Captureを試してみました。 これで写真を撮ってすぐに編集できるWebアプリが作れるのではないかと思い、作ってみることにしました。 以下がサンプルのURLです。撮影して画像を表示した後に編集し保存することができます。 画像処理サンプル OSとブラウザに関しては iPhone 5(iOS6)のSafariと Galaxy S3(Android 4.04)の標準ブラウザ で動作確認しました。iOS5系、Android2系ではFile API、HTML Media Captureが使えないので動きません。 PC版Chromeでも試しましたが、ファイルを選択して画像処理できることを確認しました。 他のモバイル用OS、モバイルブラウザに関しては試せないので分かりませんが、 以下のサイトの表でFile APIとHTML Medi
20121019 Jenkins勉強会資料です。技術ネタではなくてすみません...。Read less
レスポンシブWebデザインの表示 確認ツールです。よく見かける タイプのツールですが、OSSで ソースが公開されているので後 で自分のサーバーに入れようと 思ったので備忘録として。 よく見かける、複数のサイズの幅を同時に表示確認出来る、というやつです。幅の数値は設定可能です。 こういうやつ。URL入れてRESPONSIVATE!っていうボタンをクリックすれば表示確認出来ます。 ↑ 幅のサイズは変更できます。 URLも発行されるので他の方に見せるのも楽ですね。OSSとしてソースコードも公開されてます。これは導入してみようと思います。 Responsivator
動機 Subversionで困ってない ぶっちゃけSubversionで全然困っていませんでした。 コードレビューはちゃんとやっていたし、マージ・ブランチングも自作シェルスクリプトのおかげてスムーズにやれていました。 よく「Gitはマージが賢い、ブランチ作成が一瞬でできる」とかいわれますが、Subversionだってちゃんと使えばコンフリクトなんかめったに起きないし、ブランチ管理・マージだって全然めんどくさくない。 特にver1.7からはサーバもクライアントも大幅に高速化されたし、.svnディレクトリが.gitみたいに1個になったし、rebaseみたいなことだってできる。(sync merge & reintegrate) ただ、世の中が一斉にGitにシフトしている中でいつまでもSubversionを使っててよいのかという不安がありました。 また、月から金までSubversionにどっぷり
上記のパラメータのうち、「強度」は効果の強さをパーセントで指定します(100% 以上の値が指定できるものもある)。角度は色相の回転角(90deg など)、半径は長さの単位(2px など)、影パラメータは box-shadow と同じ書式です。例として、色相を 90 度変更して影を描画する例を示します。 filter: hue-rotate(90deg) drop-shadow(8px 8px 4px #888); -webkit-filter: hue-rotate(90deg) drop-shadow(8px 8px 4px #888); -moz-filter: hue-rotate(90deg) drop-shadow(8px 8px 4px #888); -o-filter: hue-rotate(90deg) drop-shadow(8px 8px 4px #888); -ms-
CSS3 と LESS でページ右上に表示するリボンを作ってみました. jsdo.it を使って Step by Step で作りながら解説しています. よかったら参考にしてください. Table of contents サンプル Step 00 – ベースとなる HTML を書こう Step 01 – CSS(LESS) の下準備 Step 02 – #tm .ribbon ミックスインを作ろう Step 03 – #tm .ribbon の中身を作っていこう サンプル 今回は下記のようなサンプルの作り方を解説していきます. up Step 00 – ベースとなる HTML を書こう リボンとして使う要素を div タグで作り, その中に 表示する内容を書きます. 今回はヘッダーとその説明の2行を h1, p タグで追加しました. <div class="ribbon"> <h1> <a
ツイッターだと無理なのでこちらに、 var a = new String('a'), b = (function (s) { s[0] = '_'; return s }(a)); console.log(a.toString()); console.log(a === b); // a, true 何故 #js via https://twitter.com/nazomikan/status/258953859731443712 の流れで、ちょっと気になった事が。 以下のコードは、base オブジェクトに { 1:1, 2: 2, a: "a" } という、再設定不能,列挙可能,ReadOnlyなkey/valueを設定しています。 base = {}; Object.defineProperty(base, 1, { configurable: false, enumerable: t
jQuery UIを使ったタブコンテンツ でタブ数が多数有ってもレイアウト を崩さないようにドロップダウン化 するスクリプトです。確かにちょっ と問題だったのでありがたいです。 ドロップダウン+タブメニューという 感じ。 タブでコンテンツをその場で切り替える、という手法はかなり一般的になりました。ブログなどでもサイドカラムでよく見られますね。 ただ、そのタブ数が増えてしまうとボタンが収まりきらずにレイアウトを崩してしまうので複数用意したり、という事で対応している事がしばしばですが、そのタブ数が増えても一箇所に収められるようにしたのが今日のスクリプトです。前置き長いですね。 動作サンプルです。通常横並びになるタブがドロップダウン内に一纏めになっています。通常のタブはワンクリックで済むのに対してこれだともう一回クリックする必要があるので数が少ないと逆効果ですが、数を気にせず1箇所にこうして収め
Masonryはかっこいいけどパネル移動のアニメーションがちょっとな、という人にぴったりな、レスポンシブ対応でレイアウト変更時のアニメーションもスムーズでかっこいいグリッドを生成するjQueryのプラグインを紹介します。 Grid—A—Licious Grid—A—Licious -GitHub Grid—A—Liciousのデモ Grid—A—Liciousの使い方 Grid—A—Liciousの実装例 Grid—A—Liciousのデモ まずは、Grid—A—Liciousのベーシックな動作が確認できるデモからご紹介。 アレンジは、下記のGrid—A—Liciousの実装例で。 ページいっぱいに高さの異なるパネルが同じ間隔で配置されています。 デモページ:スマフォサイズ Grid—A—Liciousの使い方 Grid—A—Liciousは2008年にリリースされた当時は単にグリッド状に
Flash界最強ライブラリの一角 jQuery animateよりも圧倒的パフォーマンス。Flashの最強アニメーションライブラリTweenMax。JavaScript版があるのはご存知でしょうか。 TimlineMax/Lite TweenMax/Liteの4つのライブラリ群の総称でGSAP JSというパッケージ構成です。※要ライセンス注意(後述) まずはその圧倒的パフォーマンスを体感してください。プルダウンから主要ライブラリを選んで、STARTを押すと右下のfpsの数値が変わります。 GreenSock Animation Speed Test 豊富なアニメーション機能 GSAP JSの主要な機能として下記の物が挙げられます。パララックスなどのインタラクティブなサイトを作る上でもとてもすごく重宝しそうです。 ベジェアニメーション 繰り返し 逆再生 時間指定 一時停止 フレームラベル ゆ
展開と共に、移動のアニメーションが加わります。 PFoldの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 <link rel="stylesheet" type="text/css" href="css/pfold.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.pfold.js"></script> Step 2: HTML コンテンツの初期状態と最終状態をそれぞれdiv要素で実装し、div要素で内包します。 <div id="uc-
QUnitとは? † JQueryプロジェクトでも利用されているJavaScriptのユニットテストフレームワーク。 結果レポートの出力やブラウザAPIを利用して主にHTML上で実行することを前提に作り込まれているが、Node.jsなどのCLI環境でも実行可能なように内部ロジックの調整は行われている。 ↑ Getting Started † 以下内容のHTMLを作成してブラウザで開く。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>QUnit Example</title> <link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-1.10.0.css"> </head> <body> <div id="qunit"></div> <script
AndroidプログラミングのTOPへ ※この記事は,過去の記事をバージョンアップさせたリメイク版です。 Android本体を買わなくても,Androidアプリの開発と動作確認だけなら,無料で可能。 アプリの開発環境:EclipseやAndroid SDKを無償で利用できる。 アプリの実行環境:エミュレータを無償で利用できる。 以下は,Windows 7 (64bit版)上で Androidアプリの開発環境をゼロからセットアップし, サンプルアプリケーション(Hello Worldプログラム)を動かすための手順。 開発環境 構築手順 (1)JDKの導入 (2)Android SDKの導入 (3)Eclipseの導入 (4)Eclipse上でAndroid SDKをセットアップ サンプルアプリケーション 動作手順 (5)サンプルプロジェクトの作成 (6)サンプルアプリの起動 (7)おまけ:実
基本的なライフサイクルメソッドを補うかのように、さまざまなタイミングでハンドリングできるのが分かると思います。これらのメソッドをうまく使うと、いろいろと細かい制御ができるようになります。 画面遷移パターンで呼ばれるメソッドを確認する 上記すべてのメソッドが呼ばれたときのログをとり、いくつかの画面遷移のパターンを操作したときに呼ばれるメソッドとその順番を確認してみました。 Activity を起動する アプリ起動後、初めて表示されたときの場合です。 onApplyThemeResource() は onCreate() より前に呼ばれています。 Activity の表示中にバックキーを押す Activity の表示中にバックキーを押して Activity を閉じました。 Activity にはもう戻ってこないので、 onDestroy() まで呼ばれ完全に破棄されます。 Activity の
iOS6でtransitionアニメーションが少し遅れて開始する問題 よくあるスワイプギャラリーを作成しているとiOS6でアニメーションが少し遅れて開始する問題にぶつかりました。 どういった感じかというとスワイプ終了時に以下のようにしてtransitionを利用して規定位置までアニメーションさせようとすると一拍あいてから動き出す。iOS5だとちゃんと動作します。 $("#carouselInner") .css("-webkit-transition","-webkit-transform 600ms ease") .css("-webkit-transform","translate3d("+x+"px,0,0)"); 色々調べていると以下のページに行き当たりました。 iOS6 html hardware acceleration changes and how to fix them
そんな訳で、普段何気なく使っているjQueryですが、そのセレクタAPIについて多少は知っておいたほうが良いよなということで、いくらか調べてみました。けっこう地味な内容なので、「へー、そんな風になってるんだぁ…」と軽く読み流していただければと思います嘘です。割と大事な内容なので、しっかりと把握しておくのがよろしいかと思います。 はじめに - jQueryのセレクタAPI jQueryでは、$('#hoge .fuga');というようにCSSのセレクタを用いてHTML要素を取得します。あまりにも便利な機能で普段意識することはありませんが、内部ではgetElementById();といったブラウザのネイティブAPIを駆使したり、JavaScriptゴリゴリのメソッドを呼びまくって指定どおりの要素を取得してきているわけです。こういった機能のことをセレクタAPIと呼びます。 セレクタAPIの内訳
lenticular.jsはiPhoneの傾きにあわせて表示を変える画像ビューワーです。 iPhoneなどのスマートフォンでは傾きを検出できる機能があります。それを使った面白い画像ビューワーがlenticular.jsです。 美女が布を巻いて立っています。マウスを動かしてみましょう。 マウスの動きにあわせてくるくると回ります。 左右はもちろん上下にも動きます。 こちらはおっさん。おっさんも動きます。 車。これは面白い見せ方です。 こちらはiPhone版。 格段に大きい写真でくるくる。 iPhoneで車を表示した場合。 タネを明かせば当然画像がたくさん作られています。 lenticular.jsはたくさんの画像をマウスや加速度センサーの動きにあわせて差し替えることで動きを演出しています。フレームをより細かくすればするほど滑らかに動くようになります。 lenticular.jsはJavaScr
jsdo.itで「新しい楽器を作ってください」というコンペをやってます。(10/24締め切り) このへんを見るといろいろ力作が投稿されているようです。 JavaScriptで楽器を作るなんて面白い企画、参加しないわけに行かないと思ってさっくり作ってみました。 Tonal Circle 発想としてはループシーケンサーみたいな感じで、ひとつのサークルにひとつのワンショットまたはフレーズサンプリング音が割り当たっていて、光の輪が回転して一番上に来ると音が鳴ります。サークルはドラッグ可能で、横方向に動かすとサンプリング音が切り替わり、縦方向に動かすとループの周期が変わります。サークルの新規作成はシングルクリック、削除はダブルクリック。 まあ、実際に触ってみると操作はすぐわかると思います。 今回は複数のブラウザに対応するためWeb Audio APIなどの濃い機能は使わずに、Audioオブジェクトを
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く