2017/04/18

note.muとMediumとはてなブログの音楽サイト的な使い勝手比較+IFTTTによるハッシュタグ付き自動ツイート設定方法

#vocanote ハッシュタグが付加されたツイート群が、数週間前から一部で盛り上がりを見せている。概要は提唱者であるところのA★nded(あんでっど) さんの記事を読んでください。
自分はもうボカロの楽曲やボカロのあれこれに対してまとまった文章を書くつもりは基本的に無いので(気まぐれで何か書くかもしれないから断言はしないがw)のんびりと楽しませてもらっているけど、そもそも

note.mu で書かれた #vocanote の記事、ニコニコ動画上の作品紹介とかしてるのにリンクURLを置いてあるだけとかなのって、さすがに味気なくね?

と思ったので、それを何とか打破する方法を模索してみた。せっかくなので他のプラットフォーム、具体的には
と使い勝手も含めて比較した。

note.mu


ざっくりとした印象を言えば、軽くて文章が書きやすく有料設定やマガジン化も可能なのでちょっとした電子出版っぽい使い方ができる、テキスト主体でSNS要素が付加されたブログサービスという感じ。ただそれが災いしてか、他のサイトの情報を上手く扱うことができない。具体的には、YouTubeとSoundCloudの外部プレーヤーをスムーズに埋め込めるものの、(ボカロ界隈でよく使われている)ニコニコ動画とbandcampを認識してくれない。bandcampはともかくニコ動の対応が弱いのは日本発のサービスなのにいかがなものかと思うが、対応を待つ前に自分でやれることを提案しておく。

ニコ動は動画のサムネイル画像を複数のサイズで自動生成している。例えばこの動画では、以下のURLで直接サムネ画像を表示できる(古い動画などは小さいサムネしか生成されていない場合もあるらしい)。


(URL:http://www.nicovideo.jp/watch/sm30866909)

小)http://tn-skr4.smilevideo.jp/smile?i=30866909


中)http://tn-skr4.smilevideo.jp/smile?i=30866909.M :URLの後ろに「.M」が付く


大)http://tn-skr4.smilevideo.jp/smile?i=30866909.L :URLの後ろに「.L」が付く


このURLは動画ごとに微妙に変わっているようなので、プレイヤーの下部に並ぶサムネを右クリックして画像を開くか、webブラウザの開発ツールを使うかして、画像のURLを直接調べる。
  • Safariの場合:開発ツールを有効にしておき、該当ページ余白の右クリックから「要素の詳細を表示」を選択して「リソース」タブから「イメージ」で絞り込み
  • Chromeの場合:表示>開発/管理メニューから「デベロッパーツール」を選び、Soucesタブからtn-skrX.smilevideo.jpにある画像を探す
  • IEやFirefoxなど他のブラウザの場合:それっぽい機能があるはずなので頑張ってください
note.mu ではローカルの画像しか貼れないっぽいので、上記のようにして表示させたサムネ画像をいったん保存してから note.mu へ再アップロードすることになる(厳密にはグレーな方法だが各自でスクリーンショットを撮るよりずっと健康的)。あとはその画像に動画へのURLをリンクさせれば、いちおう体裁は整う。そうやって設定した例が以下。画像をクリックするとニコ動へ遷移するのを確認してください:


bandcampは…現状どうにもならないっぽい。

Medium


第一印象としては、 note.mu の上位互換(というかこっちが元祖のような気がする)。シンプルで軽いのに機能がわりと豊富だから活用方法がいろいろ考えられる。一方で最大の問題は、海外のサービスのためメニュー等が基本的に英語であるところ。日本語の記事が文字化けするようなことは無いと思うけど、ちょっとハードルが高い気がする。またそれゆえに、日本語ユーザー同士の繋がりは note.mu よりは期待できないかもしれない。

さてMediumでは、YouTube、SoundCloud、bandcampのURLを指定するだけで外部プレーヤーが埋め込める。また、ニコニコ動画は「外部プレーヤーっぽいリンク」に変換してくれる。微妙にレイアウトが崩れるので見栄えがいいとは言い切れないが、この手軽さは捨てがたい。逆に、各サイトが準備する外部埋め込み(Embed)タグは、YouTube以外まともに認識してくれない感じなのが何とも不思議ではある。

はてなブログ


MovableTypeやWordPressが流行って以降、このブログの基盤であるBlogger以外のブログサービスはほとんど触っていなかったんだけど、今回はてなブログを試してみてモダンで使いやすいという印象を受けた。サイドバーでYouTubeやニコ動など様々な外部サービスの直接埋め込みに対応しているしHTML編集機能もあるので、その気になれば何でもできてしまう。実際、ニコ動はサイドバーで埋め込むよりHTML編集モードでEmbedタグを貼り付けた方がいい感じだった。bandcampもEmbedタグで対応できる。

問題点は無料プランだと広告が入るところかな。また高機能であるぶん、ストレスなく文章を書きたいという用途において、 note.mu やMediumに遅れを取るところがあるのは仕方ないかもしれない。

あ、はてなブログはおそらくはてなブックマークと相性がいいので、記事をバズらせたいなら他のブログサービスより強いんじゃなかろうか。はてブからの流入は本当に多いんですよ…

まとめ


自分が音楽サイト構築目的で使うなら、はてなブログ(おこづかいに余裕があれば有料プラン)≧ Medium ≧ note.mu という順序になりそう。文章を書くのに集中したいなら順序は逆になるけど差は小さい感じ。BloggerやTumblrを使うのはオススメしません…どこかへ引っ越そうかしら…

おまけ:IFTTTによる自動ツイート設定方法


#vocanote はプラットフォームを超えてハッシュタグで繋がろうという企画(?)だから、ハッシュタグつきの告知ツイートが積極的に推奨されているようである。幸いなことに上記の各サービスはどれもTwitterなど他のSNSとの連携を意識していて、投稿時の自動ツイートができるようになっていることが多い。ただそれだけだといろいろと融通が利かないことがあるので、IFTTTという自動化サービスに肩代わりさせる設定を紹介しておく。

とは言っても別に難しいことはなく、以下の3つだけで済む話。ポイントはRSSフィードの有無なので、それさえ取得できればIFTTTでの自動ツイートは他のサービスでも実現できる:
  1. IFTTTとTwitterを連携
  2. 各サービスが生成するRSSフィードを取得
  3. IFTTTでレシピを作成
1.は誰でもできると思うので説明は省略。

2.はこんな感じのURLで自動生成されている:
  • note.mu :https://note.mu/<アカウントID>/rss
  • Medium:https://medium.com/feed/@<アカウントID>
  • はてなブログ:ブログのURLの後ろに /rss または /feed を付加したもの
    (現状どちらでもあまり変わらないっぽい)
3.はこんな感じ(詳細は他のサイトを参照してください):


  1. 「My Applet」から「New Applet」をクリックして以下の画面を出す

  2. 「This」をクリックして「RSS feed」をクリックし、「New feed item」をクリック

  3. 「Complete trigger fields」画面でRSSフィードのURLを入力して「Create trigger」をクリック

  4. 「That」をクリック

  5. 「Twitter」をクリックして「Post a tweet」をクリック

  6. 「Complete action fields」画面でツイート内容を設定。ハッシュタグはここで入力するが区切りの半角スペースを入れ忘れるとハッシュタグとして認識してくれないので注意…これだと関係ない記事でも全部ハッシュタグがついてしまうから、2.の「New feed item matches」を組み合わせた方がクレバーかも。なお、好みでIngredientメニューからEntryImageUrlを選んでツイートに含めるようにしておくと良いかもしれない


  7. 設定が終わったら「Create Action」をクリック

  8. 「Finish」をクリックして設定はおしまい。あとは記事が更新されたら勝手にツイートしてくれるが、IFTTTの巡回頻度?はだいたい1時間に1回くらいらしいので、それまで待てないせっかちさんは各Applet画面の「Check now」をクリックして様子を見よう


告知ツイートにハッシュタグを含める方法は他にも記事のタイトルにあらかじめハッシュタグを含めておく等もあるけど一長一短なので、目的や好みに合わせて使い分けるのがいいかもしれない。

…すっかり長くなってしまった。どのような意図や目的であれせっかく書いてネットに公開する以上ひとりでも多くの人に読んでもらえるよう努力すべきで、その意味でプラットフォームに囚われずゆるくつながり共有しようという #vocanote の主旨にはシンパシーを感じる。この記事が皆さんの執筆活動の足しに少しでもなることを祈りつつ、遠くから見守ることにしたい。