;´Д`)< 強制的に "続きを読む" 設定
ブログの表示デザインを変更した。
以前の記事に書いたように、ブログTop pageの表示で勝手に本文を省略して記事一覧を見せてくれるようなものを探したのだが、無かったよ……´Д`) ナゼナンダ
なんでないの?Top pageで記事が選べたほうが良くない?そりゃあ記事ごとに「続きを読む」を設定することもできるけどさ、人間の手が介入したら忘れる事態が発生するし #`Д´)!不具合発生したときに提出する再発防止策に「次からは気を付けます~」的なことを書いたら怒られるし #`Д´)!!
強制的に "続きを読む" 設定
仕方がないので無理やり "続きを読む" 状態になるように設定してみた。
以下、そのCSS。他のはてなブログデザインでも有効かどうかは未確認。
/* 強制的に続きを読む設定 */
.entry-content {
height: 120px;
overflow:hidden;
}
body.page-entry .entry-content {
height: auto;
overflow:hidden;
}
ひとまずはこれでいいかな *´Д`)
3.2 SNSへ通知連絡投稿
先にこちらの記事を確認されることをお勧めします。
zapierでのレシピ作成の続き。
ひとつめのレシピでShortNoteのATOM feedから自分の投稿だけを抽出したATOM feedを作成したので、つぎはそのATOM feedに新規投稿があればFacebook Pageへ投稿するレシピを作成する。
ふたつめのレシピ
ふたつめのレシピは、「ひとつめのレシピで作ったRSS情報を参照して、新規記事があればSNSに投稿する」という内容になる。
レシピを作成する前に投稿先Facebook Pageとzapierを接続しておく必要がある。接続はExploreのページからFacebook Pageを選択してユーザーIDとPasswordを入れるだけなので省略します。
新たにレシピを作成するので [MAKE A ZAP] を押して新規レシピの作成を開始する。
Feedを参照するので、ここで選択するのも前回と同じくRSS。
次の画面で参照するRSSのURLを設定する。
- Feed URL
ひとつめのレシピで作成したURLを入れる。https://zapier.com/engine/rss/<固有ID>/MyShortNoteFeed/ のような感じになるはず。 - Username
未入力 - Password
未入力 - What Triggers a New Feed Item?
smartのまま
設定後にContinueで確認画面。さらにContinueでRSSのチェックが走るのでTest succssfulなら問題なし。Continue。
次に選択するのは投稿先SNSになる。今回はFacebook Pagesを選択。
Facebook Pageに投稿したいので、Create Page Postを選択。
次の画面で投稿に使用するアカウントを選べるので選択する (ここで[Test]ボタンも押したほうがいいみたい。ワイは押さずに進めて投稿に失敗したので…;´Д`))。
次の画面が投稿内容の設定画面。
- Page
投稿対象のFacebook Pageを選択 - Message
投稿する内容を記載する。RSSが正しく設定できていれば投稿に使うTitleやLinkなどが選択できるようになっているので、投稿したい内容を選択する。
もちろん途中に文字を入れてもOK。"[Title] を投稿しました!" と書けば、その日本語部分も含めて投稿される。改行や空白もそのまま投稿される。
だいたい「ShortNoteへ投稿しました。(改行)Title(改行)PubDate(空白 または 区切り文字を何か入れる)Raw Creater」くらいでいいと思う。 - Picture URL
未入力 - Link URL
Linkを選択。このURLを元にLink Plateが作成される。 - Link Name
Titleを選択。これが投稿上に作成されるLink Plateの一番上の太字部分になる。 - Link Caption
Linkを選択。これがLink Plateの一番下、灰色文字部分になる。ほとんどのLink PlateではURLが入れられる部分。 - Link Description
Descriptionを選択。
次が入力内容確認画面。
その次がチェック画面なのでTest successfulならOK。Finish。
次の画面でレシピに名前を付けて、保存先を選択し、スイッチをONにする。これでふたつめのレシピの作成が完了。
Facebook Pageに投稿されているかチェック
この時点で既にFacebook Pageに投稿されているはずなので、自分のFacebook Pageを開いてみる。
投稿されていればOK。されていなければ投稿先の指定を間違っている可能性あり。Facebook 個人ページなどを探してみる。
きちんと投稿されていたら、ひとつめのレシピで他の方のユーザーIDでフィルタしていた箇所を自分のユーザーIDにする。
フィルタするユーザーIDを変更
DashboardからZapsを選択し、保存先 folderを選択すると、作成したレシピが表示される。今回修正したいひとつめのレシピを選択する。
Filter部分を修正したいので矢印部分を押して、Edit Optionsを選択。
するとFilter条件が表示されるので、一番右のboxに自分のユーザーIDを入力する。そしてContinue。
次の画面に移動すると、「文字がマッチしない」のようなメッセージが表示されるが無視する。自分の投稿がATOM feed上にないのでエラーが出るのは仕方ない;´Д`)
この時点でShortNoteに投稿したとしても、どうもチェック用のATOM feedをずっと覚えているらしく、レシピ作成当時の情報からマッチする文字を探そうとするのでここでは一旦エラーを無視して先に進める。
エラーが表示されたままContinueなりDashboardに戻るなりする。
最終動作確認
ここでようやく最終動作確認になる;´Д`)長かった
DashboardからTask Historyを選択する。
ここには動作したレシピの履歴が表示される。ここまでできたらShortNoteに何か投稿してみる。
そして5分待つ……。
5分後に 例2のように表示されればOK。例1だと残念。行をクリックすると詳細が表示されるので、失敗している場合は内容を確認して問題の原因特定と修正を行う。
例2が表示されたら、そこからさらに5分待つ。そして例3が表示されればFacebook Pageに投稿ができているはず。早速Facebook Pageで確認してください。
これで説明完了;´Д`)< お疲れさまでした
これで全内容の説明完了です。お疲れさまでした。
各サービスの内容や設定項目についてもある程度その内容について説明したので、ShortNote → Facebook Pageだけでなく、他のブログが対象になってもそれなりに対処できるんじゃないかと思います。
例えばShortNote → はてなブログの場合はzapierがはてなブログに対応していないから、ShortNote ATOM feed → E-mailではてなブログ投稿、という感じで対処すればいいかも。
zapierは他にも様々な機能があるので色々試して面倒な作業を自動化すれば楽になれるかもしれないです。
それでは~ *´Д`)< ゴキゲンヨウ
3.1 前回チェック時よりも新しい時刻の記事がある
先にこちらの記事を確認されることをお勧めします。
´Д`)< この記事の内容
- 自動的に記事投稿してくれるような便利サービス
- IFTTTのFeed channelで新しい記事のチェック
- zapierで新しい記事のチェック
自動的に記事投稿してくれるような便利サービス
なんかサービス提供会社の回し者かという記事になりそうな気がするが;´Д`)
前の記事で最新記事情報取得方法まで分かったので、次はその情報を別Siteへ投稿する方法になる (最新記事に自分の投稿が含まれているかどうかの確認方法はもう少しあとで)。
世の中には便利なサービスを無料で提供しているところがあり、下記で紹介するサービスは記事投稿に限らず様々なことを自動化することができる。
しかしその機能を紹介していると時間がいくらあっても足りないので今回は必要な部分だけ;´Д`)
- IFTTT
- トリガーとアクションを組み合わせて様々なことを自動化してくれるサービス。
今回の例ではトリガー:Feed情報,アクション:SNS投稿 を使う。 - myThings
- Yahoo Japanが提供している、IFTTTの真似サイト;´Д`) びっくりするくらい完全に真似している;´Д`) イイノカコレ
しかしなぜか iPhone, Androidのみのサポートでパソコンからは使えない。なので今回の選択肢からは除外。 - zapier
- 今回初めて知ったサイト;´Д`) でも有名っぽい
IFTTTと比べてトリガー情報や出力情報を細かく指定できる。その分、細かく知っていないと分からないので難しい;´Д`)
無料アカウントでは「トリガー,アクション」の組み合わせのみらしい。有料アカウントなら「トリガー,アクション,アクション、アクション…」とできるらしい。かなり便利そう。
IFTTTのFeed channelで新しい記事のチェック
これ。選択すると自動的に5分間隔で指定したURLのFeed情報をチェックしてくれる。
トリガーとして選択すると、トリガー条件を選ぶ画面になる。
- New feed item
- 「新しいFeed情報があればアクションを実行する」という場合に選択する。
Feed情報が個別ユーザーを対象にしたものならこれを選択。 - New feed item matches
- 「新しいFeed情報に指定したkeywordがあればアクションを実行する」という場合に選択する。
ShortNoteのFeed情報の場合、投稿者が自分のものか確認する必要があるのでこちらを選択する。
次に現れる項目
- Keyword or simple phrase
- ここで指定した文字がFeed情報の中に含まれていれば、続くアクションを実行する。文字が含まれているかどうかを確認する対象タグは<item>,<title>,<description>のみ。
- Feed URL
- Feed情報を取得するURLを指定する。
´Д`)< ここ、ワイが一番苦労し、そして時間を消費した部分
「Keyword or simple phraseにShortNoteのユーザーIDを入れれば、自分の投稿と一致するものがあるときにアクションを実行してくれるんだな」と思ったらそうではないらしく。
赤字で書いた部分の通り、keywordと一致するか確認してくれるのは一部のタグだけなのだ。ちなみにこの情報、IFTTTのヘルプに載っていない。そしてGoogle検索で出てくるIFTTTのFeed channelについて解説している日本語サイトのどの記事にも載っていない。ワイはたまたま見つけた英語に記事でそれを知ったのだ;´Д`) フザケンナ
何度実行してもkeywordとマッチしてくれないし、何度見直しても正しく指定しているし、何度見てもfeed情報にIDがあるしでホント「どうなっとるんじゃー!」と何度叫んだかわからない;´Д`)
というわけでIFTTTでは今回やりたいことを実現できないということが分かった;´Д`)
じゃあどうするかというと別のサービス、zapierを使う。
zapierで新しい記事のチェック
IFTTTで説明した内容と同じことをzapierで行う……んだけど、手順が結構異なる。なぜかというと、「Feed情報に指定したkeywordがあれば続くアクションを実行」ができないから。
少し回りくどく感じるかもしれないけど、zapierでは2つのレシピに分けてそれを実現する。
- Feed情報からkeywordに一致する投稿情報を抜き出したFeed情報を作るレシピ
- Feed情報に新規情報があればSNSに投稿するレシピ
今回の記事は「自分の新しい記事投稿確認」までなので、ひとつめのレシピまで説明します。
ひとつめのレシピ
まずzapierで [MAKE A ZAP] を押してレシピ作成を開始する。
そしてトリガーとして「RSS」を選択する。
「Feedに新しいitemがあったとき」しか選択肢がないのでそれで進める。
次の画面には
- Feed URL
Feed情報取得先URL - Username
URLのFeed情報取得に認証が必要なときに指定 - Password
URLのFeed情報取得に認証が必要なときに指定 - What Triggers a New Feed Item?
Feed情報のチェック条件。Contentに違いがあればとかとにかく違いがあればとかあるが、大抵smartで大丈夫。
と色々設定欄があるが、Feed URLに https://www.shortnote.jp/feed/latest/atom.xml を指定するだけで他は変更なしで問題ない。
次の画面は入力内容確認画面なので、内容を確認してContinue。
その次はFeed情報が取れるかどうかの確認なので「Test successful」ならContinue。
次に選ぶのが Filter。
Only continue if ... しか選択肢がないのでこれを選ぶ。
次の画面で情報抜き出し条件を選択する。先の画面でFeed情報がちゃんと取れていればこんな風に取得できた情報が表示されるはず。
今回はユーザーIDが入ったURLを使いたいから、
- 1つ目のboxに Raw Author URIを指定
- 2つ目のboxに (Text) Containsを指定 (Textを含むものと一致する)
- 3つ目のboxに ユーザーIDを指定
とする……と言いたいところなんだけど、3つ目の項目に自分のユーザーIDを指定して先に進めるには、まずShortNoteに何か投稿する必要がある。そうでないとATOM feedに自分のIDが載らないから。
ShortNoteに「テスト投稿」とかしてもいいけど、設定に失敗するたびに投稿するとShortNoteにノイズ投稿が増えてしまう。それは避けたいので、設定が完了するまではひとまずATOM feedの一番上のentry欄に入っている方のユーザーIDをお借りして設定を進めてしまう。もちろん最後まで設定が完了したら、忘れずにユーザーIDを自分のものに変更する。
次の画面は「テストしますよー」なのでContinue。
次の画面で緑色の表示ならちゃんと一致しているのでAdd a step。不一致なら戻ってkeywordを指定しなおす。
次に指定するのはまたRSS。けれどもRSSを選択すると "Create item in Feed"になっている。
今回は設定項目が多い。
- Feed URL
作成するFeed情報を外部から取得するために作るURL。適当に決める。MyShortNoteFeedとか入れておくと分かりやすいかも。 - Feed Title
作成するFeed情報のタイトル。適当に𓆲𓄁𓄂𓃃𓁕𓁁𓁁𓀬𓀾𓀿とか入れればOK。空のままなら勝手に入れられる。 - Max Records
最大件数指定。50以下。空のままでOK。 - Item Title
New Item in Feed → Title を指定 - Source URL
元々入っているURLは消す。そして New Item in Feed → Link を指定 - Content
New Item in Feed → Content を指定
(Contentの場合、全文が入る。Descriptionの場合、前半数十文字が入る。目的に応じてお好みで) - Author Name
New Item in Feed → Raw Author Name を指定 - Author Email
ShortNoteのFeed情報にはEmail情報がない。しかし今回は自分の情報を抜き出しているので自分のEmail addressを入れれば要件は満たせる。未入力でも問題ない。 - Author Link
New Item in Feed → Raw Author Link を指定 - Media URL
未入力 - Media MIME Type
New Item in Feed → Raw Link @Type を指定 - Media Length in Bytes
未入力 - Pubdate
New Item in Feed → Pub Date を指定
次の画面が確認画面なのでContinue。
次の画面でテスト実行されるので、Test successfulならFinish。
次の画面でレシピに名前を付けて、保存先を指定 (Homeでいい)してスイッチをONにすればひとつめは完成。
2. 自分のブログページの RSS or ATOM が自動更新
先にこちらの記事を確認されることをお勧めします。
なんかタイトルの日本語がおかしいな。まあいいか;´Д`)
´Д`)< この記事の内容
Websiteが提供する RSS, ATOM feedの探し方
´Д`)< 大変かんたん
というわけでShortNoteのfeed情報を探してみよう。
確かShortNoteは公式に ATOM feedをサポートしていると書いて……ん?
”分かる人には分かる”な機能ですが「人気タブ」の内容を Atom フィードでも配信はじめました。
人気ノートの Atom フィードでの配信をはじめました - #ShortNoteアップデートのお知らせ
ん、んん……?何かが見えたような……?
”分かる人には分かる”な機能ですが「人気タブ」の内容をAtom フィードでも配信はじめました。
人気ノートの Atom フィードでの配信をはじめました - #ShortNoteアップデートのお知らせ
人気Noteには言及されているけど最新Noteについては触れられてないよ!Σ(゚Д゚;
HTMLを参照すると最新Note情報提供用 ATOM feed が記載されているけど、「とりあえずある物を使ったらできた」レベルに下がってしまったか……仕事でやったらめちゃくちゃ怒られるやつだな ;´Д`) 趣味ではいいや
話が脱線した ;´Д`)
ShortNoteのfeed情報は [手順2]の方法で探すと https://www.shortnote.jp/feed/latest/atom.xml が見つかるのでこれを使う。
Feed情報がない場合は
;´Д`)< それは困った
一度、HTMLを解析してRSSを作成してくれるサービス(Page2Feed)を利用してみるといいかも。ほんの少しだけ解説するとこんな感じ。
これでダメだったら……急激に難易度が上がるため、ブログ記事数件程度では説明できないと思う;´Д`)
Feed情報から取れる内容を確認する
RSSなり ATOMは Text形式 fileなので、開いて中を確認することができる。
中はXMLで書かれている。ShortNoteの場合の例を上げると、以下のような感じ。
ShortNote Atom feed: https://www.shortnote.jp/feed/latest/atom.xml
タグ名 | 意味 |
entry | 記事1件分 |
title | 記事タイトル |
published | 公開日 |
updated | 更新日 |
summary | 概要 (本文の先頭から数十文字の内容) |
name | 投稿者ニックネーム |
uri | 投稿者プロフィールのURL |
content | 本文 (全内容) |
ShortNoteのATOM feedはこうなっているけれども、他のサイトも同様とは限らない。それぞれのサイトが提供しているFeed情報の内容を確認する必要がある。
Feed情報から今回必要な情報を確認しておく
今回やりたいことを実現するために必要な情報がFeed情報の中に揃っているか確認する。
今回やりたいことは2種類。
1に必要な最低限の情報は
- 投稿者名
- 投稿日
- タイトル
2に必要な最低限の情報は
- 投稿者名
- タイトル
- 本文
どの情報も取れそうなので大丈夫かな *´Д`)
注意が必要な点
上記 ATOM feedを見ると分かるんだけど、ShortNoteが提供しているATOM feedは全ユーザーを対象にした最新記事になっている。恐らくShortNoteのサイトポリシーによるものかな。
そしてはてなブログを含め、大抵のBlog siteはアカウントごとにFeed情報を提供している。つまり、その内容が個別ユーザーを対象にした最新記事になっている。
今回実現したいことは「自分の投稿のみを対象に別サイトと連携」したいので、ShortNoteの ATOM feedから情報取得したときに、まず自分の投稿が載っているかどうかをチェックする必要がある。個別ユーザーを対象にしたfeed情報なら、「そのfeedが更新された = 自分の新規投稿がある」と言えるんだけどね。
自分の投稿かどうかを確認したい場合、先のタグについての表から「nameタグにある情報だな`Д´)」となりそうになるが、nameタグの情報は使えないのだ;´Д`)
nameタグにはShortNoteの基本設定画面にあるニックネームが入れられている。
このニックネームは他の人と重複が許容されている。だからこの情報で自分の投稿かを判断すると、たまたま同じニックネームを付けた別の人の記事までSNSに投稿してしまうのだ。
じゃあどこで判断するのかというと、ユーザーIDを使う。ユーザーIDは、まず自分のProfile画面を開いて…
そのページの一番下側
この矢印に書いてあるIDが誰とも重複しない自分を表すIDになる。この情報、ATOM feedに載っていないように見えるが、uriタグに自分のIDを含んだURLが入れられているので、この情報を使って判断すれば確実。
ブログとSNSの連携について
最近様々なサービスにアカウントを作成したため、そのほとんどが放置状態になっている。ログインはできなくても連携くらいはさせたいなとずっと考えていた。
現時点で連携させたいと考えているものはこのあたり。
今回の記事は ShortNoteユーザーの方にも見てもらえるよう、少し丁寧めに書くつもりです。
■ 連携内容
やりたいことはこんな感じ。
Docs.comの日記機能は、どう連携するべきか迷っている;´Д`)
- ShortNoteに記事投稿する
├→ はてなブログにコピー記事投稿
├→Twitterにお知らせLink投稿
└→Facebook Pageに お知らせLink投稿 - はてなブログに記事投稿する
├→Twitterにお知らせLink投稿
└→Facebook Pageに お知らせLink投稿
■ ブログ ⇔ SNS間 連携方法
やり方は色々あると思う。とにかく最終的に自分が思うような形になればいいのだ。
- 記事投稿するブログが提供している機能を使って他と連携
- それ以外の手段で連携
通常は1で連携する。それが最も簡単で確実。
しかしブログ提供の連携機能が、連携したいと思っているサイトとの連携に対応していない場合は自分でなんとかするしかない。
■ ブログ記事連携するときの常套手段
自分でなんとかするといっても、その機能を1から作るわけではない;´Д`) 日が暮れるわ
大抵のブログサービスには RSS とか ATOM と呼ばれる、記事を投稿したときにその更新情報を示す fileが自動保存される。 この情報と、自動的に記事投稿してくれるような便利サービスを組み合わせる。
■ RSSを参照して別サイトへ更新連絡投稿を行う方法概要
処理の基本はこんな感じになる。そして大抵はこれでいけるはず。
まずは ShortNoteと Facebook Page連携から着手していたので、その連携方法を上記の流れで作成してみた。
しかし…今回はこれでは実現できなかったのだ……
■ 基本的な処理ごとに記事を分割
以降は基本的な処理の流れを元に、各処理ごとに説明を分けます。
- 記事を投稿
↓ - 自分のブログページの RSS or ATOM が自動更新
↓ - 2の更新を監視 (ポーリング周期: 5 min)
;´Д`)< そろそろブログのCSS見直さないと
アメブロからはてなへの引っ越しが完了したので、そろそろはてな側の環境を整備しないと。
現状はアメブロのブログスタイルを自分の好みに近づけるため、無理やりCSS定義を上書きしたり、アメブロの意味の分からないタグ制限に対応するため、変なところにtarget疑似要素を使ったりと大変なことになっているのだ ;´Д`)
また、上記の影響かは分からないが携帯電話での表示が非常に見づらくなっている。文字が小さい!
その他にも対応したいことが細々とある。
……箇条書きにしよう;´Д`)
■ はてなブログ環境整備 (優先度順)
- ブログ全体のスタイル決定CSSを サイドバーで上書き読み込みするのをやめる;´Д`)
- デザイン変更する。ブログ Top pageを開いた時に 記事本文が途中省略されるものへ。
- 携帯で表示したときに普通に見られるようにする
- ShortNoteへ投稿したとき、自動的にはてなブログにも投稿するように
- はてなブログに投稿したとき、自動的にFacebook Pageにも投稿するように
- SNS Shareボタンを付けるか……;´Д`)
- Profile cardのアメブロ制限回避codeを修正して真っ当な形にする
項目2の要件を満たすデザインって既定のリストに含まれているよね?
……いるよね;´Д`)?
´Д`)< ShellScriptについての備忘録
※ この記事は アメブロからのお引っ越し の続き記事です
あまり触れる機会がなかったShellScript。真面目に調べてみると初めてしるような内容が非常に多かったため備忘録として記事を作成しようと思う。
最近、同じ内容について詳細にまとめてあるサイトが既にあるからとそういうサイトへのリンク集を作っても自分の記憶に残らないことに気付いた;´Д`) リンク集記事のことすら忘れてしまう
なので他の人にとっては目新しさのない記事になるかもしれないが、自分の頭を整理しる目的で記事を作成する。
■ ;゚Д゚)< ShellScriptってスゲー!
いやホントにすごい。DOSのbatch fileのようなものでしょ、と思っていたのだが全然違った。以下、凄い点。
- 関数が作成できる。戻り値も返せる。sourceコマンドでincludeもできる
- 連想配列が使える
- trapコマンドで正常・異常終了をtrapして後処理できる
- だいたい正規表現が使える。変数単体で使えてしまう。
- 欲しいと思った機能を持つコマンドが大抵の場合、既にある
ShellScriptとしての凄い理由ではないものも含まれているけどまあいいか;´Д`)
CUIならなんでもできるんじゃないの!?ってくらいすごい。 もし微妙に足りない機能があった場合は、非常にシンプルな機能を提供するバイナリを作ってShellScriptから呼び出したりするといいかも。
■ ;´Д`)< あれ?思ったより書くことが少ないぞ?
;´Д`)< おかしいな、調べながら作っているときはあんなに時間がかかったんだけど……
どうやら調査に使った時間の大半は ShellScirptよりも 正規表現をどうするかに消費されていたようです;´Д`)
なんでこんなに難しいんやろね……。正規表現単体ではなくて、標準入出力とか文字エスケープのいるいらないとか、コマンドごとの正規表現引数指定方法とか、;゚Д゚)< "\1"に切り出した値はどうやって使うの!? とか、こういう色々な要素が同時に絡んでくるからややこしくなるんだろうなあと思ったり。最後の疑問は未だにどうすればいいかがわからないし。
仕事で使おうと思ってもこういう部分で作成までに時間がかかって「時間使うなら手作業でやれば?」→ 結局覚えられない ってなるんだよなあ。
もうやめた職場のことを考えるのはやめるか。