mos note.

勉強のメモと執筆の練習を兼ねて。

Windowsでも絵文字を表示できるようにした 😇

MacBook Pro がまたしても壊れ、修理中の間 Windows 使うしかなく、
ブログでも書こうと思ったら、絵文字がアイコンで表示されてることにビックリ。
Macでは問題なく表示されてました)

色々ググって、参考記事を元に Windows のみ Twemoji を使うことにしました。
(下記参考記事から「ライブラリのロード方法のみ」調整)

ライブラリをロード

設定→詳細設定→検索エンジン最適化の「headに要素を追加」

<script type="text/javascript">
if(navigator.platform.indexOf('Win') != -1) {
  document.write('<script src="//twemoji.maxcdn.com/2/twemoji.min.js?11.3"><\/script>');
}
</script>

💡 注意

scriptタグの閉じタグ「/」の前に「\」エスケープすることをお忘れなく!

コミットに絵文字を追加するルールを設けてみた 🎉

絵文字Prefix に出会って早一ヶ月。

f:id:mozchan:20181220225720p:plain

  • 見た目が綺麗 ✨
  • コミットするのが楽しい 😁
  • 何より可愛い ❤️

一方で...

現れた!救世主!! gitmoji-cli の導入 🎉

これを使えば、絵文字を 入力 選択 するだけ ✨

その他、使い勝手を良くするために自身が行ったことをご紹介します。

使用する絵文字のカスタマイズ

絵文字の設定ファイルは、 ~/.gitmoji/gitmojis.json にあります。
圧縮された JSON コードを整形してから始めると良いです。

(参考までに)カスタマイズ後のソースコード

f:id:mozchan:20181222150748p:plain
カスタマイズ後の絵文字リスト(一部)

💡注意

gitmoji-cli をアップデートすると gitmoji.json が 初期状態に戻る or アップデート されます。カスタマイズする場合は、JSON ファイルをバージョン管理しておくことをおすすめします。

コミット時の絵文字タイプ

初期設定 😄→ :smile: に変更した方がよいです。

f:id:mozchan:20181222012644p:plain
初期設定の変更

😄でコミットすると、Sourcetree では正しく表示されないようです。
GitHub では、どちらでも正しく表示されました。

[番外編] .gitconfig の commit.template をコメントアウト

既に .gitconfig の commit.template を設定している場合は、コメントアウトする必要があります。

# [commit]
#   template = ~/.gitmessage

これやらないでいたら、エラーでました 😅

まとめ

gitmoji-cli は今のところ使いやすい印象。タイポ もなくなり、捗っています!
ただ、gitmoji にならって絵文字を増やしてみたものの、使いこなせるのかどうかが懸念点。使ってみて取捨選択していこうと思います。

それと... 本来 絵文字Prefix は、コミットの種類を表すことを目的にしているのですが、始めて間もない私には、絵文字だけで種類を理解することができません。なので、絵文字Prefix の他に コミットの種類を表す形容詞(英語)も追加して対応しています。

例)新機能を追加した場合  
✨ Add: ●●を追加

いつか形容詞なしでも運用できる日をめざして ✊
追記:2019/1/14
一ヶ月使ってみて形容詞ありの方が分かりやすいと思った。

Alfred / emoji-workflow 💩 を追加した

最近、GitHub で絵文字を使うルールを設けたり、ブログの執筆を始めたりしたところ、
😇絵文字 😇を使う機会が増えました。

ただ、、、
絵文字をチャートシートからのコピーするがめんどくさい!

ということで、追加しました Workflow @Alfred。

追加した Workflow

alfred-emoji-workflow 💩

使い方

  1. Alfred を呼び出し emoji と入力する(💩がトレードマーク)
  2. キーワード(例:face)を入力し、絵文字をソートする
  3. 選択すると絵文字 😇がコピーされる
f:id:mozchan:20181213142716p:plainf:id:mozchan:20181213142719p:plain

コピーされる絵文字の初期設定を変更

初期設定

  • 選択:絵文字 😇がコピーされる
  • Alt を押しながら選択:文字コード :innocent: がコピーされる

GitHub での利用が多い場合は、上記設定を逆にしておくと更に使いやすいです。

workflow 初期設定workflow 設定変更後
初期設定 → 設定変更後

設定の変更方法

  1. Alfred にて workflow を開く
  2. alt と書いてある部分をダブルクリック
  3. Active Modifire:none に変更
  4. Run Script に伸びている線の●をダブルクリック
  5. Active Modifire:alt に変更

素敵な絵文字ライフを〜〜💩

構造化データ「JSON-LD」

構造化データ「JSON-LD」↓これについて。

<script type="application/ld+json">
  {
    "@context": "http://schema.org",
    "@type": "NewsArticle",
    "headline": "Open-source framework for publishing content",
    "datePublished": "2015-10-07T12:02:41Z",
    "image": [
      "logo.jpg"
    ]
  }
</script>

構造化データ と JSON-LD の簡単な説明

構造化データ

検索エンジンやその他のクローラーへWebサイトのコンテンツを構造的に把握できるように提示したもの。
構造化データを記述することにより、検索結果がより最適化される可能性がある。
Choose a structured data feature  |  Search  |  Google Developers

構造化データの記述方法(シンタックス)には、以下3タイプある。

また大きな違いは、記述する場所にあると思う。(HTML要素毎 or データ形式
参考:schema.org

JSON-LD

JavaScript Object Notation - Linked Data」の略。2014年1月16日に正式にW3C勧告。 JSONは、文字列に意味を持たせる機能を持っていなかったが、JSON-LDによって文字列に意味を持たせることが可能となった。


📝参考資料
JSON-LDでschema.orgの構造化データ導入をより簡単に

JSON-LD のメリット・デメリット

Google推奨 というのが大きなメリットだが、他のシンタックスと比べたときのメリットとデメリットを考えてみた。

メリット

デメリット

  • HTML本文 と JSON-LD で同じ内容を2回書くことになり、テキスト修正などが入った場合に修正漏れのリスクがある。
  • 誤った内容を記述するとスパムと思われたり、ランクが下がったりなど、検索結果に影響する事もあるので要注意!
  • JSON-LD の記述分、HTMLが長くなり、パフォーマンスに影響があるかも。

😇デメリットの解決方法(個人的な意見)

  • 同一テキストを2回書くことについて
    テンプレートエンジンを駆使して、一箇所に入力したテキストを流用するできるようにすれば、同じことを2回書かなくて済むと思った。

  • パフォーマンスについて
    </body> の直前に記述したり、視認性は悪くなるが最悪圧縮したりすれば、表示速度への影響は少ないかと思う。

Googleでの構造化データの扱い方

  1. Google 構造化データに関するガイドラインを読む
    Understand how structured data works  |  Search  |  Google Developers

    💡重要: 構造化データが検索結果に表示されるとは限りません。

  2. 機能を選んで書いてみる
    Choose a structured data feature  |  Search  |  Google Developers

  3. コードが書けたらテストする
    構造化データ テストツール

  4. 公開後、エラー率を定期的に監視する
    Rich result status reports - Search Console Help


😇参考までに

  • JSON-LD の書き方がわかりやすく記載されてた。 qiita.com

まとめ

コーポレートサイトやECサイトなど、まずは、パンくずリストから始めよう。ただし、必ずしも検索結果に表示されるわけではないので、時間があるときなど、状況に合わせて使用を試みるといいかなと思う。

JSON-LD を追加したパンくずリスト を作ってみた。
ぱんくずリスト(JSON-LD + WAI-ARIA) · GitHub

Hello, world!

はじめまして。

  • 名前:mos(@mozchan)
  • お仕事:Web制作してた。
  • 特徴:健康優良児(らしい)。めんどくさがり。忘れっぽい。

Hatena Blog 開設の経緯

文章を書くことは得意ではなく、 無理やりブログ記事を書いたときは、何も面白くなかった。(むしろ辛かった)

しかし「エンジニアは、技術記事を書いた方がよい。」と聞いてから、 確かに『勉強の記録』にもなるし、何よりも『その時の解釈・解決方法』が記録として残せるので、 やった方がいいなと思った。

今後について

まずは続けることが目標。 GitHub に push した段階で書いてみるとか、それぐらいのペースで投稿予定。

また『技術記事を書く』ことは、自分にとって少しハードルが高いので、 誰かに読んでもらうことよりも、 自分用の『メモ・記録を残す』程度の内容を書こうと思う。

『質 < 量』

がんばろう。自分!笑