CSS で作るスマートフォン向け片手操作メニュー
ちょっとしたお遊びなんですが、普段は画面の下の隅に隠れてて、クリック （タップ） で展開、いくつかのショートカットメニューが表示される、しかもスマートフォンだと片手だけで操作しやすいみたいな UI を CSS と超簡単な JavaScript （jQuery 使用） で作ってみたので紹介。 久々にこの手のネタ書いた気がしますけども… ちょっとしたお遊びなんですが、普段は画面の下の隅に隠れてて、クリック （タップ） で展開、いくつかのショートカットメニューが表示される、しかもスマートフォンだと片手だけで操作しやすいみたいな UI を CSS と超簡単な JavaScript （jQuery 使用） で作ってみたので紹介。多分言葉で言っても伝わりにくいと思いますので実際のサンプルをまずは見てみてください。 CSS で作るスマートフォン向け片手操作メニュー サンプル 現在最新版の Firefox
新しい Facebook ページを試してみた
Facebook でちょっと前に導入された 「タイムライン」 が、Facebook ページの方にも適用されるっていうお話が最近話題になったりしていましたが、先ほど、Facebook の自分が管理してるページに行ったら、その新しいデザインのプレビューができますっていうお知らせが出ていたので早速試してみましたよ。 新しいFacebookページのご紹介 ： Facebook ある日、この Blog の Facebook ページに行くとこんなお知らせが… 3月30日に全面切り替えみたいですが、その前にプレビューができますよという話。個人のページにタイムラインが導入されたときと同じ流れですね。「詳しくはこちら」 を押せば、新しい Facebook ページについての説明が見られます。 ページのブランドを構築 ユニークな写真を追加し、ページのタイムラインに大切なニュースやアップデートを掲載しましょう。
Fullscreen API を簡単に試してみた
Web ページ内の任意の要素をフルスクリーン表示可能にする Fullscreen API ですが、お勉強ついでに簡単に試してみました。 ちょっと前、先月の話題になってしまうのですが、Web ページ内の任意の要素をフルスクリーン表示可能にする Fullscreen API に関連して、Mozilla が公開している Gecko:FullScreenAPI が更新されて Firefox Nightly で使えるようになったり、W3C からも Fullscreen （Editor's Draft） が公開されたりと色々動きが活発になってきましたので、いい機会ということで、お勉強ついでに簡単に試してみました。 例えば HTML5 で追加された video 要素は、今まで Flash などのアドオンに頼ってきた動画の Web ページへの埋め込み、再生を HTML 側で対応することを可能にしましたが、
Google+ プロフィールバナー画像作成用 PNG ファイル
Google+ のプロフィールページって、メインのプロフィール画像以外に最大 5つまでスクラップブック写真っていう画像を掲載することができるんですよね （プロフィールバナーと呼ばれているみたいですが）。で、ここに 1枚の画像を分割して掲載したかったので簡単にサイズ調べてスライス用のレイヤーを作ったんですが、折角なのでシェアしようかなと思います。 実際に設定するとこんな感じになります（画像クリックで実際のページが開きます）。下記はこの Blog の Google+ ページに設定してみた例です。 PNG でスライスレイヤーを設定済みですので、Fireworks で開いてもらって、スライスしたい画像に丸ごとコピペするなどしてもらえればあとは画像を書き出すだけです。 PNG ファイルのダウンロードは下記のリンクからどうぞ。 Google+ プロフィールバナー画像作成用 PNG ファイル （zip
HTML5 は SEO に有効なの？
「HTML5 でコーディングしたら SEO （検索エンジン最適化） 的に有利になりますか？」 っていう質問、たまに聞かれるんですけが、それに対する答えとして私がまとめて書こうと思っていた内容をすべて言ってくれてしまっている記事が Impressive Webs で投稿されましたので、便乗して簡単に訳しつつ紹介してみようと思います。 「HTML5 でコーディングしたら SEO （検索エンジン最適化） 的に有利になりますか？」 っていう質問、たまに聞かれるんですけどね。 個人的には "SEO のために" HTML5 にするか XHTML にするかなんて悩んでる暇があったら利用者に役に立つコンテンツの 1つでも考えた方がいいよと思うわけですし、聞かれたときはそのように答えているわけですが、折角なので簡単に考えをまとめて Blog に書いておいてみようかなと思ってダラダラと書き始めていたら、自分が
Google+ 「ページ」 が公開。ページの作り方と注意点
すでに色々なところで書かれてるので完全に乗り遅れた感はありますが、Google+ に追加された 「ページ」 機能で早速、会社とこの Blog のページを作ってみましたよ。 ということで、Google+ ページの作り方と、その時にやっておいた方がいい設定について簡単に解説してみます。 「Google+ ページ」で、新しいつながりを ： Google Japan Blog Google+ ページの作成 実際に作ったページは下記。 WWW WATCH ： Google+ デジパ株式会社 ： Google+ まずは Google+ ページに関して簡単に。Google オフィシャル Blog 等で案内されています。あと下記は YouTube の Google+ ページ、プロモーション用ビデオ。 「Google+ ページ」を開設するには、個人で Google+ のアカウントを作成したうえで、plus.
iOS Safari で border-radius : <percentage> が使えない件
いや、これは単純に私が知らなかったというか、普通に使えると思い込んでいただけなんですけどね。 前のエントリで 「HTML5 + CSS でコバトン描いてみた」 っていうお遊びを紹介したのですが、その後 iPhone / iPad で確認してみたらコバトンさんのお顔が四角い顔になっていて、そこで初めて気がつきました。結論から言ってしまえば単なる勘違いという間抜けなお話ではありますが、メモ代わりにエントリ。 2012年5月14日追記 iOS のバージョンアップで border-radius プロパティに 「%」 値が使えるようになりましたので文末に関連エントリを追加しました。 iOS で見たらこんな感じになっていました… で、冷静に考えれば、PC 版 Safari も 5.0 系 （Webkit） までは 「%」 値が使えなかったので、同じ Webkit ベースの iOS 版で使えないのは当た
HTML5 + CSS でコバトン描いてみた
なんか、CSS で色々描いてみた的なやつを見てたら自分も描いてみたくなったので、埼玉県民にはおなじみの鳥さんマスコット、「コバトン」を HTML5 と CSS で描いてみるテスト。ちなみにコバトンが浦和レッズバージョンなのは個人的な趣味の問題です... なんか、CSS で色々描いてみた的なやつを見てたら自分も描いてみたくなったので、埼玉県民にはおなじみの鳥さんマスコット 「コバトン」 を HTML5 と CSS で描いてみるテスト。 単純に 空の div 要素を並べて CSS で整形して position: absolute; でもいいんですが、今回は CSS 無しの、HTML としてもある程度意味のわかる文書になるように、元の HTML も書いてみました。 あまり時間をかけずにとりあえずという感じで描いて、細かい検証とか、ソースコードのブラッシュアップとかしていませんので、絵としての再現
非同期コードで Google +1 ボタンを設置してみた
表示速度を従来より 3倍高速にした新しい Google +1 ボタンが発表されましたが、同時に追加された非同期スニペットに関して、それを有効にするためのソースコードが、現時点ではボタン設置コード生成ページの言語設定を英語にしていないと表示されないようなのでメモ。 先日 Google は、「Official Google Webmaster Central Blog」 で、「Google +1 ボタン」 のレンダリング速度を今までよりも 3倍高速にしたと発表しました。もともとが遅すぎたんだよという指摘はあるものの、「通常の 3倍」という響きは魅力的… The +1 Button: Now Faster ： Official Google Webmaster Central Blog さて、この 3倍速い Google +1 ボタンに関しては、Google さんが勝手にアップデートしてくれるの
HTML5 でやりがちな間違い
HTML5 Doctor で 「Avoiding common HTML5 mistakes」 という記事が上がっていましたので稚拙ではありますが翻訳など。HTML5 でマークアップする際にやりがちな間違いをいくつか挙げて、さらに正しいマークアップ例も紹介くれていますので、参考にしてみてはいかがでしょうか。 HTML5 Doctor で 「Avoiding common HTML5 mistakes」 という記事が上がっていましたので稚拙ではありますが翻訳など。HTML5 でマークアップする際にやりがちな間違いをいくつか挙げて、さらに正しいマークアップ例も紹介くれていますので、参考にしてみてはいかがでしょうか。 Avoiding common HTML5 mistakes ： HTML5 Doctor 翻訳といっても要約みたいな感じですので、書いてあることをそのまま日本語にしたものではあり
HTML5 におけるアウトラインに関して簡単解説
HTML5 におけるアウトラインに関して簡単解説 HTML5 で重要なアウトラインに関して、なるべくわかりやすく簡単に解説してみます。 最近、ヨモツネットさんで 「HTML5 でのセクションの誤用にご注意」 なんて記事が出てたり、ちょうど HTML5 Doctor でも 「Document Outlines」 と題してアウトラインの解説記事が上がってたりするので、この 「アウトライン」 について簡単にまとめてみようと思います。解説って言うほど偉そうなものではありませんがなるべくわかりやすく書いてみようかと。 アウトラインを理解することは、HTML5 でマークアップする際にとても重要になりますので覚えておくとよいと思いますよ。 アウトラインとは？ アウトラインとは見出し、フォームタイトル、テーブルタイトル、その他ラベル付けされた要素によって生成される文書構造のこと…なんて書くととても難しそう
5分でわかる Facebook ページへのタブ追加
リニューアルと同時に、Facebook ページを作ってみたんですが、タブ追加機能を使って、Facebook ページにアクセスした際に最初に表示されるページをカスタマイズしてみましたので、その作り方や設定方法などを簡単にご紹介。恒例（謎）の 5分でわかるシリーズ。 Facebook ページは iframe を使用して、外部のサーバにあるコンテンツを比較的簡単に読み込める仕様になっていますが、これを利用することでオリジナルのページを自分の Facebook ページにタブとして表示することができます。 Facebook ページにオリジナルのページを読み込むには、最低限下記の準備が必要です。 Facebook ページの開設 （当たり前ですが） Facebook への開発者登録 外部に公開された PHP が動作する Web サーバ （共有で構わないので SSL が利用できる必要あり ※後述） コンテ
IE9 日本語正式版入れてみた
Internet Explorer 9 （IE9） の日本語正式版がリリースされましたのでとりあえず入れてみた報告を。 Internet Explorer 9 （IE9） の日本語正式版がリリースされましたのでとりあえず入れてみた報告を。日本語版以外は全世界で先月の 14日に公開されていましたが、日本語版のみ 3月11日に発生した東北地方太平洋沖地震に配慮 （ネットワーク回線への負荷軽減、企業活動における節電への配慮） してリリースが延期されていました。 ちなみに、Microsoft が発表したデータによると IE9 の提供開始から24時間で 235万件のダウンロードがあったとのこと。少し遅れてリリースされた Firefox 4 正式版はリリース後 24時間で 710万ダウンロード （Fx3 の時は 830万） だったらしいので、それと比べるとかなり少ないですが、これは IE9 の場合、動
Firefox 4 正式版入れてみた
昨日の夜ですが、Firefox 4 の正式版がリリースされましたので入れてみたところ、まぁ予想通りですがアドオン関連で色々と大変な感じになりましたのでご報告まで。今回は別プロファイルを作成してそちらでインストールしました。なので、Firefox 3系と 4系を共存させる方法も参考までに書いておきます。 色々と大変な時期ですが Blog はなるべく通常モードで。さて、昨日の夜ですが、Firefox 4 の正式版がリリースされましたので入れてみたところ、まぁ予想通りですがアドオン関連で色々と大変な感じになりましたのでご報告まで。 ちなみに、ベータ版で 1回試しインストールをした後は、正式版のリリースまで特に試したりしていなかったので Firefox 4 は今回の正式版がほぼ初体験でした。さすがに現在のメイン環境をいきなりアップデートするのは冒険すぎるってことで、今回は別プロファイルを作成してそ
5分でわかる Instagram の始め方
今年の10月に一般公開されてから、ものすごい勢いで利用者が増えている写真共有サービス （というかアプリ）、「Instagram」。最初は写真とか特に趣味でもないし、別にいいかと思ってスルーしてたんですが、Twitter のタイムラインでもちょくちょく見かけるようになって気になってきたので使ってみました。そしたらこれ、面白いですね。ハマりますわ。 私も写真は撮りますし、興味はあるんですが、本格的に写真にのめり込んでいるわけでもないし、「私、写真が趣味です」 って人にいう程ではないわけですが、それでもこの 「Instagram」 にはハマりました。なんていうか、写真を撮って人に見せるっていうことの敷居を下げてくれるというか、写真を撮ることが楽しくなるアプリですよこれ。 私が面白いと思ったポイントは2つ。 アプリに搭載されたフィルターのマジックで普通に考えれば何でもない写真が、なんかいい感じにな
W3C Cheatsheet が HTML5 に対応
去年、W3C が公開していた 「W3C Cheatsheet」 ですが、今回更新されて HTML5 にも対応し、より使いやすくなったので紹介してみます。 去年、W3C が公開していた 「W3C Cheatsheet」 ですが、今回更新されて HTML5 にも対応し、より使いやすくなったので紹介してみます。 残念ながら CSS3 のプロパティには未対応なのですが、HTML や CSS 等に関してさっと調べたいときにはとても便利だと思いますよ。iPhone や Android 携帯などでは Web アプリケーションとして動作するように作ってありますので、それらモバイル機器をお持ちの場合は、ブックマークしておくといいと思います。（iPhone なら 「ホームに追加」 しておくといいですよ。） W3C cheatsheet HTML5 in W3C Cheatsheet - W3C Blog W3
Firefox 4 がサポート予定の calc() とは
Twitter でもポストしましたが、Mozilla Hacks で次期 Firefox 4 における calc() 機能の実装についてアナウンスされていました。calc() 自体は CSS3 で策定中の機能としてかなり前から存在しますが、まだサポートしているブラウザがないので、馴染みはないかもしれません。Firefox にしてもまだサポート予定の段階ですし、正式に使えるようになるのは先の話ではありますが、calc() を使うことでどんなことができるようになるのか簡単に触れてみたいと思います。 Twitter でもポストしましたが、Mozilla Hacks で次期 Firefox 4 における calc() 機能の実装についてアナウンスされていました。 calc() 自体は CSS3 で策定中の機能としてかなり前から仕様が存在しますが、まだサポートしているブラウザがないので、馴染みはない
個人的お気に入り iPad App 30選 （1/3）
iPad の日本発売開始から週も空けて、お祭り騒ぎもひと段落しましたね。iPad が手元に届いてからぼちぼち色々な App を試してみたりしていたのですが、iPad を使い始めて 5日間でひとまず定着した App を紹介してみます。 ただ、まだ iPad 用の App は数が少ないので、他で紹介されている App とかぶりますね。目新しい物はないかもしれませんが気にせず行きます。 現在のホーム画面はこんな感じ。まだまだ App は少ないのでホーム画面 3枚で収まってます。（画像クリックで拡大します） その中から、特にいいなと思った App を 30個ピックアップして簡単な使い方といっしょに紹介してみます。ちょっと数が多いですので、3回に記事を分けて更新します。まずは最初の 10個。 1. Evernote iPhone / iPad 両対応 （無料） iPhone の方でも使っていますが、
Google がオープンな動画規格 WebM を発表
カリフォルニア州サンフランシスコで開催中の開発者会議 「Google I/O」 で Google がビデオコーデック 「VP8」 をベースにオープンなビデオコーデック 「WebM」 を発表したとのことなのでとりあえず簡単にメモ。すでに WebM Project のサイトも開設され、情報提供が始まっています。 The WebM Project HTML5 で video がサポートされて、Flash などのプラグインなどを使用しなくても簡単に動画の再生が可能になる予定ですが、ちょっと問題なのがその動画のコーデック （簡単に言えば動画の規格） をどうするかという問題。コーデックの優劣とかの問題と言うよりも、ライセンス形態とそれに関連してブラウザのサポート状況がまちまちになってしまっているのが問題で、これまで 「H.264」、「Ogg Theora」 の2つのコーデックのうち、どちらをサポートす
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
