5分でわかる Swarm の使い方と Foursquare の変更点
Foursquare がリニューアルし、従来のチェックイン機能などを新しいアプリ 「Swarm」 に分離。Foursquare はスポット検索に特化したアプリとなりました。ここでは 「Swarm」 アプリの使い方と Foursquare の変更点を解説しています。 ある場所への、所謂チェックインを共有するロケーションベースのソーシャル・ネットワーキング・サービスとして人気の Foursquare は日本でも使っている人が多いと思います。 今月 1日ですが、その Foursquare が大きな方向転換をし、Foursquare アプリから主要機能だったチェックイン機能を削除、この機能を独立したチェックイン専用アプリ 「Swarm」 に移行、従来の Foursquare アプリはクチコミによってお店やスポット情報を検索するツール （Yelp とか 30min. みたいな感じ） に特化すると発表
iPhone 4S から iPhone 5 への持ち込み機種変更 （ソフトバンク） やってみた
うっかり買ってしまった iPhone 5s のおかげで余った iPhone 5 を、iPhone 4S を使用中の家族に譲るにあたって、SIM カードの切り替えをソフトバンクショップでやってもらったので、その際の手続きや費用を簡単にまとめてみました。 もともと iPhone 5 を使っていた身としては、今回新しく発表された iPhone 5s / 5c にはそれ程積極的に買い替える意思は持っていなかったんですけどね...... なんか iPhone 5s の予約開始日にふらっとソフトバンクのオンライン予約受付に行って iPhone 5s / スペースグレイ （フロントパネルは黒じゃないと嫌だったんで最初から買うならこれ一択でした） を予約しちゃったら、スペースグレイは在庫が比較的潤沢だったってことで、数日後には本申し込みの案内が来てしまい、気がついたら手元に iPhone 5s が。 しか
Web デザイナーさん向け Grunt を使った コーディング作業の効率化、はじめの一歩 | WWW WATCH
フロントエンドの開発を色々と捗らせてくれる Grunt について、初めて Grunt を使うならこれだけまずはやってみたら？ という入門的な解説記事を書いてみました。 この記事は公開からかなりの時間が経過して内容が古いのと、Gulp を使ったフロントエンド開発環境構築について新しい記事 「Web サイト作るお仕事をしている人向け Gulp で作るフロントエンド開発環境」 を書いていますのでそちらをご覧ください。 Grunt の導入記事なんか珍しくもないし、色々な方がわかりやすい記事を過去にも書かれていているので今さらではありますが...... とはいえ、まだ使ったことがない人もいるだろうということで、「Grunt って何ですか？」 とか「使ってみたいけどよくわからない......」 なんていう Web デザイナー （主に HTML や CSS を書くフロントエンドな人） さん向けに、初めて
background-blend-mode プロパティで背景をブレンドしてみよう
CSS Property Advent Calendar 2013、6日目の記事です。「CSS のプロパティに関することだったら何でも OK です」 とのことでしたが、広く使われているプロパティについて今さら書いても仕方ないし、多分他の人とかぶるしってことで、最近になってブラウザが対応したあまり一般的じゃないプロパティを選択してみました。 それが今回取り上げる、background-blend-mode プロパティです。 Compositing and Blending Level 1 W3C Last Call Working Draft 10 October 2013 3.4.3. The 'background-blend-mode' property ： Compositing and Blending Level 1 background-blend-mode プロパティとは？
Twitter に 「カスタムタイムライン」 機能が追加される
Twitter が新しい機能として 「カスタムタイムライン （Custom timelines）」 をリリースしました。日本で言えば Togetter のような、ツイートのまとめを作ることができます。 Twitter が新しい機能として 「カスタムタイムライン （Custom timelines）」 をリリースしました。現状では、TweetDeck でのみ、カスタムタイムラインの作成や管理が可能な状態ですが、すでにユーザーには提供が開始されています。 Custom timelines in TweetDeck ： Twitter Blogs 簡単にいえば、あるトピックス、イベント、製品などについて、ツイートのまとめを作り、それを公開することができる機能ですので、日本で言えば Togetter のような、ツイートのまとめを作ることができます。 自分の環境でも利用できるようになっていたので早速
Geolocation API 仕様が W3C 勧告に
すでに主要なブラウザでは実装済みなので、今さら感はありますが、Geolocation API が 10月 24日付けで W3C 勧告になりました。 Geolocation API の最初の草案 （Working Draft） が公開されたのが 2008年ですから、約 5年かけて勧告までたどり着きましたとさ。 Geolocation API Specification is a W3C Recommendation ： W3C News Geolocation API Specification W3C Recommendation 24 October 2013 Geolocation API とは Geolocation API は JavaScript でモバイル端末の位置情報を取得するための API。現在使用されているほとんどのモバイル端末は、GPS や無線 LAN 電波による位置測
新著 「スマートフォンサイトUI/UXデザイン実践テクニック」 が7月26日発売
スマートフォンサイトやアプリケーションの UI 設計やユーザビリティについての基本的な知識やテクニックについてまとめた新著 「スマートフォンサイトUI/UXデザイン実践テクニック」 が 7月26日に発売されます。 今週の金曜日ですが、7月26日に新しい著書、「スマートフォンサイトUI/UXデザイン実践テクニック」 がマイナビさんより発売されます。 今回も前著同様 2人での共著ですが、私はメインではなくサポート的立ち位置でのお手伝い執筆。メインは @hibiki443 です。 今回の書籍はタイトル通りなんですが、スマートフォンに的を絞って、Web サイトやアプリケーションの UI 設計やユーザビリティに関する考え方や実践的なテクニックを解説する内容になっています。 スマートフォンサイトやアプリケーションの開発をこれからはじめる初級者の方を対象に、これは知っておいた方がいいよってことを幅広く扱
Pure を使って 5分でレスポンシブな Blog テンプレートを作る
Pure は Yahoo! が公開した CSS フレームワークですが、試しに使ってみましょうということで、自分で書くスタイルは極力少なくして、簡単に Blog のテンプレートっぽいものを作ってみました。 さすがに 5分はウソです すいません。でも簡単でしたよ。 Pure ： A set of small, responsive CSS modules that you can use in every web project. Pure とは Pure は、簡単に言ってしまえば Twitter が公開している Bootstrap などと同じ、CSS のフレームワークですが、CSS のみに絞ることで、その容量は最大で 5.7KB とかなり軽量。Yahoo! の CDN から読み込めば、gzip された状態で読み込めます。 また、各機能を個別に読み込むことも可能ですので、必要な機能だけを選択す
Twitter カード 7タイプの使い方をカード種別ごとに解説するよ
Twitter カード 7タイプの仕様を Twitter の公式ドキュメントから翻訳して解説します。公式ドキュメントから抜粋して日本語で書き直していますので完全な翻訳ではありません。 Twitter Cards （Twitter カード）、この Blog でもかなり前から指定して使っていますが、7種類のカードから選択できたり、それぞれに指定できる値が異なってたりしてわかりにくいっていう声を聞きましたので （公式な日本語ドキュメントも今のところないし）、簡単に各カード種類別の仕様をまとめてみました。 Twitter Cards は、Facebook や Google+ などが採用している、OGP （Open Graph Protocol） を利用して、ウォールやタイムラインにリンクを投稿する際の表示内容を指定するのと同じ。それの Twitter 版です。タイムラインに URL が投稿されたと
HTML5 input type="range" で作る 「へぇボタン」
HTML5 で input 要素の type 属性として追加された 「range」 を使って、「へぇボタン」 を作ってみました。 HTML5 で input 要素の type 属性として追加された 「range」 は、数値を表す文字列をセットするための、スライダー形式やそれに準じた入力コントロールを作りますが、この input type="range" でちょっとしたお遊び。 昔の人気番組、「トリビアの泉」 でおなじみの、「へぇボタン」 を、input type="range" と CSS、簡単な JavaScript で作ってみました。完全な再現ではなくて、ボタンを押すと input type="range" で表示したスライダーの数値が上がるっていう、ちょっとだけ実用的 （？） なサンプルです。 実際のサンプルは下記に。 HTML5 input type="range" で作る へぇボ
Google Drive に Web ページから簡単にファイルを保存するボタン
Google Developers Blog で、Web ページ上にある画像やファイルを、ワンクリックで Google Drive に保存できるボタン、「Save to Drive」 ボタンが紹介されていました。 ボタンを設置する簡単なコードを追加するだけで、すぐに自分の Web ページに、このボタンを設置することが可能です。 An easier way to save files to Google Drive ： Google Developers Blog Starting today, Drive users can use the "Save to Drive" button to do exactly that. The "Save to Drive" button is an easier way to save files directly from a website.
Selectors Level 4 の Working Draft が更新される
5月 2日付けですが、Selectors Level 4 の Working Draft （草案） が更新されました。 Selectors Level 4 自体は 2011年 9月 29日の Selectors Level 3 仕様の勧告とあわせて最初の Working Draft が公開されていますが、そこから今回で 2回目の更新となります。 Selectors Level 4 W3C Working Draft 2 May 2013 Working Draft 内の、「Selectors Overview」 に Selectors Level 4 を含めた、セレクタの一覧がありますので、下記に引用しつつ簡単に日本語での解説も付け加えておきましたが、Selectors Level 4 ではセレクタがより一層便利になっていますので、早いところブラウザ側で実装されるといいですね。 ちなみに、
Google+ は OGP より Microdata を優先するみたい
Google+ にリンクを投稿する際、ページに指定された OGP よりも Microdata の方が優先されることで起こった問題と、その解決方法について解説します。 この Blog では、Google+ ページも運用していて、記事を更新した際にそっちにも投稿しています。 ところが、ちょっと前からリンクを投稿したときに、OGP （Open Graph Protocol） に指定した概要文 （og:description の値に入れてるテキスト） とかが無視されて、Blog 自体の概要が出ちゃって、なんでかなぁって思いながらも今度調べよってことで放置していたわけですが、さっきちょっと時間を見つけてテストしてみたら、どうも Microdata の指定の仕方でこういう現象が起こるらしいことがわかったので、共有します。 具体的にどういう現象が起こるか OGP に指定した概要文が無視される件ですが、例
はてブが使いにくければ User CSS 書けばいいじゃない
はてなブックマーク （はてブ） のリニューアル後、確かにさらーっと一覧を眺めたい場合には見づらくなりましたよね。サムネイル邪魔だとか、色々ありますけども、サービス提供側も色々理由があってデザインを直してるんでしょうし、デザインが大幅に変わったあとは今までのに慣れてた関係もあって使いづらいわ～的なお話が出てくるのは仕方ないこと。 で、文句言っても元のデザインに戻るわけじゃなし、どうしても見づらいっていうなら自分で直しちゃえばいいじゃんってことで、はてブ用の User CSS 書きましたのでシェアします。 短時間でチャチャっと書いたので超適当ですが、余計なもの消して、元の見た目みたいに単純な縦並びにし、1ページ当たりの表示数を増やしてます。 下の CSS は Firefox で Stylish アドオンを使ってる自分の環境で書いたのをそのままコピペしただけですので、他の環境で使うときは適当に直
Microdata を使ってみよう。サンプルソースで学ぶ Microdata
HTML5 Advent Calendar 2012、7日目の記事として、Microdata （マイクロデータ） に触れてみます。サンプルソースを中心に、実際のページでどのように使えるのかを示しました。これから Microdata を使ってみたいという人に少しでも参考になればと思います。 HTML5 Advent Calendar 2012、7日目の記事です。なんか軽い気持ちで書いてみますとか言ってしまったんですが、緊張しますね… さて、タイトルの通りなのですが、HTML Microdata （マイクロデータ） について簡単に触れてみようかなと思います。この辺の話題に関して、Microdata とは何かとか、詳しい解説はすでに色々な方が書かれていますのでそちらを見ていただく （文末にまとめてあります） として、この記事では、そういう解説は置いといて、Blog や、企業の Web サイトなど
充電機能付きのタブレットスタンド自作してみた
増え続けるタブレットを収納しつつ充電できるスタンドを探していたんですが、なかなかイメージ通りのがなかったんで、じゃあ作ろってことで、アフター5 DIY。「まな板スタンド」 をベースに改造したものですが、折角なので公開します。 自作といっても 「まな板スタンド」 をベースに改造しただけなんですけどね。 現在、我が家には初代の iPad と、第3世代 iPad、あと日本での発売開始と同時に勢いで買っちゃった Nexus 7 の3枚のタブレットがあるんですが、Kindle Paperwhite も小説を出先で読むのにいいなぁとか、iPad mini とかもね （注文してないけど）… で、増え続けるタブレットを収納しとく場所として、あと充電も一緒にできるような方法はないかなと考えていたんですが、なかなかイメージ通りのがなかったんで、じゃあ作ろってことで、アフター5 DIY。折角なので公開します。
Web フォントでアイコン表示。 Font Awesome 使ってみた
Blog のデザインをリニューアルしました報告でもちょっと書いたんですが、アイコン関係を Web フォントを使ってやってみました。その時に利用させてもらったのが 「Font Awesome」 でして、今回はその簡単な使い方について書いてみようと思います。 Font Awesome, the iconic font designed for use with Twitter Bootstrap Font Awesome は簡単に言ってしまえば、Twitter Bootstrap のアイコンを Web フォントで扱えるようにしたもの。Twitter Bootstrap のアイコンは CSS Sprite で利用できるようにひとまとめになった 「画像」 として提供されていますが、Web フォントとして提供されることで、よりサイズ、カラーなどを柔軟に扱えるようになっています。 Font Aweso
Firefox 15 （現 Nightly） にレスポンシブモードがついたよ
現在、Nightly として提供されている、Firefox 15 ですが、デベロッパー向けツールに、「Responsive Mode （レスポンシブモード）」 と 「Layout View （レイアウトビュー）」 という 2つの便利そうな機能がついたそうなので紹介。 Responsive Mode and Layout View in Firefox 15 ： by Paul Rouget レスポンシブモードに関しては動画で紹介されていましたので貼っときます。「ツール （Tools）」 メニューの「Web 開発 （Web Developer）」 から選択できます。 レスポンシブ Web デザインで、ブレークポイントごとにデザインの変化を確認したければ、単純な話、ブラウザのウィンドウサイズをぐりぐり動かせばいいんですが面倒だし、正確なウィンドウサイズもわからないですが、このモードに切り替えれ
iOS Safari で border-radius に 「%」 値が使えるようになってた件
去年の話ですが、「HTML5 + CSS でコバトン描いてみた」 っていうエントリを書いたんですが、その際、iOS の Safari では border-radius プロパティに 「%」 値が使えないんですねっていう追加エントリも合わせて書きました。ところが昨日試したら普通に使えるようになってましたってことで、フォロー記事です。 去年の話ですが、「HTML5 + CSS でコバトン描いてみた」 っていうお遊びを紹介するエントリを書いたんですが、その後 iPhone / iPad で確認してみたらコバトンさんのお顔が四角い顔になっていて、あぁ。iOS の Safari では border-radius プロパティに 「%」 値が使えないんですねっていうエントリを追加で書きました。 iOS Safari で border-radius : <percentage> が使えない件 で、そのまま
CSS で作るスマートフォン向け片手操作メニュー
ちょっとしたお遊びなんですが、普段は画面の下の隅に隠れてて、クリック （タップ） で展開、いくつかのショートカットメニューが表示される、しかもスマートフォンだと片手だけで操作しやすいみたいな UI を CSS と超簡単な JavaScript （jQuery 使用） で作ってみたので紹介。 久々にこの手のネタ書いた気がしますけども… ちょっとしたお遊びなんですが、普段は画面の下の隅に隠れてて、クリック （タップ） で展開、いくつかのショートカットメニューが表示される、しかもスマートフォンだと片手だけで操作しやすいみたいな UI を CSS と超簡単な JavaScript （jQuery 使用） で作ってみたので紹介。多分言葉で言っても伝わりにくいと思いますので実際のサンプルをまずは見てみてください。 CSS で作るスマートフォン向け片手操作メニュー サンプル 現在最新版の Firefox
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
