小技チョコレート

ちょっとした小技を紹介するだけのブログです。

Instagramへの投稿内容を自動でDynalistに書き込む方法

Instagramに投稿した画像や、そのキャプションなどを、自動でDynalistに書き込む方法を紹介します。


〈目次〉


機能

対象となる投稿の種類

  • 投稿内容が画像(静止画)であって、かつ、画像の枚数が「1投稿あたり1枚だけ」のものに限ります。
    • 1投稿に2枚以上の画像を含んでいるものは、対象外です。
    • 画像であっても、「ストーリーズ」への投稿内容は、対象外です。

書き込むことができるコンテンツ

Dynalistに書き込むことができる内容はこの5つです。
このうちの必要なものだけを、任意の順番で配置することができます。

  • 画像のURL(![](画像のURL)というMarkdown形式で記入すれば、Dynalist上で画像として表示可能です。ただし表示サイズを制限しないと、画面上で大きくなりすぎる可能性があります)
  • キャプション(Instagramで画像の下の欄に掲載されているテキストやハッシュタグ
  • 投稿の個別URL(https://instagram.com/p/で始まるURL)
  • 投稿日時(June 11, 2020 at 12:53PMというスタイル)
  • 任意のテキスト

1個の投稿が、Dynalistにおける1行(=1項目)として書き込まれます。途中での改行はできません。
Markdownが使用できます。
Dynalistにおける書き込み位置は、「特定の行の直下の階層」という形で任意に決めることができます。DynalistのInboxに書き込むこともできます。
Dynalistでの書き込み順は、上の行から順に〈新→旧〉または〈旧→新〉のどちらかを選ぶことができます。

サンプル

実際にDynalistに書き込まれた状態のサンプルです。
2通りのスタイルを試したものです。

f:id:ichbin:20200630100448p:plain

1行目は、画像のURLを![](URL)というMarkdown形式で記入し、その後ろにキャプション、投稿の個別URL、投稿日時、任意のテキスト(#写真 #Instagramというハッシュタグ)を記入したものです。
2行目は、キャプション、投稿の個別URL、画像のURL、投稿日時、任意のテキスト(#写真というハッシュタグ)を記入したものです。

必要なもの

  • IFTTTのアカウント(無料)

下準備

IFTTTのアカウント作成

IFTTTのアカウントを持っていない場合は、アカウントを作ります。
https://ifttt.com/ にアクセスし、右上のSign upをクリックしてアカウントを作ります。

f:id:ichbin:20200611133001p:plain

この部分の詳しい説明は割愛します。

DynalistのSecret tokenをコピー

Dynalistにログインしたうえで、Developer - Dynalistをウェブブラウザで開き、“Your API secret token is: ”の下に表示されている長い文字列をコピーします(下記の画像でボカしている部分です)。

f:id:ichbin:20190804143052p:plain

この文字列を「シークレットトーク」としてメモしておきます。のちの工程で使います。
この文字列を、他人が読める状態にしないようご注意ください。

設定内容の作成

これ以降の工程は、Dynalistにおける書き込み位置を「DynalistのInbox」にする場合と、「Inboxではない特定の位置」にする場合とで、やるべきことが異なります。

書き込み位置をInboxにする場合は、「こちら」の節の内容を実行します。
書き込み位置を「Inboxではない特定の位置」にする場合は、「こちら」の節の内容を実行します。

書き込み位置をInboxにする場合

DynalistにおいてInboxの位置をまだ指定していない場合は、こちらの要領で指定します。

リクエストボディの作成

のちの工程でIFTTTに入力するために必要な文字列(JSON形式)をここで作成します。

テキストエディタに下記の文字列をペーストします。

{"token": "YOUR_SECRET_TOKEN", "index": 0, "content": "YOUR_CONTENT"}

Secret tokenの記入
この文字列のYOUR_SECRET_TOKENの部分を、上述の「シークレットトークン」(Dynalistのページからコピーした長い文字列)で置き換えます。

記入順の指定
この文字列の中に"index": 0,という箇所があります。ここの数字はデフォルトでは0となっています。

デフォルトのままにしておくと、Instagramに投稿した時刻が新しい投稿の情報は、時刻が旧い投稿のそれよりも、Dynalistにおいて「上の行」に記入されます。つまり、上の行から順に〈新→旧〉という記入順になります。

それとは逆に、Instagramに投稿した時刻が新しい投稿の情報を、時刻が旧い投稿よりも「下の行」に記入したい場合は、"index": 0,"index": -1,と書き換えます。

書き込み内容の指定
Dynalistに書き込む内容(コンテンツ)を指定します。

書き込むことができるのは下記の5つです。

  • 画像のURL:{{SourceUrl}}
  • キャプション:{{Caption}}
  • 投稿のURL:{{Url}}
  • 投稿日時:{{CreatedAt}}
  • 任意のテキスト

それぞれに対応する右側の記号({{SourceUrl}}など)や、任意のテキストを、上述の文字列の末尾のほうにあるYOUR_CONTENTのところに記入します。

記入する順番や個数は自由ですので、必要なものだけを任意の順番で並べてかまいません。

例えば、キャプション, URL, 投稿日時, #Instagramという文字列の計4つをその順番で並べ、お互いの間を半角スペースで区切るというスタイルをとると、下記のようになります。

"{{Caption}} {{Url}} {{CreatedAt}} #Instagram"

ここではMarkdownも使えるので、例えば下記のような修飾も可能です。*1

  • キャプションを太字で強調:**{{Caption}}**
  • キャプションとURLをMarkdown形式で記入:[{{Caption}}]({{Url}})

投稿した画像を、Dynalistで画像として表示させたい場合は、必ず下記のようにMarkdown形式で記入する必要があります。
すなわち、![]()の丸カッコの間に{{SourceUrl}}を書き入れます。

![]({{SourceUrl}})

半角のクォーテーションそのもの("')をDynalistに記入したい場合は、その箇所を<<<>>>で囲まなければなりません(エスケープ)。*2

(例)キャプションを"で囲みたい場合:<<<"{{Caption}}">>>
(Dynalistでの表示例):"hogehoge"

キャプションや「任意のテキスト」には半角クォーテーションが含まれる場合がありそうなので、あらかじめ<<<>>>で囲んでおいたほうが無難だと思います。

  • <<<{{Caption}}>>>
  • [<<<{{Caption}}>>>]({{Url}})Markdown形式の例)

すべて記入し終えたら、このような文字列になります(例)。

{"token": "(シークレットトークンを書く)", "index": 0, "content": "![]({{SourceUrl}}) <<<{{Caption}}>>> {{Url}} {{CreatedAt}} #Instagram"}

この出来あがった文字列を「リクエストボディ」としてメモしておきます。

次に、「IFTTTの設定の手順」の節へ進みます。

書き込み位置を「Inboxではない特定の位置」にする場合

Dynalistの「ドキュメントのid」と「親ノードのid」を取得

書き込みたい位置を、Dynalistにおいて決めて、「その位置の1階層上位」に相当する行に"Zoom in"(虫眼鏡アイコンをクリックするか、もしくはショートカットキー:Ctrl + ]またはCmd + ])します。

たとえば、下記のCの位置に書き込みたい場合は、「その位置の1階層上位」はBですから、Bの行に"Zoom in"します。

f:id:ichbin:20200611094833p:plain

この例でBに"Zoom in"するとこのようになります。

f:id:ichbin:20200611095137p:plain

このときのURLをコピーします。

f:id:ichbin:20200611095712p:plain

コピーしたURLは、このような形になっているはずです(/d/以降の文字列は、アカウントや位置に応じて異なります)。

https://dynalist.io/d/KWJ-NGiPfpbDyjX4fPiJxYK9#z=UB0ufX752rHot23sU-4-uGIP

このURLから、文字列を2個切り出します(下記の赤線部分と青線部分)。

f:id:ichbin:20200611100505p:plain

赤線部分(/d/以降から#z=以前までの部分)は、この例ではKWJ-NGiPfpbDyjX4fPiJxYK9です。この文字列を「ドキュメントのid」としてメモしておきます。

青線部分(#z=よりも後ろの部分)は、この例ではUB0ufX752rHot23sU-4-uGIPです。この文字列を「親ノードのid」としてメモしておきます。

この2個の文字列は、後の工程で使います。

リクエストボディの作成

のちの工程でIFTTTに入力するために必要な文字列(JSON形式)をここで作成しておきます。

テキストエディタに下記の文字列をペーストします。

{"token": "YOUR_SECRET_TOKEN", "file_id": "YOUR_DOCUMENT_ID", "changes": [{"action": "insert", "parent_id": "YOUR_PARENT_NODE_ID", "index": 0, "content": "YOUR_CONTENT"}]}

Secret tokenなどの記入
この文字列のYOUR_SECRET_TOKENの部分を、上述の「シークレットトークン」(Dynalistのページからコピーした長い文字列)で置き換えます。

同様に、YOUR_DOCUMENT_IDは上述の「ドキュメントのid」で置き換えます。

YOUR_PARENT_NODE_IDは上述の「親ノードのid」で置き換えます。

記入順の指定
この文字列の末尾の方に"index": 0,という箇所があります。ここの数字はデフォルトでは0となっています。

デフォルトのままにしておくと、Instagramに投稿した時刻が新しい投稿の情報は、時刻が旧い投稿のそれよりも、Dynalistにおいて「上の行」に記入されます。つまり、上の行から順に〈新→旧〉という記入順になります。

それとは逆に、Instagramに投稿した時刻が新しい投稿の情報を、時刻が旧い投稿よりも「下の行」に記入したい場合は、"index": 0,"index": -1,と書き換えます。

書き込み内容の指定
Dynalistに書き込む内容(コンテンツ)を指定します。

書き込むことができるのは下記の5つです。

  • 画像のURL:{{SourceUrl}}
  • キャプション:{{Caption}}
  • 投稿のURL:{{Url}}
  • 投稿日時:{{CreatedAt}}
  • 任意のテキスト

それぞれに対応する右側の記号({{SourceUrl}}など)や、任意のテキストを、上述の文字列の末尾のほうにあるYOUR_CONTENTのところに記入します。

記入する順番や個数は自由ですので、必要なものだけを任意の順番で並べてかまいません。

例えば、キャプション, URL, 投稿日時, #Instagramという文字列の計4つをその順番で並べ、お互いの間を半角スペースで区切るというスタイルをとると、下記のようになります。

"{{Caption}} {{Url}} {{CreatedAt}} #Instagram"

ここではMarkdownも使えるので、例えば下記のような修飾も可能です。*3

  • キャプションを太字で強調:**{{Caption}}**
  • キャプションとURLをMarkdown形式で記入:[{{Caption}}]({{Url}})

投稿した画像を、Dynalistで画像として表示させたい場合は、必ず下記のようにMarkdown形式で記入する必要があります。
すなわち、![]()の丸カッコの間に{{SourceUrl}}を書き入れます。

![]({{SourceUrl}})

半角のクォーテーションそのもの("')をDynalistに記入したい場合は、その箇所を<<<>>>で囲まなければなりません(エスケープ)。*4

(例)キャプションを"で囲みたい場合:<<<"{{Caption}}">>>
(Dynalistでの表示例):"hogehoge"

キャプションや「任意のテキスト」には半角クォーテーションが含まれる場合がありそうなので、あらかじめ<<<>>>で囲んでおいたほうが無難だと思います。

  • <<<{{Caption}}>>>
  • [<<<{{Caption}}>>>]({{Url}})Markdown形式)

すべて記入し終えたら、このような文字列になります(例)。

{"token": "(シークレットトークンを書く)", "file_id": "(ドキュメントのidを書く)", "changes": [{"action": "insert", "parent_id": "(親ノードのidを書く)", "index": 0, "content": "![]({{SourceUrl}}) <<<{{Caption}}>>> {{Url}} {{CreatedAt}} #Instagram"}]}

この出来あがった文字列を「リクエストボディ」としてメモしておきます。

IFTTTの設定の手順

ブラウザでIFTTTにログインしたうえで https://ifttt.com/create をブラウザで開き、画面中央の“This”をクリック。

f:id:ichbin:20200611101749p:plain

次の画面で、上部の検索フォームにinstagramと入力。
すると、Instagramの赤いアイコンが表示されるので、それをクリック。

f:id:ichbin:20200630105855p:plain

自分のInstagramアカウントをまだIFTTTに連携していない場合は、ここでそれを連携させる工程に入ります。(すでに連携済みであれば、画面は自動で次の工程に進みます)。

このアカウント連携の部分の説明は割愛します(IFTTTの画面の指示通りに操作すれば、下記の状態に至ります)。

このような画面になります。

f:id:ichbin:20200630105916p:plain

“Any new photo by you”をクリック。

次の画面に変わります。
“That”をクリック。

f:id:ichbin:20200630105933p:plain

次の画面で、上部の検索フォームにwebhooksと入力し、表示された青いアイコンをクリックします。

f:id:ichbin:20200603133153p:plain

Make a web requestというタイトルの青い四角をクリック。

f:id:ichbin:20200603133118p:plain

この画面に変わります。

f:id:ichbin:20200617155435p:plain

冒頭のところに、URLというタイトルの入力欄があります。

Dynalistでの書き込み位置をInboxにする場合は、この欄には

https://dynalist.io/api/v1/inbox/add

と入力します。

書き込み位置を「Inboxではない特定の位置」にする場合は、

https://dynalist.io/api/v1/doc/edit

と入力します。

Methodの選択欄ではPOSTを選択します。

f:id:ichbin:20200617162055p:plain

Content Typeの選択欄ではapplication/jsonを選択します。

f:id:ichbin:20200603133251p:plain

Bodyの入力欄には、上述の工程で作成しておいた「リクエストボディ」、すなわち、

  • 書き込み位置がInboxの場合
    {"token": "(シークレットトークンを書く)", "index": 0, "content": "(書き込みたいコンテンツを書く)"}
  • 書き込み位置がInboxではない場合
    {"token": "(シークレットトークンを書く)", "file_id": "(ドキュメントのidを書く)", "changes": [{"action": "insert", "parent_id": "(親ノードのidを書く)", "index": 0, "content": "(書き込みたいコンテンツを書く)"}]}

の中身を適宜書き換えてできた文字列を入力します。

入力するとこのようになります。

f:id:ichbin:20200630110014p:plain
(書き込み位置がInboxの場合の一例)

ここまでできたら、一番下にあるCreate actionをクリック。

f:id:ichbin:20200617155918p:plain

入力内容に問題がなければ、このような画面になります。*5

f:id:ichbin:20200630110042p:plain

中央の入力欄には、機能の概要が書かれています。この文章は自分用の説明文ですので、もし書き換えたければ自由に編集できます。

その下にあるReceive notifications when this Applet runsのスイッチをオンにしておくと、Dynalistへの記入が行われるたびに、IFTTTのiOSアプリやAndroidアプリをインストールしてある端末(スマートフォン等)に通知が来ます。

最後に、Finishのボタンをクリックします。

すると、この画面になります。

f:id:ichbin:20200630110123p:plain

ここまで済めば、ブラウザは閉じてもかまいません。

以降は、Instagramに投稿するたびに、自動でDynalistに記入されていきます。

Dynalistへの記入を停止 / 再開する方法

ブラウザでIFTTTにログインしたうえで https://ifttt.com/my_applets をブラウザで開くと、上述の工程で作った設定が、赤い四角形で表示されているので、これをクリック。

f:id:ichbin:20200630110309p:plain

次の画面で、下の方にあるConnectedという文字をクリックすると、Disconnecting→Connectという表示に変わります。
この部分がConnectになっている間は、Dynalistへの記入が停まっています。

f:id:ichbin:20200630110421p:plain
(記入が停止している状態)

Dynalistへの記入を再開したい場合は、それとは逆に、Connectのところをクリックします。
すると、Connecting Instagram→Connectedという表示に変わります。
この部分がConnectedになれば、Dynalistへの記入が再開します。

f:id:ichbin:20200630110438p:plain
(記入が再開している状態)

カスタマイズ

Dynalistに書き込む内容を変更する方法

ブラウザでIFTTTにログインしたうえで https://ifttt.com/my_applets をブラウザで開くと、上述の工程で作った設定が、赤い四角形で表示されているので、これをクリック。

f:id:ichbin:20200630110309p:plain

次の画面で、右上のSettingsをクリック。

f:id:ichbin:20200630110536p:plain

次の画面を下の方にスクロールしていくと、Body(optional)という入力欄があります。
ここには、上述の工程で入力した「リクエストボディ」が入力されています。

f:id:ichbin:20200630110631p:plain

この欄に入力されている文字列の末尾のところを、上述のような書き方で書き換えます。

そしてページの一番下にあるSaveのボタンを押すと、下記の画面に変わります。そのようになれば、変更が適用されています。*6

f:id:ichbin:20200630110123p:plain

Dynalistでの書き込み位置を変更する方法

DynalistのInboxに書き込むように変更する

ブラウザでIFTTTにログインしたうえで https://ifttt.com/my_applets をブラウザで開くと、上述の工程で作った設定が、赤い四角形で表示されているので、これをクリック。

f:id:ichbin:20200630110309p:plain

次の画面で、右上のSettingsをクリック。

f:id:ichbin:20200630110536p:plain

次の画面で、書き込み位置を変更します。

f:id:ichbin:20200630110712p:plain

この画面の下の方にある、URLというタイトルの入力欄の内容を消し、こちらの文字列を入力します。

https://dynalist.io/api/v1/inbox/add

次に、Body(optional)というタイトルの入力欄に入力されている内容を消し、上述の手順に従って新たな「リクエストボディ」を作って、それをこの欄に入力します。

f:id:ichbin:20200630110903p:plain

なお、Dynalistのアカウントも変える場合は、「リクエストボディ」の中の「シークレットトークン」も、新しいものに書き換える必要があります。

  • "token": "hogehoge"

それらを書き換え、ページの一番下にあるSaveのボタンを押すと、下記の画面に変わります。そのようになれば、変更が適用されています。*7

f:id:ichbin:20200630110123p:plain

「Inboxではない別の位置」に書き込むように変更する

ブラウザでIFTTTにログインしたうえで https://ifttt.com/my_applets をブラウザで開くと、上述の工程で作った設定が、赤い四角形で表示されているので、これをクリック。

f:id:ichbin:20200630110309p:plain

次の画面で、右上のSettingsをクリック。

f:id:ichbin:20200630110536p:plain

次の画面を下にスクロールしていくと、Body(optional)というタイトルの入力欄があります。

f:id:ichbin:20200630111133p:plain

この入力欄の内容における、

  • 「ドキュメントのid」:"file_id": "hogehoge"
  • 「親ノードのid」:"parent_id": "fugafuga"

の2箇所を、上述の要領に従って、新しい「ドキュメントのid」と「親ノードのid」に書き換えます。

なお、Dynalistのアカウントも変える場合は、「シークレットトークン」も、新しいものに書き換える必要があります。

  • "token": "hogehoge"

それらを書き換え、ページの一番下にあるSaveのボタンを押すと、下記の画面に変わります。そのようになれば、変更が適用されています。*8

f:id:ichbin:20200630110123p:plain

Dynalistでの画像の表示サイズを変更する方法

画像のURLを![](画像のURL)という形式でDynalistに記入した場合は、それぞれの画像はDynalist上で画像として表示されますが、かなり大きなサイズで表示される場合もあると思います。そのままでは大きすぎて、Dynalistを使う上で実用的ではないかもしれません。

Dynalistにおいて、画像をもう少し小さく表示したい場合は、ブラウザの拡張機能である“Stylus”をこちらの記事の要領でブラウザにインストールしたうえで、こちらの要領CSSを適用すれば、画像の横幅または縦幅の上限を、任意の大きさにすることができます。

Dynalist上で画像は小さく表示されても、それぞれの画像をマウスでクリックすれば、元の画像ファイルそのものがブラウザで開かれます。

なお、この方法を使うと、Instagram由来の画像だけでなく、Dynalistに載せている全ての画像の大きさの上限が、ここで自分の指定した大きさになります。

Instagramのアカウントを変更する方法

ブラウザでIFTTTにログインしたうえで https://ifttt.com/my_services をブラウザで開き、表示された一覧の中からInstagramをクリック。

f:id:ichbin:20200603141439p:plain

次の画面で、右上のSettingsをクリック。

f:id:ichbin:20200630111204p:plain

次の画面で、中央右側にあるEditをクリックすると、Instagramのアカウントを変更する工程に入ります。

f:id:ichbin:20200630111240p:plain

Dynalistへの書き込みが正しく行われないときのチェックポイント

設定画面への入力内容を見直す

上述の手順説明のとおりに入力されているかを確認します。

設定画面の開き方は下記のとおりです。

ブラウザでIFTTTにログインしたうえで https://ifttt.com/my_applets をブラウザで開くと、上述の工程で作った設定が、赤い四角形で表示されているので、これをクリック。

f:id:ichbin:20200630110309p:plain

次の画面で、右上のSettingsをクリック。

f:id:ichbin:20200630110536p:plain

その次の画面が設定画面です。

エスケープしてみる

上述の手順で設定画面を開くと、Body(optional)という入力欄の末尾のほうに{{Caption}}や「任意のテキスト」が入力されていると思いますが、これらを半角の<<<>>>で囲んでいないと、Dynalistへの書き込みが正しく行われない場合があるようです。
おそらく、キャプション(Caption)や、「任意のテキスト」に半角のクォーテーション("')が含まれているときは、それに該当しています(他の文字が原因の場合もあるかもしれません)。

{{Caption}}などを<<<>>>で囲む(エスケープする)ことで、Dynalistへの記入が正しくおこなわれるようになる可能性があります。

f:id:ichbin:20200630111133p:plain
(Body(optional)欄の一例)

エスケープに関する上述の手順説明も参考にしてください。

参考資料

IFTTTの設定画面への入力内容を作るうえで、Dynalistのこちらの資料が参考になります。

製作の動機

*1:HTMLタグは、ここに記入すると正しく動作しないようです。

*2:IFTTTのサイト上では、エスケープさせたい箇所を「不等号2個ずつ」で囲めという指示がありますが、3個ずつで囲むのが正しいようです。

*3:HTMLタグは、ここに記入すると正しく動作しないようです。

*4:IFTTTのサイト上では、エスケープさせたい箇所を「不等号2個ずつ」で囲めという指示がありますが、3個ずつで囲むのが正しいようです。

*5:入力内容に問題がある場合は、画面が切り替わらず、「問題のある箇所」に赤字でエラーメッセージが出ます。

*6:Saveのボタンを押しても画面が切り替わらない場合は、入力内容に問題があり、エラーが赤字でページ内に表示されます。

*7:Saveのボタンを押しても画面が切り替わらない場合は、入力内容に問題があり、エラーが赤字でページ内に表示されます。

*8:Saveのボタンを押しても画面が切り替わらない場合は、入力内容に問題があり、エラーが赤字でページ内に表示されます。