トランスビット
トランスビットの開発ノート Webサイト制作に役立つTipsやトラブルシューティングなどの備忘録

見出しタグ内のテキストをtitleタグに設定

やりたいことは至って単純なんです。

  1. headerやfooterはincludeして使いまわすため、header内のtitleタグを各ページに合わせて変化させたい。
  2. 各ページには、見出しタグh2でページタイトルがついている。
  3. だから、それを取ってきてtitleタグに自動で書き加えたら楽な気がする!

jQueryなら簡単なんですが、titleをDOMで出すのは流石に良心が痛むので(SEO的に)、phpでやることにしてググってみました。

↓↓ 辿り着いたありがたいサイトを参考にしてみました。
PHPでWEBページのタイトルを抜き出すサンプル

function get_pagetitle(){
$url = 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']; //当該ページ
$html = file_get_contents($url); //HTML取得
// ↓マルチバイトencode。今回はもとからutf-8なので不要。
// $html = mb_convert_encoding($html, mb_internal_encoding(), "auto" ); 
if ( preg_match( "/<h2 class=\"page_title\">(.*?)<\/h2>/i", $html, $matches) ) {
    $pagetitle = $matches[1]; //h2を丸ごと取得
} else {
    return false;
}

return strip_tags($pagetitle); //タグを除いて、中身だけ返す
}

できたー!
できた……が、file_get_contentsを使わずに、現在のページを舐めることはできないの!?
そして、わかっていたけどpreg_matchの重さは異常!!
たった一つのタグを探し出すための仕掛けなのに……(TT

結論:ファイル名とタイトルの連想配列を作っといて、foreachするのが一番良いと思います。

Filed under: ,

半年前にEmmet LiveStyleが正式公開されてた件について

半年も気づかなかっただなんて……完全に出遅れた!!orz
と思っていたんですが、意外と気づいてない人の方が多いのかな?あんまり話題になっていないような気もします。

さて、二年ちょっと前、ちょうどこのサイトをリニューアルした頃、Emmet LiveStyleのbeta版を触って遊んだ覚えがあります。確かに便利ではあったんですが、既にcssの記述はSass
(SCSS記法)に移行していたため、拡張子scssのファイルをいじれないEmmet LiveStyleは実用的じゃありませんでした。
ですが、まさしくネックなっていたその部分を克服し、Emmet LiveStyleが正式公開されたそうです。DLは公式からできます。
Emmet LiveStyle 公式サイト

これで、関連づけた.scssをいじれば、ブラウザ(Chrome)をF5しなくても即時反映。
逆もまた然りで、Chromeのデベロッパーズツールでスタイル修正すると、関連づけた.scssに即時反映。

便利!!

まだ少ししか触ってないのですが問題なく動いてくれたので、次のコーディングが楽しみになってきました。

—–
(追記 2016/10/19)

その後、わくわくしながらEmmet LiveStyle使ってみました。今からもう3か月くらい前ですが(笑)
使い心地は、Dreamweaverのcssパネルをいじるかのようなcssコーディングでした。
Sublime Textに出会う前なら、移行してたと思いますが、HayakuやらBourbonやら自分用Mixinやらのぬるま湯に慣れ親しんだ私には、残念ながらまどろっこしくて耐えられず……。
あんまりレビューを見ないと思ったら、私と同じ思いをした人が多かったと……きっとそういうわけだったんですねぇ。なんか悲しい。

実は、Emmet LiveStyleにがっかりした後、構築環境が便利にならないかなーと思ってgulpにも手をだしてみました。
compassより何倍もコンパイルが速いし、オートで画像最適化とかcss最適化とか色々出来て確かに便利なんですけど、プロジェクト毎にgulp用のファイルを用意しなければならなず、管理が煩雑になるのでやめました・というより、決して軽いとは言えないフォルダ、しかも同じものがHDD内に何個もあるなんて、悪!無駄!断捨離断捨離!!というのが本音です。
グループでプロジェクトに当たってるんならいいんでしょうけどねぇ……。
ぴったりの構築環境の構築wって、なかなか難しいです。

Filed under:

iOSの、hover付いてると2回タップ必須なバグについて

こういうの↓があったとしたら…。

<style type="text/css">
.menu{
    width:200px;
    text-align:center;
    background:#f7f7f;
}
.menu::hover{
    background:#e5e5e5;
}
</style>

<ul class="menu">
    <li>
        説明や<img>とかいれつつ
        <a href="link.html">リンク</a>
    </li>
</ul>

理想:リンクを[タップ]する → hoverが適用され背景色が変わり、リンク先にとぶ
現実:リンクを[タップ]する → hoverが適用され背景色が変わる → もう一回リンクを[タップ]する → リンク先にとぶ

ってなることを言っています。
設定されているイベント的には「二つ」なんだから2回タップ、っていう理屈もわからんでもないです。
だたこれってiOS8系で発生してたバグで、iOS9ではちゃんと潰されています。

が、hoverにhoverを重ねてリンクさせるデザイン案件がありまして同様の問題が起こりました。
iOSは最新の9.3.1です。
Androidは平気なのになー……Safariはイベントに対する解釈がかなり違うのかな。

理想:リンクを[タップ]する → 隠れていたBOXがでてくる → BOX内のリンクを[タップ]する → hoverが適用され背景色が変わり、リンク先にとぶ
現実:リンクを[タップ]する → 隠れていたBOXがでてくる → BOX内のリンクを[タップ]する → hoverが適用され背景色が変わる → もう一回リンクを[タップ]する → リンク先にとぶ

どうにかしなくてはいけないと、どうにかしたのが下記scriptです。
htmlは省略。上記htmlのliに、ulネストしてリンクが入ってると思ってください。

//まずはユーザーエージェント確認
var _ua = (function(u){
  return {
    Tablet:(u.indexOf("windows") != -1 && u.indexOf("touch") != -1)
    || u.indexOf("ipad") != -1
    || (u.indexOf("android") != -1 && u.indexOf("mobile") == -1)
    || (u.indexOf("firefox") != -1 && u.indexOf("tablet") != -1)
    || u.indexOf("kindle") != -1
    || u.indexOf("silk") != -1
    || u.indexOf("playbook") != -1,
    Mobile:(u.indexOf("windows") != -1 && u.indexOf("phone") != -1)
    || u.indexOf("iphone") != -1
    || u.indexOf("ipod") != -1
    || (u.indexOf("android") != -1 && u.indexOf("mobile") != -1)
    || (u.indexOf("firefox") != -1 && u.indexOf("mobile") != -1)
    || u.indexOf("blackberry") != -1
  }
})(window.navigator.userAgent.toLowerCase());

//PC以外なら
if(_ua.Tablet || _ua.Mobile){ 
        $(".menu li li").on('mouseover',function(){
          window.location=$(this).find("a").attr("href");
        });
}

最初は厳密にtouchイベントを書いてみようとしてたんですが、試しに入れてみたmouseoverが鍵でした。※tapではアウト。
hoverも適用されるし、ページ読み込み中のプログレスバーもきちんと見える。
一先ず解決です。

Filed under:

JSON形式のデータを用意してPHPで配列処理

すっかり春めいてまいりました。我が家の庭では、去年植えた枝垂れ桃が無事開花。
今日、郵便受けに入ってたフリーペーパーの星占い(よく当たる気がする)では、私の運勢も開花していました。

『学問の世界に誘われ、語学習得すると吉』

ええ、ちょうどJSONとPHPにイザナわれるところでしたから……orz

ということで、いつもメールフォームで郵便番号から住所入力したりするのにお世話になっているJSON。
↓food.json。こんな感じの構造です。

[
  {"food":"肉","name":"牛","kana":"ウシ","like":"2"},
  {"food":"肉","name":"鳥","kana":"トリ","like":"5"},
  {"food":"乳製品","name":"チーズ","kana":"チーズ","like":"5"},
  {"food":"乳製品","name":"ヨーグルト","kana":"ヨーグルト","like":"4"},
  {"food":"野菜","name":"ほうれん草","kana":"ホウレンソウ","like":"3"}
]

今回はデータがExcelで用意されていたので、ソートを済ませてからマクロ使ってJSONに落としました。
上記の例だと、第一キーがfoodで、第二キーがkanaですね。
私はstabuckyさんのマクロを使わせてもらいましたが、ググッたら結構出てくるのでお好きなのを。
ExcelのテーブルをJSON形式に変換するマクロ | You Look Too Cool

出来上がったJSONがUTF-8無印で保存されているか確認してサーバにアップします。
ちなみに私はBOM付いててハマりました。元がExcelなんだから当然チェックすべきポイントですな……反省。

次はPHPでJSONを配列として扱うために、json_decode()を使います。

$url = "json/food.json";
$json = file_get_contents($url);
$food = json_decode($json,true);

echo var_dump($food); //NULLならBOM付いてるかも

ちゃんとdumpできてたら、あとはお好きなように~です!

Filed under: ,

Event Organiser覚書

珍しく間を開けずに投稿。ちょっと忘れそうなので走り書き。
……そうだ、これが本来の使い方だった。(゚Д゚)

カスタム投稿タイプ利用の、イベントカレンダープラグインとしてなかなか優秀らしいEvent Organiserを使うことに。

Event Organiserの特徴

パーマリンクは個別設定可

設定→Event Organiser→パーマリンクから、各種見本パスの太字にあたる部分を変更することで、パーマリンクを設定することが出来ます。
今回ネックとなったのは、変更できない部分。太字じゃないとこ(=_=;

個別記事ページのパーマリンクは、他に合わせてpost_idにしたいのに、Event Organiserではslug…。
固定ページならしっかり付けますが、投稿記事のslugは面倒でわざわざ変更しないので、そのままタイトル流用になっちゃう場合が多いと思います。
プラグインそのものを編集してしまおうかとも思ったんですが、slugにpost_idベースの名前をいれてやれば良いんだ!と気づけたので、いつも一方的にお世話になっているjim912さんのサイトでコード発掘。
投稿スラッグを自動的に生成する
……今後はどのサイトにもこれを入れとこうかな。

各ページ用に専用テンプレート利用可

設定→Event Organiser→基本 で、どんなテンプレート名のものを用意すればいいか、書いてくれてます。
ちょっとしたことだけど手間が減ります。

カレンダー表示用等、各種ショートコード有

別に固定ページを用意して、そこにショートコード書いても良かったんですが、Event Organiserのarchiveページにカレンダーを表示させればURL的にも美しくおさまるので、カレンダー表示用のショートコードをアーカイブテンプレートに書きました。

エラーになりました。orz

仕方ないのでevent_fullcalendarでreadme.txtに検索かけたら、eo_get_event_fullcalendar();とかいう元関数を発見。ああよかった。

// ↓これは駄目
<?php echo do_shortcode('[eo_fullcalendar]'); ?>

// ↓これが正解
<?php echo eo_get_event_fullcalendar(); ?>

——————————–
2016/02/11 追記

Event Organiser Codexを発見!!

Filed under: