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

半年前に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:

Google Fontsで代替フォント3選

あっという間に季節が過ぎてもうすぐ椿さんですね。
「……長い間ブログさぼってるやろ」って先日突っ込まれたトランスビットの中の人です。
無論、気づかれていないなどとは思ってもいませんよ……ええ。

さて、スマホの普及率が高くなったので、どこのサイトでもwebフォントが最早デフォルトのように使われていますね。
トランスビットでは、Windowsでも、Macでも、スマホでも表示できるということで、ポイントとなるような欧文のフォントには、Google Fontsが便利でよく使ってます。
Androidをぶったぎったら、システムフォントのみで済ますことができるんですけど、そういうわけにもいきませんしね。

Google Fontsで使える代替フォントの記事は、ググれば色々でてきます。
ただ、大抵ベーシックな物だけを求めている私には、情報過多。
ということで…

「アレ」と似ているGoogle Fontsの覚書:トランスビットバージョン

ゴシック

ド定番。安定のHelvetica、Arial、Gill Sans →  Open Sans または Lato

セリフ系

電話番号にも最適。みんな大好きTimes New Roman → Lusitana

その他

一気に溢れる品の良さ。碑文体のOptima → Cinzel

ゴシックの場合、Open SansよりLatoの方がすっきりしてて好みです。
両方とも選べるくらいウエイトがあるので、Arial Blackの代わりにも。
数字だけOpen Sanを使ったりもするんですが、そんな時は下記のようにパラメータを与えてサブセット化すると、軽量になって素敵。

<link href='https://fonts.googleapis.com/css?family=Open+Sans&text=089623-' rel='stylesheet' type='text/css'>

セリフ系は書体数が結構あるんですが、Lusitanaは字面から字詰めまでTimes New Romanに酷似しています。
Cinzelは……ほんと、よくぞ無料で提供してくださいましたっ!(TT)

今後も代替フォントを見つけたら、書き留めていきたいと思います。
——
追記(2016/07/06)

セリフ系の電話番号

A-OTFリュウミン → Vidaloka

Filed under: ,