オザワです。
今日はバレンタインです。
デイズの女子社員一同の思いを背負って、普段お世話になってる
上司・同僚・後輩用にバレンタインのプレゼントを購入してきました。
例年は純粋にチョコレートなのですが、今年はちょっとひねってドーナツです。
季節物らしくハート型です。
こう見るとデイズの休憩室はキッチンクロスのおかげで妙に実家っぽい。
ついでに自分用に、バレンタイン感ゼロの米粉のざらめドーナツ（右）も買いました。
一緒に行ったNは、チョコがかかったバレンタインぽいと言えなくもないもの（左）を買ってました。
みなさまのバレンタインはいかがでしたでしょうか。
ハッピーバレンタイン。
さて、CSS3 で拡張された擬似クラスですが、使えそうなものが色々とあるんですよね。
特にスマートフォンサイトの制作では基本的にHTML5/CSS3対応が進んでいることもあり、今までは jQuery とかで処理していたものが CSS3 ではCSSコードだけで簡単に要素を選択できるからとてもイイ！
…と思っているとちょっとハマります。
<section>
<h2>タイトル</h2>
<p>あああああああああああ</p>
<p>いいいいいいいいいいい</p>
<section>
このコード、一番最初のp要素を選択するためにCSSで
section p:first-child {
…
}
としたいところですが、これではうまくいきません。
:first-child は「擬似クラスをつけた要素の中から最初に出てきた要素を選択する」ではなく、正確には「親要素から見て擬似クラスをつけた要素が最初にあった場合」であり、この場合親要素から最初に出てくる要素は h2 ですから選択されることはありません。
この場合は
section h2 + p {
…
}
と書く必要があります。
jQuery 感覚でいると勘違いしてしまいますね。
jQuery だと
$('section p:first')
で想定したものが選択可能ですから…
結局フリックエリア内のリンクの挙動に難があるということで使用しなかった jQuery.flickable ですが、使用しないという判断に至ったところまではページ内に複数設置可能、ページネーションの実装などをしていたので、一応忘れないように…
$('.flickableblock').each(function(){ // 複数フリックエリア対応
var element = $(this).find('.flickable').flickable({
section: 'li'
});
$(this).find('.flickable li').each(function(idx){
$(this).closest('.flickableblock').find('.flickablenavi').append('●');
}); //ページネーションインターフェース生成
$(this).find('.flickablenavi a:first').addClass('active');
$(this).find('.flickable').bind('flickchange', function(event, ui) {
var num=$(this).find('li').index(ui.newSection); //現在のセクション番号取得
$(this).parent().find('.flickablenavi a').removeClass('active');
$(this).parent().find('.flickablenavi a:eq('+num+')').addClass('active');
});
$(this).find('.flickablenavi a').click(function() {
var index = $(this).attr('title') - 1;
element.flickable('select', index); //ページネーションインターフェースでの移動
});
$(this).find('.flickable li a').click(function() {
var href_text= $(this).attr('href');
alert(href_text)
location.href=href;
});
});
現在のセクション番号の取得は悩みました…プログラマじゃないので。
ということでjQueryで動作するプログラムをいくつか探しました。
他にも
スマートフォンサイトを作る時に便利なフリックが実装できるjQueryプラグイン7選
にて幾つか紹介されていますが、どうも Android のデフォルトブラウザの挙動に問題があるようです。
オザワです。
2012年1月28日、名古屋ミッドランドで開催されたスマホセミナーに参加してきました。
スマホに関する現状からコネタまで、具体的な演習を交えて勉強できたセミナーでした。
実作業で即、生かせそうなデザイン的なコネタをいくつかご紹介します。
一応の目安ですが、カーソルがあるわけではないので、リンクパーツはなるべく大きめに作成したほうがよさそうです。PCページのデザインばかりやっていると、案外見た目重視で小さめのパーツになりがちなので注意が必要です。
スマホ端末は太陽光の下で閲覧することも少なくないので、コントラストははっきりめに作成した方がよい。
スプライト（一枚画像）を使用することで回避もできるようですが、3G回線で閲覧するケースを考えるとやっぱり画像は控えめにした方がよさそうです。CSS3が使えるところには積極的に使用していった方がいいです。
独自デザインにこだわる場合は初めから使用を見送ったほうが無難かもしれません。 が、簡単にある程度リッチなページにすることができるので、特性を考えてケースバイケースで使用すると効果的。
※jQuery Mobileアルファ版はXSSの脆弱性が見つかったので使用しないこと
正確には×ではなく、iOS5が対応しているので△くらいなんですが、やはり使用は控えたほうがよさそうです。スクロール固定配置はiOS5でも動作がいまいち不安定なんだとか。
他にもUI的な話とかSEO的な話とか、スマホの旬な話が聞けてよかったです。
今後スマホ案件は間違いなく増えていくと思うので、勉強になりました。
あとセミナー内では軽く触れるにとどまった電子書籍＆ネイティブアプリなんかも気になる存在です。
ちょっとずつ勉強していきたいですね。
あとMacほしい。
特にテーマは決めていないので雑談とかも。
スーパー銭湯が好きなんです。 いつも行くところは「長久手温泉ござらっせ」という長久手市が第三セクターで運営しているスーパー銭湯なんですが、そちらと比べて私的な観点から好きなところと嫌いなところを。
◯好きなところ
・安い
圧倒的に安い。大人500円。ござらっせは一般700円（市民550円）
・屋内の大浴場が炭酸泉
ござらっせは小さい風呂が炭酸泉だけど大浴場が炭酸泉なのでゆったり
・広い露天風呂
テレビまでついてます
×嫌いなところ
・ヌルいサウナ
なんかあんまり暑くない
・ヌルい水風呂
今日は19.8℃とか…せめて17℃前後まで低くないと
・ヌルい炭酸泉
広いせいなのかなんなのか、炭酸がユルい。ござらっせは結構ピリピリしてなんか効いてる気がする
・座れないジェットバス
・遠い
ということで総合的にはよほど気が向かないと行かない場所という…
ただござらっせも、今長久手で一番人口が増えている地区である市が洞地区、淑徳大学付近に「花しょうぶ」というスーパー銭湯が出来た影響で客が減ってまして。何かしないとダメなんじゃないかなと思う次第です。大人700円じゃあねぇ…
長久手温泉ござらっせ
…メニューがプルダウンってありえない…
こんにちは、スタッフkudoです。
今までずっと iPhone と iPad を 使ってきたのですが、先日初Android搭載端末を購入しました。
いわゆる中華Padと呼ばれる、1万円ちょっとで購入できる安価なタブレット。スペックも悪くないので良いオモチャになるだろうと思い、購入してみました。
ざっと Android Market を覗いた感じでは、 App Store よりもマニアックで自由なアプリが多いなぁと感じました。（無審査・審査有りの違いからか） 「超くだらないアプリ」から「超使えるアプリ」までの幅が広いというかなんというか（笑）
結局の所、Android端末でしようとすることのほとんど全てはiPadでも可能なので、必要性は・・・と言ったらそれまでですが、これからも色々試してみたいと思います。
購入した端末を紹介されている方が居たのでご紹介。本体や型式は同じですが、僕のは他社販売版。内蔵記憶容量など少し変更されています。
まあ、誰もがやるみたいで…
押したくなりますよね…
ただ押すと最後、PCのテンプレートに細工をしない限り元に戻せないんですけどね。
ということで戻し方は以下から。
WordPressのブログをiPhone/iPod touchでみるプラグイン：WPtouch｜DN*blog
WPtouchでiPhone用テーマに戻らなくなった時｜えるみれ
PC用のテーマファイルに以下を挿入します。
場所はどこでもいいですが、基本的にはフッターでしょうね。
タグは任意のタグでいいです。
<?php
if (function_exists(’wptouch_switch’)) wptouch_switch(’<h2>’, ‘</h2>’);
?>
以前にやったことはあったがすっかり忘れてしまっていたので健忘録として。
自作トップページのindex.phpに新着５件表示｜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; ?>上記の方法では複数のブログ記事を1ページ内に同時に表示することができませんので、次の方法を取ります。
<?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; ?>
サーバー上のWordPressをインストールしたディレクトリから使用しているテーマのディレクトリを探し保存したファイルをアップします。
WordPressをインストールしたディレクトリ/wp-content/themes/テーマ名/
WordPress管理画面から新規ページを作成します。
右サイドの「ページ属性」のテンプレートから、先程アップしたファイルの中に書かれているテンプレート名をプルダウンから指定します。上記の例では latest entry list と表示されます。
タイトルとパーマリンクを設定します。
タイトルは自分が分かれば何でも構いません。
パーマリンクは一応一般的な英数字などで書き直しました。
表示したいページから PHP で、5で指定したパーマリンクをインクルードします。
相対パスではインクルードされないので http:// からの絶対URLにて指定しています。
理由は私はPHPのことは詳しくないのでわかりません。
以上で終了です。
私のスマートフォンは Android なので今まで気づかなかったのですが…
自社サイトのメインメニューは jQuery の hover() にてプルダウン…というかドロップダウンメニューが実装してあります。
今日 iPad を色々弄ってて、メインメニューをタッチしたらドロップダウンメニューが表示され、二回目のタッチでページ遷移することに気が付きました。
タッチスクリーン端末ではポインターという概念がないので、マウスオーバーイベントは使えないと思っていたんですが…
ちなみに私の持つ Android 端末ではタッチでリンク先ページに遷移しました。
ある意味想定通りの挙動です。
なのでやっぱり iOS の JavaScript での挙動なんでしょうかね。