スマホスキルアップセミナーに参加してきました

オザワです。

2012年1月28日、名古屋ミッドランドで開催されたスマホセミナーに参加してきました。
スマホに関する現状からコネタまで、具体的な演習を交えて勉強できたセミナーでした。

実作業で即、生かせそうなデザイン的なコネタをいくつかご紹介します。

【タッチできるパーツ、最小サイズで44px×44px】

一応の目安ですが、カーソルがあるわけではないので、リンクパーツはなるべく大きめに作成したほうがよさそうです。PCページのデザインばかりやっていると、案外見た目重視で小さめのパーツになりがちなので注意が必要です。

【コントラストを強めに】

スマホ端末は太陽光の下で閲覧することも少なくないので、コントラストははっきりめに作成した方がよい。

【1ページ内の画像の読み込みは最大15枚くらい】

スプライト(一枚画像)を使用することで回避もできるようですが、3G回線で閲覧するケースを考えるとやっぱり画像は控えめにした方がよさそうです。CSS3が使えるところには積極的に使用していった方がいいです。

【jQuery Mobileはカスタマイズの幅が狭い】

独自デザインにこだわる場合は初めから使用を見送ったほうが無難かもしれません。 が、簡単にある程度リッチなページにすることができるので、特性を考えてケースバイケースで使用すると効果的。
※jQuery Mobileアルファ版はXSSの脆弱性が見つかったので使用しないこと

【インラインフレーム・スクロール固定配置は×】

正確には×ではなく、iOS5が対応しているので△くらいなんですが、やはり使用は控えたほうがよさそうです。スクロール固定配置はiOS5でも動作がいまいち不安定なんだとか。

他にもUI的な話とかSEO的な話とか、スマホの旬な話が聞けてよかったです。
今後スマホ案件は間違いなく増えていくと思うので、勉強になりました。

あとセミナー内では軽く触れるにとどまった電子書籍&ネイティブアプリなんかも気になる存在です。
ちょっとずつ勉強していきたいですね。

あとMacほしい。

「竜泉寺の湯」の◯と×

特にテーマは決めていないので雑談とかも。
スーパー銭湯が好きなんです。 いつも行くところは「長久手温泉ござらっせ」という長久手市が第三セクターで運営しているスーパー銭湯なんですが、そちらと比べて私的な観点から好きなところと嫌いなところを。

◯好きなところ
・安い
圧倒的に安い。大人500円。ござらっせは一般700円(市民550円)
・屋内の大浴場が炭酸泉
ござらっせは小さい風呂が炭酸泉だけど大浴場が炭酸泉なのでゆったり
・広い露天風呂
テレビまでついてます

×嫌いなところ
・ヌルいサウナ
なんかあんまり暑くない
・ヌルい水風呂
今日は19.8℃とか…せめて17℃前後まで低くないと
・ヌルい炭酸泉
広いせいなのかなんなのか、炭酸がユルい。ござらっせは結構ピリピリしてなんか効いてる気がする
・座れないジェットバス
・遠い

ということで総合的にはよほど気が向かないと行かない場所という…

ただござらっせも、今長久手で一番人口が増えている地区である市が洞地区、淑徳大学付近に「花しょうぶ」というスーパー銭湯が出来た影響で客が減ってまして。何かしないとダメなんじゃないかなと思う次第です。大人700円じゃあねぇ…

竜泉寺の湯
竜泉寺の湯 露天風呂

長久手温泉ござらっせ
長久手温泉ござらっせ 露天風呂
…メニューがプルダウンってありえない…

Android端末を購入

こんにちは、スタッフkudoです。

今までずっと iPhone と iPad を 使ってきたのですが、先日初Android搭載端末を購入しました。

いわゆる中華Padと呼ばれる、1万円ちょっとで購入できる安価なタブレット。スペックも悪くないので良いオモチャになるだろうと思い、購入してみました。

ざっと Android Market を覗いた感じでは、 App Store よりもマニアックで自由なアプリが多いなぁと感じました。(無審査・審査有りの違いからか) 「超くだらないアプリ」から「超使えるアプリ」までの幅が広いというかなんというか(笑)

結局の所、Android端末でしようとすることのほとんど全てはiPadでも可能なので、必要性は・・・と言ったらそれまでですが、これからも色々試してみたいと思います。

購入した端末を紹介されている方が居たのでご紹介。本体や型式は同じですが、僕のは他社販売版。内蔵記憶容量など少し変更されています。

原道 N50GT|清水 隆夫の「Good Job !」

 

WPtouch でスマートフォン用テーマに戻す

WPtouch フッター部分

まあ、誰もがやるみたいで…
押したくなりますよね…
ただ押すと最後、PCのテンプレートに細工をしない限り元に戻せないんですけどね。

ということで戻し方は以下から。

WordPressのブログをiPhone/iPod touchでみるプラグイン:WPtouch|DN*blog

WPtouchでiPhone用テーマに戻らなくなった時|えるみれ

PC用のテーマファイルに以下を挿入します。
場所はどこでもいいですが、基本的にはフッターでしょうね。
タグは任意のタグでいいです。


<?php
if (function_exists(’wptouch_switch’)) wptouch_switch(’<h2>’, ‘</h2>’);
?>

WordPress外のページにWordPressの記事を表示する

以前にやったことはあったがすっかり忘れてしまっていたので健忘録として。

wp-load.phpを使う

自作トップページのindex.phpに新着5件表示|WordPressフォーラム

コチラの最後にある通り、以下のコードを追加するだけです。


<?php
$posts = get_posts("numberposts=5&category=&orderby=post_date&offset=0");
foreach ($posts as $post):
setup_postdata($post);
?>
<li><?php the_time('Y.m.d') ?> <a href="<?php the_permalink() ?>"><?php echo get_the_title($post->ID); ?></a></li>
<?php endforeach; ?>

WordPress内に記事表示用のページを作り、PHPでインクルードする

上記の方法では複数のブログ記事を1ページ内に同時に表示することができませんので、次の方法を取ります。

  1. 次のような内容のファイルを作成し、 latestentry.php として保存します。
    
    <?php
    /*
    Template Name: latest entry list
    */
    ?>
    <?php
    $posts = get_posts("numberposts=5&orderby=post_date");
    foreach ($posts as $post):
    setup_postdata($post);
    ?>
    <li><a href="<?php the_permalink() ?>" rel="bookmark"><?php echo the_title(); ?></a></li>
    <?php endforeach; ?>
    
  2. サーバー上のWordPressをインストールしたディレクトリから使用しているテーマのディレクトリを探し保存したファイルをアップします。
    WordPressをインストールしたディレクトリ/wp-content/themes/テーマ名/

  3. WordPress管理画面から新規ページを作成します。

  4. 右サイドの「ページ属性」のテンプレートから、先程アップしたファイルの中に書かれているテンプレート名をプルダウンから指定します。上記の例では latest entry list と表示されます。

    ページ属性

  5. タイトルとパーマリンクを設定します。
    タイトルは自分が分かれば何でも構いません。
    パーマリンクは一応一般的な英数字などで書き直しました。

    タイトルとパーマリンクの設定

  6. 表示したいページから PHP で、5で指定したパーマリンクをインクルードします。

    
    
    

    相対パスではインクルードされないので http:// からの絶対URLにて指定しています。
    理由は私はPHPのことは詳しくないのでわかりません。

以上で終了です。

iOS でのマウスオーバーイベント?の挙動

私のスマートフォンは Android なので今まで気づかなかったのですが…
自社サイトのメインメニューは jQuery の hover() にてプルダウン…というかドロップダウンメニューが実装してあります。
今日 iPad を色々弄ってて、メインメニューをタッチしたらドロップダウンメニューが表示され、二回目のタッチでページ遷移することに気が付きました。

タッチスクリーン端末ではポインターという概念がないので、マウスオーバーイベントは使えないと思っていたんですが…

ちなみに私の持つ Android 端末ではタッチでリンク先ページに遷移しました。
ある意味想定通りの挙動です。
なのでやっぱり iOS の JavaScript での挙動なんでしょうかね。

タブレット端末の検出

自社サイトのスマートフォン版の公開にあたり、スマートフォンのみでダイアログを表示してスマートフォンサイトへリダイレクトさせることを考えたんですが、なかなかうまくいきません。ネックとなったのはやはり Android です。

はじめは JavaScript のユーザーエージェントで iPhone/iPod/Android を検出する方法で実装してみたんですが、これでは Androidタブレットも引っかかってきます。
どうにかしてJavaScript で Androidタブレットであることを判定したくて色々調べたんですが…

標準ブラウザの場合は Androidスマートフォン のユーザーエージェントに含まれる文字は Android と mobile 両方含まれているのでいいんですが、他のブラウザとなるとそうはいかないようです。

タブレット端末のユーザーエージェント|ログマニアックス

AndroidのブラウザはSafari?スマホのUser-Agentを見てみよう!|CreaMo!-クリーモ!-

結局は最初にダイアログが表示されるかされないかだけなので諦めました。


	var smartphone_flag = sessionStorage.getItem("smartphone");
	var user_agent=navigator.userAgent;
	if ((smartphone_flag!=1)&&(user_agent.match(/Android/i)&&user_agent.match(/mobile/i) || user_agent.match(/iPhone/i) || user_agent.match(/iPod/i))) {
		sessionStorage.setItem("smartphone", 1);
		if(confirm('このサイトにはスマートフォン用のページがあります。\n表示しますか?')) {
			location.href = 'http://www.days.jp/smartphone/';
		}
	}

ちなみに調べている過程でわかったのが、 iOS では端末の向きに関係なく screen.widthscreen.height で取得できる数値は固定ということ。
ユーザーエージェントではなくて画面解像度で分けてみようとしたときに iPad を色々ひっくり返してたりしてた時間返して…

iPad向けWebアプリケーション開発テクニック|マイナビニュース

WordPress に OGP を仕込む

この WordPress のテンプレートに OGP を仕込もうと header.php に色々とコードを仕込んでいたんですが
コメントにつけた Facebookコメント欄に出てきた設定リンクをクリックして出てくる
「グローバル設定やモデレータモードを編集するには、fb:app_idが必要です」
というメッセージが気になりググったところ、テンプレートを触らずに OGP を仕込めるプラグインがあることがわかってちょっと時間無駄にしてしまいました。

OGPを修正 | 深ノオト

WordPressのOGPプラグイン『WP-OGP』を正しく設定する方法 | IDEA*IDEA

…まあメッセージについては解決してないんですけどね…

margin:0 auto ではないブロックの中央寄せとその応用

HTMLで通常ブロックを中央寄せにする場合はブロックの左右の margin に auto を指定すると思います。


<div class="center">ああああ</div>

.center {
  width:200px;
  margin:0 auto;
}

他のアプローチとしてはposition の絶対配置とネガティブマージンを使ったものがあります。
具体的には、親要素の左から50%の位置にブロックを絶対配置し、さらにネガティブマージンを使って子要素の幅の半分を左にずらします。


.center {
  width:200px;
  position:absolute;
  left:50%;
  margin-left:-100px;
}

ブロックの中央寄せ

単純な中央寄せであれば素直に最初の方法でいいかと思いますが、こちらは色々と応用が効きます。

応用1:縦方向の中央寄せ

横に関してはウィンドウ幅がすなわちドキュメントの幅ですので特に問題はありませんが、縦に関しては話は別。
ドキュメントの内容が足りなければウィンドウの高さをいくら伸ばしてもドキュメントの高さは確保できません。
ウィンドウの高さに対して中央寄せをしたい場合、最初の方法は使えません。
二番目の方法であればこれが可能になります。


.center {
  width:200px;
  height:100px;
  position:absolute;
  left:50%;
  top:50%;
  margin:-50px 0 0 -100px;
}

応用2:親要素より子要素の幅が大きい時の中央寄せ

子要素が親要素より大きい場合にもこれは有効です。
ウィンドウ幅より大きいボックスを常にウィンドウの真ん中に表示させたい場合はあるでしょう。
具体的にはウィンドウ幅を広げてもコンテンツを横に表示したい、などです。
親要素はウィンドウ幅に対して100%、さらにはみ出した部分は表示しないようにします。
後の要領は同じです。


  <div class="outerbox">
  <div class="center">ああああ</div>
  </div>

.outerbox {
  width:100%;
  overflow:hidden;
}
.center {
  width:2000px;
  position:absolute;
  left:50%;
  margin-left:-1000px;
}

親要素より子要素が大きい場合の中央寄せ

これで完成です。

BootCamp XP に SP3 を適応するも失敗

さすがにセキュリティソフトはマイクロソフト純正くらいは入れとこうと思い Microsoft Security Essentials をインストール…

と思ったけどどうやら XP SP3 である必要があるとのこと。
じゃあ SP3 を当てようじゃないか!(IE6 のままでいけるなら)
と、 Windows Update をかけるも、途中で失敗。

Boot Camp 3.0:Windows XP Service Pack 3 をインストールできない

どうやらこれのせいらしいので手順どおり作業して完了!