Webに胸きゅん

WebクリエイターがWebの技術やマーケティングに関することを自分の勉強もかねてつらつら書いています。

“思考に網を掛ける”ということ

以前、会社でコーディングの勉強会に参加しているメンバーに向けて話したことなのですが、知識って何のために付けるの？と言うお話です。

思考のネットワークを作る糸一本が知識ひとつ

私は、知識を増やすことは、思考に網を掛けることだと思っています。

それは、何か情報が自分の中に入ってきたときに、その情報が思考の網に触れて「ん？」「あれは、以前どこかで...」という引っかかりを得て、そこから思考が始まると思うからです。

入ってきた情報が自分の知識になく、興味のある分野でもないときは、網に掛からないので素通りしてしまいます。

ですが、その素通りした位置が自分の好きな分野に近くて、後に必要になるのに今は知識がないから引っかからなかったとしたら、とてもとてももったいない。

人の思考の網は興味のある分野ほど網の目が細かく、そこから遠ざかるほど、荒く、または網がなくなります。

なので、自分の興味ある分野に近い知識から増やして、網の目を細かくしていこうと言うことをメンバーに伝えました。

網の目を増やすのはカンタン

知識をつけると聞くと難しく思われるかもしれませんが、実はそれほど難しくなかったりします。

知識を付け始めるのに専門書のようなものは要りません。その知識を深いところまで理解してくると自ずと必要に駆られるのが専門書です。

最初は、ウェブ検索で十分です。今の世の中には、Wikipediaという大変便利な物がありますので、気になったことはすぐ検索してしまいます。

ここで気をつけることは、得た情報を必死に覚えようとしないことです。人間そんなに簡単には覚えられませんので、覚えた気になる程度でとどめてください。

それではすぐ忘れてしまいますが、それで構いません。それは、すべてを完璧に忘れることはないからです。今後どこかでその知識に関連する情報が入ってきたときに、違和感や引っかかりを覚えます。それは、思考にとても細いけど確かに網が一本増えているからです。

そして、その時にまた同じ事を調べると以前調べたときの知識が蘇り、より太い糸にすることができます。そして、また新しい糸も併せて張られるので思考の網が広がります。

こうやって徐々に網を広げることは大した苦労はありません。覚えようとすると大変なので、できるだけしないようにしましょう。

思考の網は破れない

思考の網が破れることはないです。忘れてしまって、引っかかりを覚えにくくなることはありますが、それはそこの糸が細くなってしまったか、たわんでしまっただけなので、きっかけを与えて網を張り直せばすぐに元に戻ります。

なので、過去の知識は定期的に振り返ってテンションを保つようにしましょう。このふりかえりの期間は人によって違うと思うので、自分に無理のないローテーションで網に触れて張りを確かめましょう。

網の大きさを人と比べない

網の大きさ、知識量は人それぞれです。糸の太さも同じなので、大きければよい訳ではないです。

自分に必要ない網もあります。それを人と比べて自分を卑下する必要は全くありません。

ただ、人の網を見て参考にするのは大いに結構なことだと思います。網を参考にすると、限りなく細くて放っておくと切れてしまう糸の元、設計図のようなものができるはずです。そこですかさず調べることで同じ分野に網を広げることが容易になります。

人の網は参考にとどめましょう。

まとめ

コーディングの勉強会は、デザイナーやディレクターの新米さんには不要に思えたり、つまらなく感じられたと思ったので、無駄に思える知識を自分の業務に活かすきっかけ作りになればとこの話をしました。

無駄に思える知識も、そこから得た発想でよい施策を打つこともできたりします。知らないと発想の幅も広がらないので、日々網張りをちょっとずつしましょう。

「ぐーたま」（GoogleTagManager）で使える？カスタムJavaScriptコードサンプル1

亀更新でまったく記事がかけていないので、コードサンプルとか載せて更新した気になろうという自分のモチベーションのための記事です。

※ここに載せるサンプルは、一応テストした上で載せますが、ご利用は自己責任でお願い致します。

知人の指摘で今後GTMを「ぐーたま」と呼びます。
なぜならかわいいから！（yukki氏 @TakayukiOnaya ありがとうこざいます！）

GoogleAnalyticsでいろいろな情報を取るためのサンプルコード

まず手始めにGoogleAnalyticsで利用できるコードを載せていきたいと思います。

ただ、ネタでしかないようなものも多いので、ただ使えばいいというよりは何かに活用する発想が必要かもしれません。

1. ページ内におけるクリック要素の同要素内の出現順を取得

はい。最初からキワモノコードです笑

ユーザーがクリックした要素と同じ要素のリストから出現順を取得し、返すコードです。
使いみちは、、、イベント計測などでどの要素がクリックされたのかを詳細に計測する場合などに使えるかも、、しれません。
番号で取るくらいならID振れって思いますが。

function () {
  var _c = {{Click Element}};
  var _t = _c.tagName.toLowerCase();
  var _d = document.getELementsByTagName(_t);
  var _a = Array.prototype.slice.call(_d);
  return _a.indexOf(_c);
}

こんな感じです。

解説としては、2行目が GTMの組み込み変数によるClick要素の取得です。
3行目はその要素のタグ名を取っています。（a要素なら 'a'、p要素なら 'p' という具合）
4行目でそのページのDOMから3行目のタグ名を持つ要素を抽出しています。
5行目はHTMLCollectionとして返ってきた_dを配列の機能を借りて配列化しています。
6行目でその配列の中からクリック要素を探し、その添字（0から始まる番号）を取得して関数の返り値にしています。

メリットとしては、GTMはいじれるケド、ソースはいじれないクライアントのサイトをあとからクリック計測したいけど要素が特定できないとき、、、とか？に使えるかもしれません。
やっぱりID追加しろって話ですが笑

2. a要素のリンク先によってイベントラベルを変える

これは結構使えるのではないかと思ってます。
変数を読み込む先を変えれば、特にイベントラベルに限った使い方ではないので色々使えると思います。

function () {
  var _t = '';
  var _e1 = new RegExp('条件1に該当する正規表現');
  var _e2 = new RegExp('条件2に該当する正規表現');
  var _c = {{Click URL}};
  if (_c.search(_e1) !== -1) {
    _t = '条件1に当てはまるときのイベントラベル';
  }
  else if (_c.search(_e2) !== -1) {
    _t = '条件2に当てはまるときのイベントラベル';
  }
  else {
    _t = 'その他のリンク';
  }
  return _t;
}

ざっくり解説ですが、正規表現で条件を設定し、その条件にクリック対象のa要素のhrefが該当する場合、任意の文字列を返す形になります。

もちろん、正規表現の条件とif文の条件を追加すればいくつでも分岐できます。

2´. a要素のリンク先によってイベントラベルを変える（正規表現の表を利用）

Twitterのコメントで、条件分岐に「正規表現の表」を利用するとJavaScriptのコンパイルが発生せず、バージョン作成が軽く済むようになるとご指摘をいただきました。
それを踏まえて、2を「正規表現の表」で行う方法を記載したいと思います。

コメントいただいた ハレノさん（ @hareno_t ）、貴重なご意見ありがとうございました。

まず、変数の「新規」ボタンから新しい変数を追加します。
変数タイプを「正規表現の表」を選択してください。

f:id:cuen-studio:20180912130434p:plain

2のカスタムJavaScriptと対応した項目を埋めたものが下記になります。

f:id:cuen-studio:20180912132040p:plain

「入力変数」には、組み込み変数の{{Click URL}}（ a 要素の href の値が入る）を選択します。
「＋行を追加」ボタンを押して条件セットを追加し、「パターン」に条件に該当する正規表現を入力します。（e.g. ^http\:\/\/.* , ^\/service\/$  etc. ）
「出力」に条件にあてはまったときに渡す値を入力します。
条件にあてはまるものが無かったとき（else に該当）に渡す値を「デフォルト値」に入力します。

これで、2で行ったカスタムJavaScriptと同じ処理になります。
この変数をイベントラベルなどに設定して利用します。

もちろんこの変数をカスタムJavaScriptの中で使うこともできます。
条件分岐処理で正規表現を使う場合は、こちらが楽ですね。

随時更新

とりあえず、一つの記事に最低5件ほどのサンプルが貯まるまでは随時更新したいと思います。

こんなことできない？とか、こここうできるんじゃない？みたいなご意見があればコメントいただければ、反映したいと思います。（ネタがないから他人任せ）

みなさまの良い解析ライフの一助となれば幸いです。

今日は疲れたのでたった2件ですがコレにて公開

※2018.09.12更新：2の正規表現の表で実装したパターンを追加しました。

XD Meeting 18初めて参加してみた。

2018年8月22日（水）に六本木で行われたAdobe XD Meetingというユーザーイベントに参加してきましたので、レポートとして残したいと思います。

結論を先に書けば、XD使いたい方は参加おすすめです！テーマが回によって違うようなので、目的にあった時に参加するのがいいのかもしれません。

参加理由：提案資料とかワイヤーをpptで作るの苦痛だったのでXD使えるようになりたい

ppt使い慣れないうえにある程度細かいところそろえたくなってしまう人間が資料作ると、コーディング1ページするより資料1ページ作る方が時間かかります。

もう、無駄なんですよね。無駄無駄。

気にしなければいいっていわれるかもしれませんが、しないとしないで集中できないから進まないんですね。これが。

それで目を付けていたXDに手を出したんですが、いままでスライドの中に納めるように情報化してたので、実際の環境のサイズに合わせた場合、説明とか仕様とかどこに書くねん！！！ってなったわけですよ。

欄外が欲しいんです。欄外。

でも、XDの欄外はプロトタイプでは見れないし、アートボードの中に説明とか仕様を入れたらプロトタイプで見るときに邪魔になるんです。要素ではないから当たり前なんですが...。

まあ、そんな感じでヒントが欲しかったので、恩師の関口和真（@KAZUMA87）さんが以前登壇されていたXDのイベントに参加してみようと思ったのがきっかけでした。

Adobe XD Meeting 18

ちょうど開催が予定されていたのが今回のもので、テーマがこれまたドンピシャの事例中心の勉強会とのことで、速攻申込みし...ようとしたんですが、事前決済のPayPalが諸事情あり使えず、泣く泣く当日支払いの補欠枠で申し込みました。

現在は事前決済出来るようになったので次回以降は問題ないです！

結果は増枠で無事参加できたので、参加検討してる方は取りあえず当日で申し込むのがいいようです。

このAdobe XD Meetingは、湯口りさ（@risay）さんが主催のユーザーイベントで、司会の北村 嵩さん（Webデザイン必携。: プロにまなぶ現場の制作ルール84の著者）が仰るには、湯口さんのファンの集いだそうです。

回の冒頭では、湯口さんによる直近のXDアップデートについてのセッションがあり、多機能化するXDの新機能をいち早く理解することが出来ます。

その後、登壇者の方々の発表があり、後半は懇親会という流れでした。

事例ひとつ目

ひとり目の登壇者の方は、ベンチャー企業のデザイナーの方で、スタートアップにおけるXDの利用方法をお話しされていました。

体制が整っていない状態。

人も少なく分業は無理なうえ、基本兼業の環境の中で、要件出しからリリースまでを責任者の方とツーマンセルで行う中で、その方はプロトタイプはもちろんデザインツールとしてXDを使っているようでした。

ただ、やはり処理能力がデザインツールほど高くないようで、大量のパスをリピートグリッドでコピーしようとすると確定でフリーズするそうです。

その方のメリットとしては、ご自身の帰宅後でもあらかじめURL共有をしておくことで、他の方の作業進行を止めない点とのことで、これは納得しました。

属人化を防げるというのは、弊社内でも大きなメリットです。

事例ふたつ目

ふたり目の登壇者の方は、出版社と電子書店の中継ぎシステムを開発する上場企業にひとり目のインハウスデザイナーとして入社されたデザイナーの方でした。

この方の発表は、デザイナーがビジネスとテクノロジーの2つが強く結びつく開発関係の業界に飛び込んだときのメリット・デメリットとうまくやっていくコツを主軸に、その中でXDがあることでデザイナーにどう有利に働くかをお話しされました。

ひとり目デザイナーにとってのメリットは、

  1. やりがいが大きい。
    ちょっとしたことでもデザインを喜ばれる。それこそ、バナーひとつ作るだけでもありがたがられる。
  2. 色々なデザインに携わることができる。
    デザイナーがひとりなのでアレもコレもやることになる。スキルの幅がかなり広がる。 
  3. 経営層に近い位置で活躍できるので、最初からある程度の決裁権を持てる。
    デザインのトップが自分になるので、今後のキャリア計画を立てやすい点もGood。

逆に、デメリットとして上がっていたのが、

  1. コーディングが出来ない。
    デザイン業務で手一杯。逆にコーディングしたくないデザイナーにとってはメリット。
  2. クオリティを追求できない。
    周りがすべてデザインの手が入っていない荒れ地なので、7～8割のクオリティで次々整備していかないといけない。結果を出せないと辛い作業が続くことに。
  3. デザイナーの伝手がない。
    どうしても自分一人では回せない状況にすぐなってしまい、その際のリクルーティングはデザイナーの自分がやらないとうまく行かない。

自分であれこれ決めて、主導して結果を出していきたいデザイナーにとってはうってつけの環境ですね。

また、この方のプロトタイプをスライドの中でお見せいただきましたが、私にとって目から鱗のテクニックが多く、この回に求めて来た答えがそこに詰まっていました。

私の参加理由に書きましたが、今回の目的はプロトタイプには邪魔だけど、資料としては入っていないと困る説明や仕様のテキストをみなさんはどこに入れているんだろう？と言うのを探ることでしたが、その解決策になりそうなテクニックに、説明を入れたアートボードを増やしてそこに対するテキストの導線を設けるやり方をこの方のプロトタイプの中で見ました。

また、ステートに関する表記もプロトタイプの中に書き込んでいらっしゃり、要素じゃないことがしっかり伝われば説明を入れることは問題なさそうでした。

私も固定観念に囚われずいろいろと試してみたいと思います。

事例みっつ目

最後の登壇者の方は、ご自身で様々なWebアプリケーションを制作していらっしゃるエンジニアの方で、そのつながりで企画・進行を任されることが多くなったというフリーのディレクターという肩書きです。

この方のセッションは、ディレクターがXDを利用する場合の、特に動きの確認やチームの認識合わせに特化した“ゆるい“XDの使い方というテーマでご自身の体験を中心にお話しされていました。

前のお二方は、デザインツールとしての利用でしたが、この方は、プロトタイプツールと割り切って細かいデザインの調整は一切せず、言葉だけで伝えた場合の認識の相違を防ぐことに特化した使い方をしていらっしゃいました。

この方のお話の中で印象的だったのは、ディレクターとして一番NGなのはメンバーを迷わすことで、メンバーが迷うと自己判断をさせてしまい認識の齟齬が生まれて、結果大きな手戻りが発生する、作業をすすめる中で不明瞭なものは言葉だけでなく図で共有すると伝わりやすいというものでした。
言葉で伝えづらいものはすぐに図にする、それは簡単なものでいいとなるとまさにXDは最適だなと感じます。

また、この方が最後にpptの横長ワイヤーを撲滅するためにXDを使うことを勧めていくと仰っていたのに、pptが苦手な私は感銘を受けました。
私も弊社内で脱pptを推し進めていきたいと思います。

まとめ的な

ここに書いたことは、私の主観が入っているので登壇者の方の趣旨とは違うことを書いていることもあると思います。
詳しい内容や会の雰囲気はイベントページやsnsのまとめなどをご覧頂くことをおすすめします。

ただ、初心者ながらXDの素晴らしい部分を幾ばくかを理解でき、今まで漠然とプロトタイプツールってワイヤーが簡単に引けるだけのものと思っていた認識が変わりました。
XDを使わないことはそれだけで大変な損です。
これは間違いないと確信しています。

XDは、使う方の立場によって柔軟に姿を変えて最大限のメリットをもたらしてくれる可能性を秘めているので、デザイナーだから、エンジニアだからとこだわらずに始めることをおすすめします。

非じょーに重い腰を上げて、ブログ、開設しました。

はじめまして、同僚に“きゅん“と名付けられたフロントエンドエンジニアの肩書きを持つものです。

社内では主にHTMLコーディングとWordpressを用いた静的・動的なWebサイト制作を行っています。
使用言語は、HTML/CSS/JavaScript/PHPがメインです。
一応ですが、3級ウェブデザイン技能士とHTML5プロフェッショナル認定試験Lv1を持っています。

また、とあるきっかけからWeb解析士の資格を取り、Webのマーケティングを通した事業の成果達成のサポートもしています。
こちらに関しては、Web解析士とネットマーケティング検定、GAIQ（2019年7月30日まで）を持っています。

いまさらブログを始めた訳

“インプットが増えすぎて、自分の中だけで情報の整理ができなくなってきた“
と、いうのが一番の理由です。

仕事上、学ぶ必要のあることはそう多くはないのですが、生来の興味の尽きない質のため、いろいろなことに手を出してきました。
それはそれで役立つことも多くよかったのですが、最近は活用する場で深く理解しきれておらず、活用できないということに陥ることも増えてきました。
まとめきれずに活かせないという本末転倒な状態に陥りつつあるのを何とかしようと思い、以前から始めようと思っていたブログに備忘録としてまとめることにしました。

書きたいこととか

基本的には、フロントエンドのテクニックとか、Wordpressのカスタマイズなど、私が普段の業務で行っている中で、はまってしまった事やその解決策、皆さんのお役に立つのではないかと思ったものを記事にしていこうと思っています。

また、WebマーケティングとWeb解析に関することも発信して、ご意見をいただける場にしたいと思っています。

あまり文才が無いので、読みやすい文章にならないかもしれませんが、気長にお付き合いいただける方に一人でも多く出会えることを目標に続けていきたいと思います。