Instagramに投稿した画像や、そのキャプションなどを、自動でDynalistに書き込む方法を紹介します。
〈目次〉
- 機能
- 必要なもの
- 下準備
- 設定内容の作成
- IFTTTの設定の手順
- 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通りのスタイルを試したものです。
1行目は、画像のURLを![](URL)
というMarkdown形式で記入し、その後ろにキャプション、投稿の個別URL、投稿日時、任意のテキスト(#写真 #Instagram
というハッシュタグ)を記入したものです。
2行目は、キャプション、投稿の個別URL、画像のURL、投稿日時、任意のテキスト(#写真
というハッシュタグ)を記入したものです。
必要なもの
- IFTTTのアカウント(無料)
下準備
IFTTTのアカウント作成
IFTTTのアカウントを持っていない場合は、アカウントを作ります。
https://ifttt.com/ にアクセスし、右上のSign upをクリックしてアカウントを作ります。
この部分の詳しい説明は割愛します。
DynalistのSecret tokenをコピー
Dynalistにログインしたうえで、Developer - Dynalistをウェブブラウザで開き、“Your API secret token is: ”の下に表示されている長い文字列をコピーします(下記の画像でボカしている部分です)。
この文字列を「シークレットトークン」としてメモしておきます。のちの工程で使います。
この文字列を、他人が読める状態にしないようご注意ください。
設定内容の作成
これ以降の工程は、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"します。
この例でBに"Zoom in"するとこのようになります。
このときのURLをコピーします。
コピーしたURLは、このような形になっているはずです(/d/
以降の文字列は、アカウントや位置に応じて異なります)。
https://dynalist.io/d/KWJ-NGiPfpbDyjX4fPiJxYK9#z=UB0ufX752rHot23sU-4-uGIP
このURLから、文字列を2個切り出します(下記の赤線部分と青線部分)。
赤線部分(/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”をクリック。
次の画面で、上部の検索フォームにinstagram
と入力。
すると、Instagramの赤いアイコンが表示されるので、それをクリック。
自分のInstagramアカウントをまだIFTTTに連携していない場合は、ここでそれを連携させる工程に入ります。(すでに連携済みであれば、画面は自動で次の工程に進みます)。
このアカウント連携の部分の説明は割愛します(IFTTTの画面の指示通りに操作すれば、下記の状態に至ります)。
このような画面になります。
“Any new photo by you”をクリック。
次の画面に変わります。
“That”をクリック。
次の画面で、上部の検索フォームにwebhooks
と入力し、表示された青いアイコンをクリックします。
Make a web requestというタイトルの青い四角をクリック。
この画面に変わります。
冒頭のところに、URLというタイトルの入力欄があります。
Dynalistでの書き込み位置をInboxにする場合は、この欄には
https://dynalist.io/api/v1/inbox/add
と入力します。
書き込み位置を「Inboxではない特定の位置」にする場合は、
https://dynalist.io/api/v1/doc/edit
と入力します。
Methodの選択欄ではPOST
を選択します。
Content Typeの選択欄ではapplication/json
を選択します。
Bodyの入力欄には、上述の工程で作成しておいた「リクエストボディ」、すなわち、
- 書き込み位置がInboxの場合
{"token": "(シークレットトークンを書く)", "index": 0, "content": "(書き込みたいコンテンツを書く)"}
- 書き込み位置がInboxではない場合
{"token": "(シークレットトークンを書く)", "file_id": "(ドキュメントのidを書く)", "changes": [{"action": "insert", "parent_id": "(親ノードのidを書く)", "index": 0, "content": "(書き込みたいコンテンツを書く)"}]}
の中身を適宜書き換えてできた文字列を入力します。
入力するとこのようになります。
(書き込み位置がInboxの場合の一例)
ここまでできたら、一番下にあるCreate actionをクリック。
入力内容に問題がなければ、このような画面になります。*5
中央の入力欄には、機能の概要が書かれています。この文章は自分用の説明文ですので、もし書き換えたければ自由に編集できます。
その下にあるReceive notifications when this Applet runsのスイッチをオンにしておくと、Dynalistへの記入が行われるたびに、IFTTTのiOSアプリやAndroidアプリをインストールしてある端末(スマートフォン等)に通知が来ます。
最後に、Finishのボタンをクリックします。
すると、この画面になります。
ここまで済めば、ブラウザは閉じてもかまいません。
以降は、Instagramに投稿するたびに、自動でDynalistに記入されていきます。
Dynalistへの記入を停止 / 再開する方法
ブラウザでIFTTTにログインしたうえで https://ifttt.com/my_applets をブラウザで開くと、上述の工程で作った設定が、赤い四角形で表示されているので、これをクリック。
次の画面で、下の方にあるConnectedという文字をクリックすると、Disconnecting→Connectという表示に変わります。
この部分がConnectになっている間は、Dynalistへの記入が停まっています。
(記入が停止している状態)
Dynalistへの記入を再開したい場合は、それとは逆に、Connectのところをクリックします。
すると、Connecting Instagram→Connectedという表示に変わります。
この部分がConnectedになれば、Dynalistへの記入が再開します。
(記入が再開している状態)
カスタマイズ
Dynalistに書き込む内容を変更する方法
ブラウザでIFTTTにログインしたうえで https://ifttt.com/my_applets をブラウザで開くと、上述の工程で作った設定が、赤い四角形で表示されているので、これをクリック。
次の画面で、右上のSettingsをクリック。
次の画面を下の方にスクロールしていくと、Body(optional)という入力欄があります。
ここには、上述の工程で入力した「リクエストボディ」が入力されています。
この欄に入力されている文字列の末尾のところを、上述のような書き方で書き換えます。
そしてページの一番下にあるSaveのボタンを押すと、下記の画面に変わります。そのようになれば、変更が適用されています。*6
Dynalistでの書き込み位置を変更する方法
DynalistのInboxに書き込むように変更する
ブラウザでIFTTTにログインしたうえで https://ifttt.com/my_applets をブラウザで開くと、上述の工程で作った設定が、赤い四角形で表示されているので、これをクリック。
次の画面で、右上のSettingsをクリック。
次の画面で、書き込み位置を変更します。
この画面の下の方にある、URLというタイトルの入力欄の内容を消し、こちらの文字列を入力します。
https://dynalist.io/api/v1/inbox/add
次に、Body(optional)というタイトルの入力欄に入力されている内容を消し、上述の手順に従って新たな「リクエストボディ」を作って、それをこの欄に入力します。
なお、Dynalistのアカウントも変える場合は、「リクエストボディ」の中の「シークレットトークン」も、新しいものに書き換える必要があります。
"token": "hogehoge"
それらを書き換え、ページの一番下にあるSaveのボタンを押すと、下記の画面に変わります。そのようになれば、変更が適用されています。*7
「Inboxではない別の位置」に書き込むように変更する
ブラウザでIFTTTにログインしたうえで https://ifttt.com/my_applets をブラウザで開くと、上述の工程で作った設定が、赤い四角形で表示されているので、これをクリック。
次の画面で、右上のSettingsをクリック。
次の画面を下にスクロールしていくと、Body(optional)というタイトルの入力欄があります。
この入力欄の内容における、
- 「ドキュメントのid」:
"file_id": "hogehoge"
- 「親ノードのid」:
"parent_id": "fugafuga"
の2箇所を、上述の要領に従って、新しい「ドキュメントのid」と「親ノードのid」に書き換えます。
なお、Dynalistのアカウントも変える場合は、「シークレットトークン」も、新しいものに書き換える必要があります。
"token": "hogehoge"
それらを書き換え、ページの一番下にあるSaveのボタンを押すと、下記の画面に変わります。そのようになれば、変更が適用されています。*8
Dynalistでの画像の表示サイズを変更する方法
画像のURLを![](画像のURL)
という形式でDynalistに記入した場合は、それぞれの画像はDynalist上で画像として表示されますが、かなり大きなサイズで表示される場合もあると思います。そのままでは大きすぎて、Dynalistを使う上で実用的ではないかもしれません。
Dynalistにおいて、画像をもう少し小さく表示したい場合は、ブラウザの拡張機能である“Stylus”をこちらの記事の要領でブラウザにインストールしたうえで、こちらの要領でCSSを適用すれば、画像の横幅または縦幅の上限を、任意の大きさにすることができます。
Dynalist上で画像は小さく表示されても、それぞれの画像をマウスでクリックすれば、元の画像ファイルそのものがブラウザで開かれます。
なお、この方法を使うと、Instagram由来の画像だけでなく、Dynalistに載せている全ての画像の大きさの上限が、ここで自分の指定した大きさになります。
Instagramのアカウントを変更する方法
ブラウザでIFTTTにログインしたうえで https://ifttt.com/my_services をブラウザで開き、表示された一覧の中からInstagramをクリック。
次の画面で、右上のSettingsをクリック。
次の画面で、中央右側にあるEditをクリックすると、Instagramのアカウントを変更する工程に入ります。
Dynalistへの書き込みが正しく行われないときのチェックポイント
設定画面への入力内容を見直す
上述の手順説明のとおりに入力されているかを確認します。
設定画面の開き方は下記のとおりです。
ブラウザでIFTTTにログインしたうえで https://ifttt.com/my_applets をブラウザで開くと、上述の工程で作った設定が、赤い四角形で表示されているので、これをクリック。
次の画面で、右上のSettingsをクリック。
その次の画面が設定画面です。
エスケープしてみる
上述の手順で設定画面を開くと、Body(optional)という入力欄の末尾のほうに{{Caption}}
や「任意のテキスト」が入力されていると思いますが、これらを半角の<<<
と>>>
で囲んでいないと、Dynalistへの書き込みが正しく行われない場合があるようです。
おそらく、キャプション(Caption
)や、「任意のテキスト」に半角のクォーテーション("
や'
)が含まれているときは、それに該当しています(他の文字が原因の場合もあるかもしれません)。
{{Caption}}
などを<<<
と>>>
で囲む(エスケープする)ことで、Dynalistへの記入が正しくおこなわれるようになる可能性があります。
(Body(optional)欄の一例)
参考資料
IFTTTの設定画面への入力内容を作るうえで、Dynalistのこちらの資料が参考になります。
製作の動機
*1:HTMLタグは、ここに記入すると正しく動作しないようです。
*2:IFTTTのサイト上では、エスケープさせたい箇所を「不等号2個ずつ」で囲めという指示がありますが、3個ずつで囲むのが正しいようです。
*3:HTMLタグは、ここに記入すると正しく動作しないようです。
*4:IFTTTのサイト上では、エスケープさせたい箇所を「不等号2個ずつ」で囲めという指示がありますが、3個ずつで囲むのが正しいようです。
*5:入力内容に問題がある場合は、画面が切り替わらず、「問題のある箇所」に赤字でエラーメッセージが出ます。
*6:Saveのボタンを押しても画面が切り替わらない場合は、入力内容に問題があり、エラーが赤字でページ内に表示されます。
*7:Saveのボタンを押しても画面が切り替わらない場合は、入力内容に問題があり、エラーが赤字でページ内に表示されます。
*8:Saveのボタンを押しても画面が切り替わらない場合は、入力内容に問題があり、エラーが赤字でページ内に表示されます。