やじうまの杜

ソースコードを画像でSNS共有するときに心がけたいこととは？

カッコよさ・利便性だけでなく、ググラビリティとコピペラビリティにも配慮したい

2022年6月9日 06:45

　“やじうまの杜”では、ニュース・レビューにこだわらない幅広い話題をお伝えします。

ソースコードを画像でSNS共有するときに心がけたいこととは？

　先日、「Visual Studio Code」で書いたソースコードをポラロイドカメラのようにその場でキレイにプリントアウトし、「Twitter」などへ投稿できる画像を手軽に作成できる拡張機能をご紹介しました。

関連記事

　「Polacode」のようなツールがソースコードのSNS共有で好まれるのは、

  • 「Twitter」には字数制限があるため、画像にしなければソースコードが収まらない
  • SNSには通常、ソースコードを構文色分けする機能（シンタックスハイライト）がないので、ソースコードを投稿しても読みにくい
  • 「@」や「.」を含むとメンションやURLと誤認されてリンクされてしまうことがある
  • 単純にカッコいい

といった理由があるからなのですが、一方で

  • ソースコードをコピー＆ペーストして手軽に動作を試せない
  • 検索に引っかからないので、一度埋もれてしまうと探せない

という欠点を危惧する声も寄せられました（ここではソースコードを何も考えずにコピペすることの是非は脇に置いておくことにしましょう）。このような問題を解決する、もっとスマートな方法はないものでしょうか。

解決策その1：ソースコードへのリンクを添付する

　まず、どこかにソースコードを掲載して、投稿にそのリンクを添付するという方法が考えられます。

　ソースコードを置く場所としては、「Gist」がちょうどよいでしょう。これは「GitHub」が提供しているソースコード（の断片）を共有するサービス。ソースコードをシンタックスハイライトしたり、説明文をつけたりはもちろん、修正がリビジョン管理されるのも「GitHub」らしくてよいところです。もちろん、ソースコードのコピーも可能。

コードスニペット（断片）共有に便利な「Gist」

　Web検索に引っかかるかどうかはわかりませんが、「GitHub」「Gist」に置いてあるならば誰かの目に留まって有効活用される可能性はあります。検索機能もありますし、スターをつけたり、フォークすることもできますからね。

解決策その2：代替テキスト（alt）を活用する

　もし「Twitter」に限るならば、画像の説明にソースコードを貼り付ける方法もあります。初めてこれを目にしたときは「なるほど」と思いました。

　運営側が意図した使い方、代替テキスト（alt）本来の用い方とはちょっとズレてしまうかもしれませんが、閲覧する側にとってはなかなか便利で、投稿する側にとってもそんなに手間ではありません。少なくとも、わざわざ「Gist」を作って共有URLを貼るよりは手軽です。

「Twitter」投稿時に代替テキスト（alt）を設定
閲覧側はソースコードをコピペできる

　実際にやってみたので、ツイートの添付画像左下の［ALT］アイコンをクリックしてみてください。

　いかがでしたか？　もし「ほかによい方法を知っているよ！」という方がいらっしゃれば教えてくださいね。