カテゴリー別アーカイブ: Pinned

【IE10】 Web Camp 2、ご参加ありがとうございました!


師走で皆さんお忙しい中だったのでどれだけの方に来ていただけるかとても心配だったのですが、多くのお客様にご来場いただき、本当にありがとうございました。楽しい時間を過ごせたでしょうか?hero3

さて早速資料公開に関して事務局に問合せが入っているようですが、前回の Web Camp 同様の方法で公開すると思います。

前回のページ(セッション枠の横にPDF公開)
HTML5+IE9 Web Camp with Adobe ~HTML5、作ろうぜ~

今回の Web Camp 2 のページ
HTML5+IE9 Web Camp 2 with html5j.org


私はむかーしから Final Fantasy と Dragon Quest のファンです。オンラインはどうも苦手でしたが、ゲーム コンソールでやるものは最高だと思います。まさに日本人として誇れる素晴らしいコンテンツ、しかもユーザーとしてとても面白いものがこれだけ作り出せるそのクリエイティブ魂を尊敬するばかりです。

今回のモーグリのツイートキャッチは色々な人の想いと汗でできたアプリケーションです。ぜひまだお試しになられていない方はお試しください!

モーグリのツイートキャッチ
http://www.ff13-2-ie9.com/

ツイートキャッチも IE9 のピン留めに対応しているのでタスクバーにピン留めしてどんどんアイテムを GET してくださいね!

今回の Web Camp 2 では開発の裏側、つまり今誰もが結構悩んでいる HTML5 の仕様をどう生かすのかという観点で結構語られました。しかし、スマホやクラウドを利用することも実は取り組んでいるのでそういう話もとても参考になると思います。そこで MSDN オンラインで下記のページを作っているのでぜひ見てほしいなと。

Start Something! のページからモーグリのバナーをクリック!
http://msdn.microsoft.com/ja-jp/hh315652


さて、Microsoft セッションでは IE10 を取り上げました。構成内容はスライドとデモだったのですが、実は今回は PowerPoint を初めて使わないプレゼンをしましたのでもう一つこの JavaScript スライドショーの解説をする投稿をこの後に書いておきますね。便利でしたし、手軽なものです。

デモに関しては IE TestDrive のサイトにあるものが多いのですが、それらと独自デモを含めて物江の方でブログを書いています。ぜひ物江のブログも随時チェックいただきたく存じます。

 

広告

IE9 のピン留め機能と WordPress


(11/12 に追記しました)

WordPress をご利用のサイト管理者の皆さん、こんなプラグインがあるのをご存じですか?

「IE9 Pinning」

いくつかあるのでお気に入りのものを利用すればいいと思いますけど、この投稿ではこのプラグインを取り上げてみたいと思います。

1. プラグインで 「新規追加」をクリックします。

image

2. キーワード検索で 「IE9」 で探しましょう。

image

3. 見つけたら「いますぐインストール」します。確認が出ますので進めましょう。
4. 「有効化」をクリックして有効化しましょう。

image

これで元々のプラグインの機能が有効になるので、サイトを開いてピン留めしてみましょう。アドレスの横にあるIEのロゴ(eマーク)をタスクバーにドラッグ&ドロップします。

image

このままだと英語で下記の実装になります。

まずサイトをこのタスクバーのアイコンをクリックして開きます。

・上の前後 ←→ が赤い色の実装になります。ここはサイトの配色特徴に合わせるといい部分です。
image

11/12:一番下に追記しました。

・タスクバーのアイコン上で右クリックすると Recent posts グループができて、動的ジャンプリストが有効になります。最近の投稿が表示される実装です。
image

ここで管理者としてログインしましょう。/wp-admin ですよね。
この状態だと、静的ジャンプリストが有効になり、ブログオーナーとして実施するアクションがワンクリックでできるようになります。投稿、コメント管理、メディアのアップロードですね。
image

日本人なんで、日本語にしたいなと思いますよね、やっぱり。
プラグインの設定を見てみましょう。

1. プラグインの設定ページを「編集」で開きます。
image

2. David Collen さんが作成した IE9-Pinning.php が開きます。

さてここの内容なんですけど、そもそもピン留めってどうやって実装するか復習しておきましょう。以下のサイトを見ましょう。それぞれの番号の下にある
image
をクリックしてみましょうね。

http://buildmypinnedsite.com

簡単に整理すると、

◎綺麗な高精細な Favicon はここにエディターもあったりしますが、以下。
<link rel="shortcut icon" type="image/ico" href="/favicon.ico" />

◎上記の赤いボタンの実装は、以下。
<meta name="msapplication-navbutton-color" content="#3480C0" />

◎静的なジャンプリストの実装は、以下。
<meta name="msapplication-task"
content="name=Develop for Internet Explorer 9;
action-uri=http://www.beautyoftheweb.com/#/startdeveloping;
icon-uri=/favicon.ico" />

ご覧のようにジャンプリスト項目のアイコンも指定可能です。

◎動的なジャンプリストは JavaScript で実装しますが、最終的に以下を実行して1項目を追加することになります。コード全体はページを参照。
window.external.msSiteModeAddJumpListItem(title, href, "/favicon.ico", "self");

さて、IE9-Pinning.php に戻ってコードを見てみましょう。

なんか怪しげな設定発見。これが←→の色設定かな。
add_option( ‘ie9_pinning_toolbar_color’, ‘#FFFF00’, null, ‘yes’ );
あとで下記があるのでそうなんでしょう。
echo ‘<meta name=”msapplication-navbutton-color” content=”‘ . strtoupper( get_option( ‘ie9_pinning_toolbar_color’ ) ) . ‘”/>’;

どうもすぐに有効にならないのがちょっと不思議。
readme.txt の方を読むと有効にならないケースのことが書いてある。これは別途調べよう。

まず、ブログオーナーがログオンした時に有効になる方ですが、下記の赤字の通りの設定になっているからここを書きかえればいいのかな?
echo ‘<meta name=”msapplication-task” content=”name=’ . __( ‘Write a post‘, $z ) . ‘;action-uri=’ . admin_url() . ‘post-new.php;icon-uri=’ . plugins_url(‘post.ico’, __FILE__) . ‘” />’.”\r\n”;
echo ‘<meta name=”msapplication-task” content=”name=’ . __( ‘Moderate comments‘, $z ) . ‘;action-uri=’ . admin_url() . ‘edit-comments.php?comment_status=moderated;icon-uri=’ . plugins_url(‘comment.ico’, __FILE__) . ‘” />’.”\r\n”;
echo ‘<meta name=”msapplication-task” content=”name=’ . __( ‘Upload new media‘, $z ) . ‘;action-uri=’ . admin_url() . ‘media-new.php;icon-uri=’ . plugins_url(‘media.ico’, __FILE__) . ‘” />’.”\r\n”;

それでもって、最新の投稿系のジャンプリストは、下記ですね。
echo ‘window.external.msSiteModeCreateJumplist(“‘ . __( ‘Recent posts‘, $z ) . ‘”);’.”\r\n”;
echo ‘window.external.msSiteModeAddJumpListItem(“‘ . $post->post_title . ‘”, “‘ . get_permalink( $post->ID ) . ‘”, “‘ . plugins_url(‘post.ico’, __FILE__) . ‘”);’.”\r\n”;

日本語で書き換えちゃうとこんな感じになる。

image

げっ すげー簡単かも。

いずれにしても少しいじくればここまでできてしまった。

私が試したサイト http://hirookun.net をぜひご覧ください。
ログオンしていない状態しか見れないですが、ぜひ下の3つは皆さん自身のサイトでご確認ください。

なお、このお試し hirookun.net はデータジャパンさんの ExpressWeb で動いています。手軽に試すにはいい環境ですよ。


11/12に追記。

うーむと思っていた色の部分ですが、このプラグインの機能をよくわかってなかったみたいです。下記のように設定が増えているんです。

image

ちゃんとカラーを選ぶUIあるわけね。

image

でもって、保存と。

image

すると最初赤だったのが、しっかりと色変わりました。

ということですね。ますます便利!