Because We Love Happy Coding

フリーライターがPHPとかJavaとか勉強してます

カンプの前にシナリオが欲しくなった

カンプを書こうとしたのだけれど、シナリオがないと書けないと感じたので、シナリオを書くことにする。

開発上の「シナリオ」という用語には、ユースケースの中で想定される「シナリオ」みたいな意味合いがあるけれど、今回のアプリの場合、それよりはもうちょっとゲームソフトのシナリオに近いもの。ゲームのスクリプトとか、原稿とか言った方がいいか。

今作ろうとしているのはゲームっぽいインターフェイスの、いわば生産性に関するソフトのゲーミフィケーションなので、ゲーム風のインターフェイスで利用することになる。カンプを作ろうと思ったら、そのインターフェイスのパターン出しが必要になってきた。

メインの通常パターンは割と単純なんだけど、設定画面とか、初期設定とかの辺りで例外的に発生するパターンを書き出す必要を感じた。

実際書いてみたら大した量じゃなくて、1日でだいたい必要な原稿は書けてしまった。これなら今後の拡張を含めても、レイアウトパターンはそんなに多くなさそう。

カンプ描く前にはあらゆる画面上の要素を整理しないといけないので、思ったよりも骨が折れる。これも慣れの問題なのかなー。 f:id:mogami74:20171029170244j:plain

モザイクかけたら何がなんだかわからんな(笑)

カンプの原紙を作った

最近、個人プロジェクト「LvUp↑」のカンプを描いている。

カンプに適していると言われるツールがいろいろあるけれど、私はIllustratorの練習も兼ねてIllustratorで描くようにしている。Adobeに高いお布施を払っているんだから、少しは取り戻さないとね。それを言ったら、AdobeCreativeCloudのツールでもカンプを意識したのがあるけれど、そちらはまだ使ってみてもいない…。

「Office事件簿」ブログのCSSを描きながら感じたのが、きちんと全テンプレート×全サイズのカンプを描くのがやはり理想、ということ。中途半端に描くと、後から「あっ、サイズ大きくした時どうなるんだこれ」とか「このテンプレートに適用しづらい」とか出てくる。

Bootstrapでは4つのサイズに分けるらしいので、私もそれに倣うことにした。実感としては、普通のサイトは3つに分けたら十分じゃないかという気もする。960以下のスマホタブレット端末、960〜1200のPC、1,200以上の高解像度環境。でもまぁ、私は勉強中の身の上なので、Bootstrapに倣っておくことにしよう。

で、WordPressのテンプレートに適応する形で1ファイル作ることにする。WordPressのfront-pageに対応する用、front-page.aiファイルを作る。

中にはIllustratorのアートボードを4つ、サイズ違いで用意する。幅320px(iPhone5)、768px、998px、1200px。高さは、スクロールするので多めに1200〜2000くらいでいいのじゃないだろうか。

f:id:mogami74:20171030173932j:plain

こうして画面サイズを横並びにして作ることで、他の画面サイズも意識しながらカンプを設計することができる。

Local by Flywheelがいろんな意味ですんごい

coliss.com

この記事を見て導入してみたんだけど、たしかにすっごい。こんな簡単にローカル環境が作れるなんて。

問題は名前の「Local」が普通名詞過ぎて情報が探せない。Local by Flywheel にしないと出てこない。これでFlywheelという名前を覚えさせる戦略なのかそうなのか。だとしたら賢いかもね。

Dreamweaverで編集できるようにしたいんだけど、これは私の知識不足のせいか、まだうまく設定できない。

あともう一個問題があるとしたら、運営から「連絡してね! 君と話したい!」メールが何本か届くこと。英語で心底「連絡とりたいんだ! 君に!」「忙しいのかい? でも良ければ連絡してよ!」風の猛烈なアタックが繰り返し来るので、え? 本気? とかって思ってしまうけど私、あなたとチャットで何を話していいのかわからないの。

その他参考サイト

ferret-plus.com

nelog.jp

www.cherrypieweb.com

capitalp.jp

ChromeのユーザースクリプトでGaroonのスケジュールボタンをフッタに追加する

Garoonを扱っていてふと気になったのが、特定の画面からスケジュールを表示させられないこと。

スケジュール画面の中で「予定」をクリックすると、詳細画面に飛ぶわけなんだけど、詳細画面には「週」表示ボタンなどがないので、いちいち「戻る」しなければならない。これが面倒。

魔技JavaScriptを操る私としては、Chromeのユーザースクリプトを使って解決しようと思い立った。でも魔技jQueryを使いたかったので、Tampermonkeyを使ってラクをすることにした。

jQuery(document).ready(function($){
  $('#footer').prepend('<div class="global_navi-viewChange-grn"><ul><!-- using tag strip to delete all space between tag li--><li><a class="global_naviBackTab-viewChange-grn viewChangeLeft-grn" href="/g/schedule/group_day.csp?event=&amp;bdate=2017-10-19&amp;gid=login&amp;search_text=&amp;p=">グループ日</a></li><li><a class="global_naviBackTab-viewChange-grn" href="/g/schedule/index.csp?event=&amp;bdate=2017-10-19&amp;gid=login&amp;search_text=&amp;p=">グループ週</a></li><li><a class="global_naviBackTab-viewChange-grn" href="/g/schedule/personal_day.csp?event=&amp;bdate=2017-10-19&amp;gid=login&amp;search_text=&amp;p=">日</a></li><li class="global_naviBack-viewChangeSelect-grn"><a class="global_naviBackTab-viewChange-grn" href="/g/schedule/personal_week.csp?event=&amp;bdate=2017-10-19&amp;gid=login&amp;search_text=&amp;p=">週</a></li><li><a class="global_naviBackTab-viewChange-grn" href="/g/schedule/personal_month.csp?event=&amp;bdate=2017-10-19&amp;gid=login&amp;search_text=&amp;p=">月</a></li><li><a class="global_naviBackTab-viewChange-grn viewChangeRight-grn" href="/g/schedule/personal_year.csp?event=&amp;bdate=2017-10-19&amp;gid=login&amp;search_text=&amp;p=">年</a></li></ul></div>');
});
//// @require https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js

TampermonkeyはChromeの機能拡張で、webページに対してJavaScriptを紐付けて実行してくれる。以前からこういうのがあることは知っていたけれど、以前はJavaScriptがよくわかっていなかったので使いこなせなかったのだ。

設定して実行してみると、見事ページの下の方、フッタのところにカレンダー項目が表示された。

カレンダーページと関係ないページでも同じように表示されちゃうけど便利だからまあいいか。

jQueryじゃないraw JavaScriptもたまに使うようにしないと、このままじゃ忘れちゃうなぁ……。

傍点、HTMLのルビで出せるじゃん……

タイトルそのまんまの話なんですけど。

以前、といってももうン十年前に、「PCで傍点を出せる数少ないソフトはWord」という刷り込みをされていたので、ずっと「PCで傍点とか難しいんだよねー」と思い込んでいた。

先日、記事を書いていてふと気がついた。rubyタグ使えば傍点なんかピースオブケーク・・・・・・・・じゃん。

<ruby><rb>ピースオブケーク</rb><rt>・・・・・・・・</rt></ruby>

ブラウザが対応してrubyタグが実用的になったのもここ数年、と記憶しているけれど、もうメジャーなブラウザ全部対応してるし、時代は変わるなぁ。

Wordpressで「Uncaught TypeError: jQuery.easing[jQuery.easing.def] is not a function」

Wordpressで「Uncaught TypeError: jQuery.easing[jQuery.easing.def] is not a function」というのが解決しなかったので、解決策を探した結果の備忘録。

wordpress - jQuery.easing[jQuery.easing.def] is not a function - Stack Overflow

jQuery.easing [jQuery.easing.def] is not a function | Gilluminate - By Jason Gill

Is caused when JQuery javascript doesn’t load before the plugin js.

jQuery.easing エラー しちゃってスライダー動かない件 | memodesu

詳細はないけど、3つの方策が示されている。

jQuery.easing[jQuery.easing.def] is not a function · Issue #1466 · Dogfalo/materialize · GitHub

(function($, undefined) { <easing plugin here> }) (jQuery);

wordpress - TypeError: jQuery.easing[jQuery.easing.def] is not a function - Stack Overflow

ContactForm7プラグインheader を呼び出しているせいで、headerを2回呼んでいるのではないか説。

wordpressでslickを実装したらコンソールエラーがハンパなかった件 | huwahuwa.org

jquery の二重読み込み。

結果

結局、以下のコードで囲む、という方法で無事動いたので、よしとする。ちょっと理由が今一つわからんけど。 ''' JavaScript $(document).ready(function() { }); '''

【罠】「クリックすると開く」メニューがiPhoneで動作しなかった原因が罠

コーディングをしていると「それは罠だろ」と思う瞬間があります。

教科書通りに組んでいるのに動作しない。何がおかしいのか一生懸命に調べて、そして分かった時の「 俺は悪くない 」「 そんなのわかるわけないだろ 」感。一言で言うとそれが罠です。

WordPressコメント欄が邪魔なのでたためるようにした

仕事でWordPressのサイトをいじっていたのですが、モバイル画面では記事とコメントとサイドバーが直列に並びます。

  • ヘッダー
  • 記事
  • コメント欄
  • サイドバー
  • フッター

という並び順です。コメント欄はあまり頻繁には使われないのですが、ここが場所を広くとっていると、サイドバーのカテゴリや「最近の記事」などを見てもらう確率が下がります。

そこで、デバイスサイズがモバイルと判断できる時には、コメント欄を最初は非表示しておいて、「コメント」をクリックした時だけ表示する……という施策をすることにしました。

おれの能力…幽波紋スタンドは『jQuery』。その程度のコメントなら クリックで出し入れするのは わけない、、、、

結果、「わけない」ってほどでもないですが、なんとか動くものができ、Chromeの開発者ツールで確認できました。

ところが、念のため自分のiPhoneで表示させてみたところ、「コメント」をクリックしても動かないのです。あれっ? と思ってChromeに戻って試してみると、こちらでは問題なく動きます。

なんだ!? この妙な手応え……!

iPhoneの不気味な仕様らしい

qiita.com

ええーっ。Σ( ̄△ ̄;)

俺は悪くない 」「 そんなのわかるわけないだろ 」……これが罠です。

jQuery でクリックイベントをバインドする時は

 $('document').on('click', '#hoge', function(){});

とやるのが当たり前だと思い込んでいました。それがiPhoneでは利かない……とは。

とりあえず、上記記事を信じて、cursor: pointerを指定いれたらホントに動いた。唖然。信じられなーい。