Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
WordPressもくもく勉強会 at コエド第9回 15.09.19
スマートフォンユーザーのためのQRコード設置と
ホーム画面へのアプリアイコン設置
TickleCode.
Yoshinori Kobayashi1
WordPressで作る...
もくもく会(自主勉強会)
を複数の運営メンバーや
アドバイザーの方々と
ともに、定期開催しています。
勉強会を開催しています)^o^(
2
【CoEdo.rb】
Ruby / Ruby on Rails
ビギナーズ勉強会
Swiftビギナーズ勉...
3
最初にデモします。
・QRコードオペレーション
・スマホのホーム画面へのアイコン追加
http://yakitori-ya.net/
4
QRコードについて
・利点は、ユーザーがPCからスマホデバイス
にあっさりと移行しやすい!
・スマホデバイスで、別途、
QRコードリーダーアプリが必要。
・QRコードはWebサイトで簡単に作れる。
5
QRコード[二次元バーコード]作成
QRコードの作成と設置
6
ホーム画面追加時にタイトルを指定
// iOS Safari のみ対応できる。
<meta name="apple-mobile-web-app-title" content="焼き鳥屋検索" />
タイトルは日本語だと6文字
まで表示可能...
7
ホーム画面のアプリアイコン
// iOS Safari の場合
<link rel="apple-touch-icon" sizes="180x180" href="touch-ico180x180.png">
// Android標準ブラ...
8
WordPressへの組み込み
[functions.php]
function apple_app_title(){
// アプリタイトル
echo '<meta name="apple-mobile-web-app-title" con...
9
WordPressへの組み込み
[functions.php]
function apple_app_title(){
// アプリタイトル
echo '<meta name="apple-mobile-web-app-title" con...
2015年版: ホームアイコンの指定方法まとめ
10
参考になるリンク集
HTML5 開発者向け iPhone 5 / iOS 6 での変更点等まとめ
WordPress Codex 日本語版 関数リファレンス add action
ご清聴ありがとうございました。
11
Upcoming SlideShare
Loading in …5
×

WordPressで作る焼き鳥サイト|スマートフォンユーザーのためのQRコード設置と ホーム画面へのアプリアイコン設置|WordPressもくもく勉強会 at コエド第9回 15.09.19

1,132 views

Published on

2015-09-19(土)14:00 「WordPressもくもく勉強会 at コエド第9回」

タイトル:
WordPressで作る焼き鳥サイト|スマートフォンユーザーのためのQRコード設置と ホーム画面へのアプリアイコン設置

ショートセッションでのスライドです。

WordPressで「焼き鳥サイト(http://yakitori-ya.net/)」を作りました。

そのときに、スマートフォンユーザー向けに、QRコードの設置とホーム画面へのアプリアイコン設置を行いました。

わかりやすく手順をスライドにまとめました。

=================

「WordPressもくもく勉強会 at コエド」は、WordPressを学びたい人たちが集まって発表したり、自主学習する勉強会です。定期開催しています。

開催の連絡は以下の方法で受け取ることができます。

## DoorKeeperグループ
イベント申し込みを受け付けている、DoorKeeper でのグループです。
https://wp-moku.doorkeeper.jp/

## Facebookグループ:
イベント告知や技術情報をお互いにシェアしています。
https://www.facebook.com/groups/194782003975961/

## Twitterハッシュタグ
ハッシュタグは、 #wpmoku です。
Twitterにもイベント、勉強会の情報を流しています。

Published in: Internet
  • Be the first to comment

WordPressで作る焼き鳥サイト|スマートフォンユーザーのためのQRコード設置と ホーム画面へのアプリアイコン設置|WordPressもくもく勉強会 at コエド第9回 15.09.19

  1. 1. WordPressもくもく勉強会 at コエド第9回 15.09.19 スマートフォンユーザーのためのQRコード設置と ホーム画面へのアプリアイコン設置 TickleCode. Yoshinori Kobayashi1 WordPressで作る焼き鳥サイト
  2. 2. もくもく会(自主勉強会) を複数の運営メンバーや アドバイザーの方々と ともに、定期開催しています。 勉強会を開催しています)^o^( 2 【CoEdo.rb】 Ruby / Ruby on Rails ビギナーズ勉強会 Swiftビギナーズ勉強会 WordPressもくもく 勉強会
  3. 3. 3 最初にデモします。 ・QRコードオペレーション ・スマホのホーム画面へのアイコン追加 http://yakitori-ya.net/
  4. 4. 4 QRコードについて ・利点は、ユーザーがPCからスマホデバイス にあっさりと移行しやすい! ・スマホデバイスで、別途、 QRコードリーダーアプリが必要。 ・QRコードはWebサイトで簡単に作れる。
  5. 5. 5 QRコード[二次元バーコード]作成 QRコードの作成と設置
  6. 6. 6 ホーム画面追加時にタイトルを指定 // iOS Safari のみ対応できる。 <meta name="apple-mobile-web-app-title" content="焼き鳥屋検索" /> タイトルは日本語だと6文字 まで表示可能 通常のサイト名は長すぎる。 わかりやすい名前で指定で きるのがよい。
  7. 7. 7 ホーム画面のアプリアイコン // iOS Safari の場合 <link rel="apple-touch-icon" sizes="180x180" href="touch-ico180x180.png"> // Android標準ブラウザ(一部) <link rel="shortcut icon" href="touch-ico180x180.png"> デバイスに応じてサイズが多 数ある。 大きいサイズを指定しておく と、小さいデバイスのときは 調整してくれる。
  8. 8. 8 WordPressへの組み込み [functions.php] function apple_app_title(){ // アプリタイトル echo '<meta name="apple-mobile-web-app-title" content="焼き鳥屋検索" />'; // 親テーマの場合は、get_template_directory_uri() を使う。 $touch_ico_uri = get_stylesheet_directory_uri() . '/images/touch-ico180x180.png'; // iOS Safari echo '<link rel="apple-touch-icon" sizes="180x180" href="' . $touch_ico_uri . '">'; // iOS Safari(旧) / Android標準ブラウザ(一部) echo '<link rel="apple-touch-icon-precomposed" href="' . $touch_ico_uri . '">'; // Android標準ブラウザ(一部) echo '<link rel="shortcut icon" href="' . $touch_ico_uri . '">'; // Android Chrome echo '<link rel="icon" sizes="192x192" href="' . $touch_ico_uri . '">'; } functions.php で挿入するmeta、linkを関数でまとめる。
  9. 9. 9 WordPressへの組み込み [functions.php] function apple_app_title(){ // アプリタイトル echo '<meta name="apple-mobile-web-app-title" content="焼き鳥屋検索" />'; : // Android Chrome echo '<link rel="icon" sizes="192x192" href="' . $touch_ico_uri . '">'; } add_action('wp_head','apple_app_title', 5 ); 関数を実行する場所を、add_action で指定する。 WordPress Codex 日本語版 関数リファレンス add action 説明:add_action(動く場所,動かす内容,動く場所での優先) 「add_actionは、wp_head()がある場所で、apple_app_title() を 優先順位5で動かす。優先が5ぐらいだと、ちょうどよい位置に挿入 される。」
  10. 10. 2015年版: ホームアイコンの指定方法まとめ 10 参考になるリンク集 HTML5 開発者向け iPhone 5 / iOS 6 での変更点等まとめ WordPress Codex 日本語版 関数リファレンス add action
  11. 11. ご清聴ありがとうございました。 11

×