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 に出会って早一ヶ月。
- 見た目が綺麗 ✨
- コミットするのが楽しい 😁
- 何より可愛い ❤️
一方で...
- 絵文字コード(例 :tada:)の タイポ が多い 🙀
- Alfred で絵文字コードをコピペ してみたけど、作業工程が多くややめんどくさい 😰
現れた!救世主!! gitmoji-cli の導入 🎉
これを使えば、絵文字を 入力 選択 するだけ ✨
その他、使い勝手を良くするために自身が行ったことをご紹介します。
使用する絵文字のカスタマイズ
絵文字の設定ファイルは、 ~/.gitmoji/gitmojis.json
にあります。
圧縮された JSON コードを整形してから始めると良いです。
(参考までに)カスタマイズ後のソースコード。
💡注意
gitmoji-cli をアップデートすると gitmoji.json
が 初期状態に戻る or アップデート されます。カスタマイズする場合は、JSON ファイルをバージョン管理しておくことをおすすめします。
コミット時の絵文字タイプ
初期設定 😄→ :smile: に変更した方がよいです。
😄でコミットすると、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
と入力する(💩がトレードマーク) - キーワード(例:
face
)を入力し、絵文字をソートする - 選択すると絵文字 😇がコピーされる
コピーされる絵文字の初期設定を変更
初期設定
- 選択:絵文字 😇がコピーされる
Alt
を押しながら選択:絵文字コード:innocent:
がコピーされる
GitHub での利用が多い場合は、上記設定を逆にしておくと更に使いやすいです。
設定の変更方法
- Alfred にて workflow を開く
alt
と書いてある部分をダブルクリック- Active Modifire:none に変更
- Run Script に伸びている線の●をダブルクリック
- 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での構造化データの扱い方
Google 構造化データに関するガイドラインを読む
Understand how structured data works | Search | Google Developers機能を選んで書いてみる
Choose a structured data feature | Search | Google Developersコードが書けたらテストする
構造化データ テストツール公開後、エラー率を定期的に監視する
Rich result status reports - Search Console Help
😇参考までに
まとめ
コーポレートサイトやECサイトなど、まずは、パンくずリストから始めよう。ただし、必ずしも検索結果に表示されるわけではないので、時間があるときなど、状況に合わせて使用を試みるといいかなと思う。
JSON-LD を追加したパンくずリスト を作ってみた。
ぱんくずリスト(JSON-LD + WAI-ARIA) · GitHub
Hello, world!
はじめまして。
- 名前:mos(@mozchan)
- お仕事:Web制作してた。
- 特徴:健康優良児(らしい)。めんどくさがり。忘れっぽい。
Hatena Blog 開設の経緯
文章を書くことは得意ではなく、 無理やりブログ記事を書いたときは、何も面白くなかった。(むしろ辛かった)
しかし「エンジニアは、技術記事を書いた方がよい。」と聞いてから、 確かに『勉強の記録』にもなるし、何よりも『その時の解釈・解決方法』が記録として残せるので、 やった方がいいなと思った。
今後について
まずは続けることが目標。 GitHub に push した段階で書いてみるとか、それぐらいのペースで投稿予定。
また『技術記事を書く』ことは、自分にとって少しハードルが高いので、 誰かに読んでもらうことよりも、 自分用の『メモ・記録を残す』程度の内容を書こうと思う。
『質 < 量』
がんばろう。自分!笑