google font APIとは、サーバーにフォントを置いておき、設定をちょちょっとすることで、ユーザーのパソコンに入っていないフォントでも、そのサーバーからフォントを読んできて、指定されているおしゃれな感じのフォントにしてくれる、webフォントというものです。説明わかりにくーｗ
詳しくは前回の記事読んでください。
と言っても前回の記事もそんなにわかりやすくは書いてませんけど…

上記の画像を見ていただくとおわかりになると思いますが、
左部分で調整をします。そうすると、右部分にスタイルシートの読み込みと、フォントのスタイルが表示されます。
それを指定したいフォントのCSSに貼るだけ！
簡単ーー！

こんな感じで、簡単に作ることができますー。

googlefontAPIを使ってみたーいな人は是非。

■font previewer

チョー早でツイッターとかメールとかブログとか色々UPできます。
便利～！lightshotも便利極まりないけど、コレもなかなか。

Awesome Screenshot

■レシピサイトを構築しています。
＜やりたいこと＆環境＞
・カスタムフィールドテンプレートプラグインを使用している。
・投稿する際、自動的にスニペットが入るようにしたい。
・レシピサイトなので、タイトル、写真、カロリー、所要時間等を表示させたい
■ここを参考にテンプレートにマークアップしていく。
・RDFaでやるとW3Cでエラーがでるのでmicroformatsでやる。RDFaでやっちゃったよー早く言ってよもー。
■wordpressの場合記事での画像投稿で投稿される画像にその都度タグを入れるわけにいかないので、自動でマークアップしなくてはなりません。
・functions.phpに書いちゃいます。画像の挿入時に自動でタグを挿入します。
参考サイト：WordPress のエディタに埋め込むメディア用タグを自動編集する

完了したら表示されるかどうかテストしてみます。
■スニペットがみられるかどうかテスト
■OKそうだったらサイトに申請する。

下記リンクは全て別窓で開きます。

■GoogleドキュメントにPDF、画像内の文字を抽出できる機能が登場
なんかテキスト文書をFAXで送られてきちゃったときOCRとして使えるかも。

■HTML5 Canvas Cheat Sheet v1.x
HTML5のチートシート。色々出来るー。すごいなー。

■CSS3で書かれたicon
画像使ってないとかすごすぎる。
safariで見ると素晴らしいです。iphoneでも見られる。
chromeさん崩れます。
▼safariとIE8で比較。とりあえずIE8ひどすぎますｗｗ　

■ChromeがアメリカのブラウザシェアでもSafari超えを達成
1位 IE
2位 firefox
3位 chrome
4位 safari

逆に、IEが52％もいる。半数以上がIEを使っているんですね。
しょうがないかー。日本はどうなのかな。
と思ったら記事がちょうどでました。

■IEのブラウザシェア増加に転向、IE6も増加
IE6、増加・・・だと・・・？
なんで増加したの？ねえ、なんで？
9年前の腐った牛乳を飲みたいの？メリットはあるの？

■「セカイカメラ」のエアタグでバリアフリー情報を発信――佐賀県嬉野市
新しい町おこし的で面白いですね。
なんか、宝探しみたいなイベントにつかえそうだなあ。

■何もないテーブルの上に立体映像が浮かび上がる　NICT「fVisiOn」
すごいなー。映画の世界だなー。未来はそういうテレビになっていくのかな。

■“食べるラー油”とベーコンがベストマッチのパスタ – ファーストキッチン
おいしそうすぎる。今度作ってみよう。

■WEBのユーザー動向を確認できるヒートマップが作成できるサービス色々「7 Incredibly Useful Tools for Evaluating a Web Design」
今度じっくり試す。

■最近これにはまっています。グルト
下から勢い良く指で押し上げて吸っていったら、顔にビシャッとかかった。
なんのAVだよ！ってひとり突っ込みした。（ごめんなさい）
ゆっくり吸いましょう。

■iphone関連のトランスミッターやらお風呂のドアスピーカーやらジョギング用のフォルダーやらケースやらをご購入した。
■他にも買うものあったはずなんだけど、なぜかiphone関連しか買ってないことに気づく。
■明日届く～。
■お風呂のドアスピーカーちょー楽しみ。
■妹が今週来週の勢いで出産予定。
■無事に産まれろー！
■産ませろー！

ではまた。

■【Fireworks】圧縮率による JPEG で文字もきれいに書き出す
これ、使える・・・！

■iOS4を使えば、iPhoneのメモがGmailと同期できる
自動的にGmailに送信されます。メモって買い物メモぐらいしか使ってない・・・他にも使うようにしよう。

■多彩な映像をiPhoneのみで制作できるビデオアプリ紹介
ついにきましたか・・・！ビデオ編集アプリー！

■覚えておくと役立つ！ GoogleサービスのショートカットやTipsいろいろ


すごい便利じゃないっすかぁ！

■[CSS]スタイルシートをほんの少し軽量化する10のTips
article { background-color: #ffffff; }
より
article { background: #fff; }
の方が軽いんですね・・・！

軽さにも影響するんですね。
最後のセミコロンを省略していいとか。
ショートハンド。
スペースをなくしてつなげるとかって、あとからカスタマイズや修正をしたり、他人が見た場合、見にくいと思うけどどうなの。私だけ？

■マイクロソフト、HTML5がより早いInternet Explorer 9 Platform Preview 3をリリース

やっと対応したものの、まだまだ普及していないvista or windows7のみ。
なにそれー！

■Google HTML5まとめサイト、HTML5Rocks登場
どんどん普及しろー！もっとやれー！

■jsdo.it
html5,css3,javascriptをみんなで共有したり編集したり質問したりするサイト。
勉強になるーー！

↑左からいきます！

※リンクは全て別ページで開きます！

■QR-Code Tag Extension
現在見てるページをQRコード化してくれます。
携帯にメールで送って～とかめんどくせー！な人向け。

■Lightshot (screenshot tool)
神エクステ。
部分的なスクリーンショットも全体的なスクリーンショットも撮れる、保存できる、サイズ図れる、twitter,facebookに投稿できる、画像編集できる等々すべてWEB展開の素晴らしいエクステです。
firefoxのエクステもあります。インストール型もありますYO！

■goo.gl URL Shortener
ショートコードを作ってくれます。
twitterでURLの文字数を少なくするタメに使ってたんですが、後で紹介するtwitter用のエクステあるからもういらない・・・！
でも、1クリックでショートコード化できるのでおすすめです。

■Google bookmarks
googleのbookmark用。
googleのノートブックというサービスに反映されます。
使い勝手が、google readerと一緒なので、google readerのヘビーユーザーとしては非常に見やすい。
このエクステでは内容もブックマークするだけじゃなく、引っ張り出せるのでノートブックはあまり開く機会ありませんけど。
色々サービス使うより、メインのアカウントとして使っているgoogleで集約しておくのがやっぱり一番いいかなぁ。と思ってます。
最近色んな所にブックマークしてわけわかんなくなり気味。
色んなブックマーク自体をブックマークしておかなきゃいけない、なんてことにならないようちゃんと使い分けをしておかなきゃですね。

■Clip to Evernote
ご存じの方も多いと思いますが、こちらは、ブックマークというより、ノート。
保存しておきたい内容をコピって保存しておける。
iphoneにもevernote用アプリがあるので、どちらでも見たい時にはここに保存したり。写真とかをiphoneからアップロードとか。
また、iphoneでも色々なアプリからevernoteへの保存というような連携も増えてきています。
色々使い方もあるので、気になった人は使ってみてください！

■*Split Screen*
便利っぽい！！と思って入れたものの全く使っていないデュアル画面エクステ。

こんな感じになります。
何に使うか、というと、エクステダウンロード画面にあるような感じで、動画見ながら調べ物～みたいな感じで使うとイイんだとおもいます。

■Pendule
WEB仕事人さんは便利だろうエクステ。
カラーピッカーだとか、CSSのチェックだとか、ルーラーとかソースとか色々な機能がついてます！
カラーピッカーしか使ってなかった・・・！

■csscan
CSSとSCANをあわせてCSSCANみたいな。
文字の通り、CSSを見るエクステです。
赤の点々で囲まれてざっくりと要素を見たいときに使ってます。

■Google Mail Checker Plus
これもかなり使い勝手がいい神エクステ。
Gmailをわざわざ開かなくても詳細が見られたり、既読にしたり削除したり、返信したりできます。
メールが来ると、色がついてメールが来たよアピールな感じでブランブランします。

■Chrowety
twitter用エクステ。
デザインがかわいいです。返答しやすいです。
リフレッシュ機能さえつけてくれれば完璧なんですが。

■Google Reader Checker
google readerはタブ固定で常に開いてるクセになぜか入れてるgooglereaderの件数表示エクステ。
よく考えたら要らない気もするわ。

■Google Tasks
googleのカレンダーにあるTo Doを表示、追加、削除できるエクステ。
これでタスク管理して、やることを思い出してます。
シンプルエクステですが、非常に使いやすー。

↓その他アイコンになってないエクステたち

■Speed Dial
新規にタブを開いたときに、よく開くページを表示させておくエクステ。
MMBを登録しておきましょう★

■Smooth Gestures
マウスゼスチャーで素早くページ移動できるエクステ。
覚えたらちょー早です。
クリックしながら左にスライドで前のページに戻るしか使ってな…パーン（銃声

■Google Quick Scroll
検索した用語がどこにあるのか教えてくれるエクステ。
どこに検索した語句書いてあんのよぅ！って言う時に役立つエクステ。
探す手間が省けます！！

■Copy Without Formatting
テキストデータのみコピーするエクステ。
文字データ、太字～とかそういうのをナシにしてテキストデータのみコピーします。

■FastLookUp for Chrome
この単語なにー！って言うときに翻訳してくれる
すごい便利エクステ。

■AutoPagerize for Chrome
googleとかの次へ的なものが無くなるエクステ。
ずらーーっと同じページに表示してくれます！
ただし。
ブログだとかもズラズラ出てしまうので、コメントの書き込み欄がおかしな事になったりする場合があります。
その場合は設定ページで例外アドレスを入れる必要があります。
私は入れないでゴリ押しで使ってますけど。

■Chrome Sniffer
何を使っているのかを見るエクステ。
このサイト、wordpress使ってんな、とか、joomla入れてんな、とかanalytics入れてんな、とか色々見てニヤニヤするエクステです。

■SmoothScroll
その名の通りスムーススクロールです。
スルーっと動きます。あまり実感ないけど設定の仕方が悪いのかしら。

■Google Account Switcher
googleの複数アカウントスイッチャーエクステ。
５アカまでOKだそうです。ID,PWともに保存してくれているのですごい便利ー！
ただし、複数人が操作するPCの場合には気をつけてくださいね。

———————————————————————-

以上です。
なんか軽い気持ちで書いたら結構いっぱい入っててウワってなりました。
いらないの消そう・・・。
しかし、このエクステの同期機能が正式リリースされたら便利極まりないじゃないー！
開発版のchromeさんでは同期機能がすでに使えるそうなので、先走っちゃいたい人は是非。

ちなみに、chromeさん便利ショートカット
■ctrl+shift+T
閉じちゃったページを開く。
10ページまで記憶しています。うっかり閉じちゃったページも開けますし、そのページで見た履歴も残ってる！最高！
■ctrl+E
検索バーにフォーカス。そのまま文字を打ち込んでパーン！すれば検索結果。
■ctrl+N
新しいウィンドウ
■ctrl+T
新しいタブ
■ctrl+B
ブックマークバーの表示非表示
■ctrl+F
ページ内語句検索

参考になりましたら嬉しいです！
ではまた！

「shift+T」

Gmailでタスクに追加したいメールを開いて、Shift+Tを押すと、タスクに入ります。

試しにiphoneで撮ったちょっさんを背景に入れてみた。
大きすぎてごめんなさい。

選択方法は左下にある「背景画像を選択する」を押して、パソコンから、picasaから、公開ギャラリー、スタッフのおすすめから等簡単に選択できるようになっています。
気になった方は変更してみましょう★

picasaに背景用のフォルダを作って公開しておけば素敵な写真を背景にしてくれる人たちができるかもですね★
ちょっさん背景集でもつくろうかな！

Google Font APIってなんぞ。

通常、ホームページはパソコン内にインストールされているフォントを読み込んで表示するようにスタイル指定されており、MSゴシック等を使用することが一般的で、デザインフォントなどを使用したタイトル等を作る場合には画像での作成が一般的でした。

ですが、最近はサーバーに置いてあるフォントをjavascriptで読み込ませたり、今回のgoogle font APIのようにCSS指定のみでデザインフォントをブラウザが読み込んでくれて表示してくれるようになりました。

そうすることで、画像を作る手間を省いたり、アクセシビリティ的にもよかったりするわけです。
今後は、主流になってくるのではないかと思います。
日本語フォントは有料のものだったりするから主流にはならないと思うけど。

今まで、デザインされたメニューのテキスト表示はMSゴシックなどを使用したデザインが一般的でしたが、これを使用することで、デザインの幅が広がりそうです。
フォントがまだまだ少ないようですが、今後に期待です。

ということでテストしてみました。
実際のテストページは下記ボタンから。

結果、IE以外は全部OKの様子。

なんだかよくわかんないけどIEで表示されないフォントがあった。
なぜだろう～。
表示はこんな感じ。
左からOpera,firefox,google chrome,IE8　あ、safari忘れた。（safariも大丈夫でしたｗ）

IE5.5~7

ちなみに、iphoneのsafari、operaは全滅。
↓safari

↓opera

やり方。

まずはhtmlにサンプルコードを書きます。

<h1>Google API</h1>
<h2>Google Font API</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

次に、Google Font Directoryからフォントを選ぶ。
フォントを選んだら、Get the Codeのリンクを押して、下記リンクソースを上に記載。一番下のソースをスタイルシートに記載。

すると、サンプルページの用な感じでフォントを読み込ませることができます！