小説家になろうの作品ページの Twitterカードを作る方法

概要

固定されたツイート

小説家になろうの自分の作品を Twitter で宣伝したいのですが、宣伝するなら目立つのがよいわけで、それならってことで画像を添付しようかってなります。でもここは1歩進んで Twitterカードを表示しようと考えたわけです。

Twitterカードから飛ばしたい先は小説家になろうの自分の作品ページで、 Twitterカードの記述を設置する場所は自分のホームページとかになりますから、ちょっとややこしくて、自分のホームページにリダイレクトの JavaScript を記述します。 .htaccess は上手くいかないので。

Twitterカードとリダイレクト

下のような記述になります。 <body> タグとかないですが、下のが全てです。

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="twitter:title" content="タイトル">
<meta name="twitter:description" content="説明文( 68 文字まで)">
<meta name="twitter:image" content="画像の URL">
<meta name="twitter:card" content="カードの種類「 summary_large_image 」 「 summary_small_image 」">
<meta name="twitter:site" content="Twitter のユーザ名">
<script>
window.location.href = "飛ばしたいページの URL";
</script>
</head>
</html>

例えば僕は下のようにして Twitterカードを表示しています。

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="twitter:title" content="⚔イオの冒険?">
<meta name="twitter:description" content="?世界を見る旅へ出た青年は同じ目的を持つ2人の少女に出会い共に歩み始める。世界をめぐる中で彼らを待っているのは様々な初めての体験だった。">
<meta name="twitter:image" content="http://yayoi-thyme.com/image/default-site-image.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@camellia">
<script>
window.location.href = "https://ncode.syosetu.com/novelview/infotop/ncode/n0041ed/";
</script>
</head>
</html>

Sublime Text への回帰と設定とか

回帰!

テキストエディタには、ここしばらく Atom を利用していたのですが、以前愛用していた Sublime Text回帰しました!

複数のパソコンで使用したいので設定の同期をしたかったのですが、以前は Dropbox を利用する方法しかありませんでした。でも Atom にあった GitHubGist を利用する方法が提供されてるんじゃないかと思って探したらありましたね。素晴らしい。

設定とか

Package Controll のインストール

まずは Package Controll のインストールです。以前はコードをコピペしなくてはなりませんでしたが、コンソールを起動( Ctrl + Shift + P )して package と入力したらインストールのメニューが表示されます。

Pakcage Controll のインストール

パッケージのインストール

Sync Settings

他のパソコンと設定を同期するパッケージです。 GitHubGist を利用するので GitHub のアカウントが必要です。

  1. いい具合に GitHub のアカウントを作ります。

  2. 設定画面へ行きます。

    Settings
  3. Personal access tokens をクリックします。

    Personal access tokens
  4. Generate new token をクリックします。

    Generate new token
  5. トークンの設定をしてトークンを作ります。

    トークンの設定
  6. 作られたトークンをテキストエディタなどへコピーしておきます。

    トークン
  7. Gist を作ります。

    Gist を作る
  8. 何か書かないと作れないので何か書きます。何でもいいです。 Create secret gist でいいです。

    Gist の内容
  9. 青い文字とか URL に Gist の ID が表れているのでコピペしておきます。 gist: は不要です。

    Gist ID
  10. Sync Settings の設定ファイルに下のような書式でトークンと Gist の ID を書きます。

    Sync Settings の設定ファイルを開く
    {
    "access_token": "012a345b678cd90efg1h12345h6789ij01k2l345",
    "gist_id": "38608a26c138565f95eead6fbb4493b3"
    }

    コンソールから sync とか入力していくとメニューが表示されます。設定を GitHubGist にアップロードして、他のパソコンでダウンロードして同期を取る仕組みです。他のパソコンでアップロードして~とかもできます。

IMESupport

日本語入力の際、いい具合に表示してくれます。

A File Icon

アイコンが素敵

サイドバーのアイコンが素敵な感じになります。

ApacheConf.tmLanguage

.htaccess とか Apache httpd のシンタックスハイライトとアイコンを追加します。

BracketHighlighter

対応する括弧をハイライト

カーソル位置の括弧の対応先をハイライトします。

Color Highlighter

コードに色を付ける

CSS とかの色設定に色がつきます。

ColorPicker

カラーパレット

CSS などで色のコードを記述する際にカラーピッカーを利用できます。デフォルトではアルファベットが大文字になるのですが、パッケージの設定ファイルに下のように記述すると小文字になります。

{
"color_upper_case": false
}

StringUtilities

コンテクストメニューから選択する

HTML の記号とかいろいろをエンコード、デコードしてくれます。