5log

日々の仕事の備忘録

AMP Conf 2019 2日目のセッション振り返り(AMP関連の便利ツールの紹介)

4/17、18の二日間、六本木アカデミーヒルズでAMP CONF 2019が開催されており、私も仕事を休んでこのイベントに参加しています。(2度目)

2日目のセッションもAMP for EmailやAMP Ads、Yahoo JapanのSigned HTTP Exchangesの話など盛りだくさんの情報でした。

ただ、1日目よりも各セッションの内容が深いものが多く、実装周りの情報などは私自身が咀嚼できていないため、今回はセッションで紹介されたAMPの利用に便利なツール類を紹介していこうと思います。

一日目のセッションについて書いた記事はこちら。

5log.hateblo.jp

「AMP Playground」:ブラウザ上でAMPHTMLのコードが書ける

playground.amp.dev

このページは左側にエディタ、右側にプレビューが表示されており、リアルタイムで変更をプレビューしながらAMPページのコーディングが出来ます。

f:id:K3105:20190418220105p:plain

AMPタグの補完やバリデートのチェックも即座に反映してくれるので、学習目的でAMPをはじめる人には非常に使いやすいサイトになっていると思います。

また、左上のプルダウンメニューからは、AMPHTMLだけでなく、AMP for AdsやAMP Stories、AMP for EMailなども選べるようになっており、選択するとそれぞれの雛形が出てくるようになっています。

ちなみにコードの出力機能などは無いようです。

Gmail AMP for Email Playground」:AMP for Emailのサンプルやテスト配信もできる

https://amp.gmail.dev/playground/

先に紹介したAMP Playgroundと混同しそうになりますw

こちらはAMP for Emailに特化したテストツールです。使い方はAMP Playgroundと同様ですが、右上のプルダウンから参考例を開くことができる他、エディター下のSENDボタンを押すと自分宛にAMP for Emailを送信することができます。

f:id:K3105:20190418220246p:plain

なお、動的メール閲覧の際は事前にGmailの設定変更が必要となります。詳しい方法がQiitaにまとまっていたので、こちらを見てみると良いと思います。

qiita.com

「AMP Readiness Tool」:ページ内のサードパーティ製ツールがAMPで使えるか診断してくえる

ここからは最後のセッションで紹介されたツール群をご紹介。実務でAMPページを利用している方は、このセッションの内容はとても役立つと思います。

Measuring success: What's new in AMP analytics & experiments (AMP Conf '19) - YouTube

そして、このAMP Readiness ToolはChromeのアドオンとなります。

chrome.google.com

これを使う事で、現在表示しているページで使用されているサードパーティ製ツールが一覧化され、それがAMPページで実装可能かどうかを表示してくれます。

f:id:K3105:20190418220328p:plain

  • Supported(AMPでも使用可能)
  • Needs Conversion(AMPページでは変換が必要、詳細は項目左の矢印にマウスホバーすると英語で説明が出ます)
  • Not Compatible(互換性なし)

また、サードパーティツール名の右にある「<>」というボタンをクリックすると、実装するためのタグの情報が表示されます。

f:id:K3105:20190418220901p:plain

既存のWebページをAMP化する時には、大いに役立ってくれそうですね。

「AMP Tag Test」:AMPページのトラッキングが正常に行われているかテストしてくれる

amptagtest.appspot.com

ページのURL入力欄に、公開済みのAMPページのURLを入れると、AMP Cacheが正常かどうか表示してくれるようです。テストはChromeSafariで計測してくれるようです。

f:id:K3105:20190418220525p:plain

しかし、業務で作ったAMPページや著名サイトのAMPページをいくつか入力してみたのですが、エラーで開けず。。

こちらは一旦時間を置いて再度試してみたいと思います。

「AMP Insights」:AMPページの数値計測用テンプレート

datastudio.google.com

AMP InsightsはGoogle Data Studioのテンプレートです。

こちらは実際に試せていませんが、このテンプレートを用いることで、AMPページの基本指標を確認したり、通常ページとAMPページの数値比較を行ったり、OSやデバイス別のパフォーマンス比較ができるようです。(おそらくGoogle Analyticsの利用が前提)

まとめ

これまでもAMPページの開発にはChromeアドオンの「AMP Validator」やURL・コードを入力してタグのエラーチェックができる「AMP テスト」などがありましたが、リアルタイムのエディターと豊富なテンプレートで制作の敷居が下がると共に、検証・解析に関するツール群も充実してきて、Googleの本気度が伺えますね。

セッション内でも話がありましたが、AMPは単純に高速表示される、収益性が上がるといったユーザーメリットだけでなく、クリエイターにとってはGoogleの優秀なエンジニア達が知恵をしぼって作り上げたWeb制作のベストプラクティスが詰まった仕様となっているので、ぜひ触ってみることをオススメします。

AMP Conf 2019 1日目のセッション振り返り(新技術系情報を中心に)

4/17、18の二日間、六本木アカデミーヒルズでAMP Conf 2019が開催されており、私も休暇をいただいてこのイベントに参加しています。

どのセッションも非常に学びの多い内容でしたが、頭の整理も兼ねてセッション全体の中から、AMPの新技術系に関する情報を記事化してまとめておきたいと思います。

はじめに:「AMP Conf 2019」って何?

amp.dev

公式サイトの説明の通りですが、年に1度開催されるAMPの技術祭典との事で、初回がアメリカのニューヨーク、2回目がオランダのアムステルダム、そして3回目となる今年は日本のTokyoで開催される事となったようです。

講演はすべて日本語の同時通訳があり、さらにライブストリーム動画がYoutubeにもアップされているため、詳しく見たい方はこの動画を見るとよいと思います。

AMP Conf 2019 - 第1日目 ライブ配信 (Japanese) - YouTube

よって今回は1日目の講演の中から気になった情報についてピックアップで紹介していきたいと思います。

amp-scriptによるカスタムJSの実装のトライアルがスタート

これまでAMPページではAMPが用意したコンポーネントのみしか使えず、自作のJavaScriptのプログラムは反映できませんでした。

しかし、amp-scriptコンポーネント実装により、ユーザーが作成したJavascriptをAMPページで動かせるようになるようです。

これだけ聞くと嬉しいのですが、一方でamp-scriptには下記の制約があるようです。CSSもそうですが、容量制限がなかなか厳しい...

  • Javascriptのサイズはトータル150KB以内(未圧縮の状態で)
  • ユーザーがページ内で何らかのアクションをしない限り、scriptは動作しない
  • Javascriptによるアクションはユーザーが操作してから5秒間

実際の利用にあたっては、仕様の詳細については、githubの説明を読み込んだほうが良さそうです。

github.com

また、amp-scriptの導入に関して@mizchiさんがQiitaに記事をアップしているようでしたので、試してみたいと思います。

qiita.com

AMP Storiesの機能拡張と、検索エンジンの結果表示

AMP Stories自体は去年のAMP Roadshow 2018でも紹介されていた機能となりますが、2019年はさらにアップデートされました。

  • ローカライズ(21言語をサポート)
  • デスクトップ対応(横長ディスプレイにも対応、背景画像のポジション指定のサポートはこれから)
  • サイドバー実装
  • アタッチメント(ページに付随する情報をスクロールで表示させたりできる)
  • 埋め込み(AMP Stories notTwitterコメント、GoogleMap、Youtube動画など埋め込みできる、今後さらに増えていく予定)

また、AMP Storiesは今後Googleの検索結果の上部(カルーセルエリアの直下)に表示されたり、Google Discover(Googleの検索結果下に表示される、ユーザーの興味や嗜好に関連する情報を入れたカード)などにも表示されるようになっていく、との事です。

今も、AMPページがSEO的な文脈でクライアント企業に提案する、といった動きは多いですが、AMP Storiesが検索表示で上位表示されやすくなる、という効果があればSEO目的でAMP Storiesを導入する企業が増えてくるんでしょうか?

なお、AMP Storiesはプログラム不要で作成可能なサービスが色々あるようです。「MakeStories」などは休み時間の間に会員登録して使ってみましたが、パワポKeynote感覚でAMP Storiesが作れて面白いですね。週末にもう少し触ってみたいと思います。

makestories.io

「amp.dev live!」で出てきた便利なコンポーネントたち

このセッションではGoogleの人がAライブコーディングでAMPページを作るという贅沢なイベントでした。そのセッションでは、私が今まで知らなかったAMPのコンポーネントなども使われており、衝撃を受けたので、それらを紹介したいと思います。(新技術という訳でも無いのですが)

amp-fx-collection

フェードインやパララックスなどのアニメーションが簡単につけられるコンポーネントのようです。AMPページで動きのある表現をするにはamp-bindしか無いと思っていましたが、こういう便利なものがあったんですね。。

amp.dev

amp-live-list

ページの情報をリアルタイムで更新してくれるコンポーネントのようです。セッションではハッシュタグ付きのTwitterのコメントを表示させる機能を実装していました。

以前AMPページでTwitterのタイムラインを実装するためにamp-twitterコンポーネントを使った際は高さ表示を制御する術が見つからず実装を見送ったのですが、amp-live-listならその辺調整可能なのでしょうか。今後検証してみます。

amp.dev

まとめ

という訳で、AMPの最新技術にピックアップして紹介していきました。

イベントでは他にも良いセッションが多く、Washington Postの方が話したAMPを取り入れる際のマインドセットに関する話や、紛争地域の「app gap」の問題に対するAMPのアプローチなど盛りだくさんな内容でした。時間に余裕がある方はYoutubeでセッションを見ていただくことをオススメします。

ちなみにセッションの後の懇親会も楽しかったです。普段はAMPの事を話せるメンバーが会社内にいないのですが、他社のエンジニアの人とAMPの話をして、「やっぱり、どこの会社でも苦労してるんだなー」と知ることができたのが良かったです。

2日目もAMP for EmailやSigned HTTP Exchangesのセッションなどがあり、とてもワクワクしています!明日も引き続き楽しんできたいと思います!

既存サイトをAMP対応する場合の工数・スキルセットについて考えてみた

私はこれまで、メディアサイトのAMP対応について3案件ほど開発していた事もあってか、社内でもAMP対応に関する問い合わせをいただく機会が多いです。そして、2018年の秋頃から、明らかにAMP化に関する話が増えてきたように思います。

その中でも、よく質問されるのはAMPの実装面に関する話よりも、AMP対応を行う場合の見積もり・作業内容・工数といった問い合わせが非常に多いです。確かに、AMPタグの技術面に関する情報は色々出てきますが、どれくらいの期間や工数が必要になるか、というのは実際に経験してみないと、中々イメージしづらいですよね。

そこで今回は、私が過去に携わったメディアサイトのAMP対応の事例をもとに、必要な作業内容・工数について考えていきたいと思います。

前提1:新規サイトをAMP化するのと、既存サイトをAMP化するのは、どっちが大変?

サイトをAMP対応する場合、今ある既存サイトをAMP対応させるのと、これから新規に作るサイトをAMP対応する、2つのパターンがあると考えられます。そして、2つの大変さを比較すると「既存>>>新規」くらい既存サイトのAMP化は大変です...

これは、AMPページにはCSSの容量制限や使えるコンポーネントに限りがある事が理由です。AMP対応を想定して新規ページを作る場合、AMPの制約を考慮しながら通常のWebページを作っていくことができますが、AMP対応を考慮してない既存ページをAMP化する場合、どうしてもAMPで再現できない要素をどのように代替させるか、という事を意識する必要があるためです。既存サイトのAMP化は、せいぜい基本レイアウト・CSSの流用ができる程度で、ほぼ新規ページ制作と労力は変わらないと感じています。

AMPページの制約を考えるにあたり、AMPで出来る表現を学ぶには、AMPの公式ページとなる「amp.dev」のTemplates(旧名:AMP Start)のサンプルページを見るのが一番だと思います。

amp.dev

そのため、もし業務でクライアントのWebサイトをAMP対応させる場合は、事前にクライアントに対して

  • AMPのデメリットの1つとなる「サイト内表現に制約が生じる」ことを理解してもらう
  • AMPで再現できない箇所はレイアウトを変える、もしくはページ内要素をオミットする事を了承してもらう

この2点を伝えて、合意をとっておくことが大事です。

前提2:メディアサイトAMP化で開発するもの

さて、いよいよ本題となるAMP対応の工数について考えていきます。まずは、AMP対応に必要な作業を洗い出します。私が過去にAMP対応したメディアサイトはこのような要件でした。

  • 定期的に新規記事の作成・更新が入るメディアサイトの各記事(100ページくらい)
  • EC機能やログイン機能など、動的な要素は含まれない
  • クライアントのサーバー側には一切関与できないので、基本的にフロントエンド側でなんとかする
  • WordpressなどCMSによる記事の管理は行ってない

動的要素が含まれない静的ページとなるため、作業難易度としてはかなり低めで、AMPタグに関する知見があれば簡単にページをAMP化できます。ただ、今回はWordpressのようなCMSが使えないため、既存のプラグインを使った対応ができず、そこの対応策を考える必要があります。

このような条件で、記事ページをAMP化するにあたり、2つのアプローチがあると考えました。

  • HTMLページをAMPページに自動変換するプログラムを作り、毎回更新時に実行
  • CMSを独自に開発して、1つの文章から通常ページ・AMPページを生成

運用性を最善で考えるならCMSを使ったページ生成かもしれませんが、この時はリリース予定までの期日から逆算し、比較的短い期間で開発ができる自動変換プログラムの開発に着手しました。

1. 既存のWebページからAMPページ用テンプレートを作成する【1日前後】

まずはAMPページを量産する用のテンプレートを作成します。できればサイト内モジュール一式をまとめたページを作成し、それをテンプレートにしましょう。

もし、対応予定のページがすでに公開済みであれば、下記サイトを使うと、サイトをAMP対応した時の見え方とHTMLを出力してくれます。

generator.rabbit.gomobile.jp

しかし、上記のジェネレーターを使用しても、構造によってはレイアウトが崩れてしまう、動的に動かしている箇所がうまく制御されない、といった問題も出てくるため、そこは手動で直す必要があります。

AMPテンプレート開発のゴールは、AMPページとしてエラーが出ない状態のテンプレートを作ることです。コードのチェックは下記の「AMPテスト」ページから実行する事ができます。ソースコードをコピペしてチェックもできるので、開発中のページでも簡単にチェックできます。便利!

search.google.com

エラーが出たら、そこを修正して、またテストして、エラーを直して…を繰り返し、「有効なAMPページです」の表示が出たら、AMPページとして合格となります。

AMPタグの知識があれば、この工程は半日もあれば終わりますが、初めて対応する場合だと、AMP用のタグを調べながら、エラーの原因をチェックして…となるため、一日がかりの作業になると思います。(サイトの構造によって難易度も変わってきます)

2. AMPページ自動変換プログラムの開発【3〜4日】

テンプレートを作成後は、AMPページへの自動変換プログラムを開発していきます。先程は外部ツールと手動でAMPページを作りましたが、それを自動化する方法を考えていきます。

まずは変換前の通常ページとAMP化したページで差分をチェックします。Windowsなら「WinMarge」というツールを使えば簡単に差分比較ができます。Macの差分ツールは…誰か良いツールを紹介してください

この自動変換プログラム開発にあたり、主に必要になってくる機能は下記です。

  • HTMLタグを解析し、タグ名を変換したり、タグの属性を追加・削除する機能(AMP専用タグの対策)
  • ページ内の画像サイズを自動取得し、画像タグに入れる機能(amp-img対策)

こうした仕組みは、JavaScriptを使ったブラウザ上の変換ツールを作ったり、Node.js、PHPなどを使用して、開発環境のソースコードからAMPページを生成するHTMLジェネレーター的なものを作るのが良いと思いますが、いずれにせよエンジニアスキルの高い人の協力が必要となり、この工程もエンジニアの開発スピードで大きく変動してきます。(私の案件ではPythonを使いましたが、これは同じチーム内で過去にPythonを使った事例があった等の特殊な事情があるためです)

とはいえ、仕組みとしては差分が出ている所を1つずつ置き換えていくシンプルで地道な作業になるので、3〜4日程度あれば一通り変換プログラムが開発できると思います。

3. テストページを本番で公開し、AMP Cacheされるかチェック【1〜3日】

AMPページは公開後、Googleのサーバーにキャッシュしてもらう必要があります。AMPページが速い!と言われるのはGoogleサーバー内で最適化の処理がされるためです。

amp.dev

これは実際にページを一般公開し、Googleクローラーが拾ってくれるか確認が必要になります。業務の場合は、クライアントにも事前にテストページ配信の合意を取り付けた上で進めていきましょう。

ただ、Googleがどのタイミングでクロールしてくれるかは不明です。早ければ数時間でクロールしてくれますが、場合によってはテストページ公開後、翌日に反映される事もあり得ます。そのため、この工程も加味してスケジュールは余裕をもって設定しておく必要があります。(時間が無いときは、1の工程で作ったAMPページ用テンプレートを事前に公開しておくのもアリです。)

ここの工程では、主に下記についてチェックしていきましょう。

  • 検索結果でテストページをクリックした時、自社のドメインではなくGoogle側でキャッシュされたページに遷移できるか
  • GAなど、アクセス解析ツールで正常にアクセス数が計測されるか

テストページが問題なくキャッシュされていれば、AMP対応できているので、他ページの量産も進めることになります。(テストページは削除しておくことも忘れずに!)

4. AMPページの量産・検証【量産ページ数により変動】

そして、自動変換プログラムを開発後は、公開するページの数だけプログラムを回します。

ここは一般的なページ開発と変わらないので省略しますが、できれば、ここもチェックが必要な項目を洗い出し、テストコードを用意できるのが理想的です。

5. 量産ページの公開

量産したAMPページを公開すれば、一通り対応完了です。こちらもテストページ同様、クローラーによってキャッシュされるタイミングが変動するため、1日程度は待つ想定で考えた方がよいでしょう。

まとめ

これらを踏まえて、AMPページに必要な工数・スキルセットをまとめると

  • AMPページの自動変換プログラムは完成の目安として約1週間、公開後テストはクロールのタイミングによって変動するため、全体の開発期間は2週間くらい確保できると良い
  • AMPタグの知識や、場合によってバックエンド側の知識が必要になるため、HTMLの読み書きができるコーダー+エンジニアのアサインは必須。
  • メディアサイトの規模感なら、HTMLとバックエンドの知見があるエンジニア1名、もしくはAMPテンプレート制作をAMPタグの知見があるコーダーに、自動変換の開発のみエンジニアが対応する、という2名の分業体制

になるのではないか、と思います。

最後に

今回は私の経験をベースに作業内容と工数についてまとめてみましたが、イベント等で他社の事例などを聞いても、Webデザイナー+エンジニアの1〜3名体制で作っている企業が多そうな印象です。

AMPは毎年アップデートを続けており、今後も導入する企業が増えてくるはずなので、もし企業で導入する場合は参考にしていただければ幸いです。

論文を書くときに使いたい3つの有名な文章作成テクニック

最近、会社の仕事で後輩が作成した小論文を読む機会が増えているのですが、普段文章を書かない人だと、論文などの長い文章を作るのは大変ですよね。

私も学生時代は文章に苦手意識があったのですが、仕事をしていると、メール・報告書・提案資料など文章を書く機会が多かったので、ライティングに関する本も何冊か読むことで、少しでも文章がわかりやすくなるよう努力してきました。

そこで、今回は普段文章を書かない人でも、明日から使える文章づくりのテクニックを3つほどご紹介していこうと思います。

1. PREP法について知る

文章表現の方法として有名なのはPREP法ですね。最初に結論を述べて、次に理由と事例を挟み、最後に再び結論で締めくくります。PREPというのは、下記の頭文字をとったものとなります。

  • Point(結論)
  • Reason(理由)
  • Example(事例)
  • Point(結論)

もし、理由が2つ、3つある場合は「理由は◯つあります。1つ目は〜(事例)、2つ目は〜(事例)、以上の理由から〜(結論)」というように、理由と事例を往復して文章を組み立てていきます。

PREP法のメリットと具体例を知りたい方は、こちらの記事を読んでみましょう。

swingroot.com

2. パラグラフ・ライティングを使って書く

これも文章作成の手法の1つで「共通の内容は1つにまとめて、先頭に結論を置き、そのあとに結論を補う」文の書き方です。

読みづらい文章というのは、延々と前置きが続き、読み手が疲れてくる最後の方にようやく結論が来る構造となっているせいで「で、結局何が言いたいの?」となってしまう事が多いです。

一方パラグラフ・ライティングの手法では、先頭で結論を示しているので、読み手が「これは〇〇についての話なんだな」と理解した上で読み進める事ができ、文章を理解しやすくなります。

こちらも詳しく知りたい方は下記の記事を読んでみましょう。

www.ams.eng.osaka-u.ac.jp

3. 三段論法を使って文章の論理性を高める

三段論法では前提1「AならばBである」と前提2「BならばCである」という2つの事実から「つまりAはCである」という論証を成立させる方法です。これは聞いた事がある人もいるのではないでしょうか。

これの注意点としては、前提そのものが間違っていた場合には論理が成立しなくなるので、前提に誤りがないか検証のうえで使う必要があります。(当たり前ですが)

詳しく知りたい方はこちらの記事を読んでみてください。

www.tjsg-kokoro.com

まとめ

これらの他にも文章作成のテクニックは挙げたらキリがありませんが、代表的な上記の3つを意識して文章を書くことができれば、読みやすくて破綻のない文章が作れるはずです。

明日からこれらのテクニックを活用して、読みやすい文章を書いていきましょう!

Python3+Seleniumでブラウザを操作するための備忘録

立て込んでいた仕事がようやく一段落して、久しぶりの平和な休日となったのでブログを更新。今日はPythonSeleniumによるブラウザの自動操作で遊んでました。自分への備忘録がてら、今日一通りやったことをメモします。

はじめに

今回はログイン機能付きページに自動でログインし、サイト内を自動で操作(フォームの入力+ページ内ボタンのクリック)して目的のページまで移動する処理です。必要なのはSeleniumとchromedriverになります。まずは必要なものを諸々インポートして、URLからサイトにアクセスします。

import chromedriver_binary
from selenium import webdriver
from selenium.webdriver.common.keys import Keys
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait,Select

url = "【アクセスしたいURLを入れる】"

driver = webdriver.Chrome()
driver.get(url)

ログインページでID・パスワードを自動入力

よくあるログインページからログインするサイトの場合、入力フォームの要素を取得(今回はid要素で取得したので.find_element_by_id)して、そのフォームに.send_keysを使用して必要な情報を入力していきます。入力完了後はログインボタンを指定して、クリックすることでログインします。

driver.find_element_by_id("【IDの入力フォーム】").send_keys("【IDいれる】")
driver.find_element_by_id("【パスワードの入力フォーム】").send_keys(【パスワードいれる】")
driver.find_element_by_id("【ログインボタン】").click()

複数あるクラスのうち、○番目を指定する

ページ内の要素の取得方法は様々です。IDであれば、ページ内で単一のものになるため取得に苦労しないのですが、要素によってはIDなどが指定されてない場合もあります。今回もclass指定のないリンク要素を取得する必要が生じたため、class名の指定で範囲を絞り、その中のリンクタグをクリックする処理を入れています。

# find_elements_by_~で指定した要素をリスト形式で取得できる。class名で取得したリストのうち、2番目の要素を呼び出し、その中のAタグをクリック。
driver.find_elements_by_class_name("【指定したいクラス名】")[1].find_element_by_tag_name("a").click()

プルダウンメニューから選択

入力フォームにあるプルダウンメニューもseleniumで自動指定が可能です。プルダウンメニューのタグはselect name="〇〇"、中の項目はoption value="〇〇"で記述されているので、それらの属性を選択していきます。

# selectタグのname属性から要素を指定
elem = driver.find_element_by_name("【プルダウンメニューの要素】")
# 指定した要素のうち、選択したいoption要素のvalue属性を入力
Select(elem).select_by_value("【選択したい項目】")

特定の要素が読み込まれてから処理を実行

最近のサイトではページ内要素が動的に管理される事も多く、そうしたタグへの処理はページ側の読み込みが完了してから実行する必要があります。その時は下記のように、特定の要素が読み込み完了となるまで待機するための処理を入れます。

# 10秒待機し、【ID名】の要素が読み込み完了した時点で以降の処理を実行。
WebDriverWait(driver, 10).until(
    EC.presence_of_element_located((By.ID, "【ID名】"))
)

まとめ

技術的には難しいことをやってる訳ではないですが、基本的に上記の記述を覚えれば、動的サイトでも自在にSeleniumで操作できます。仕事の効率化もできるはずなので、単純作業はどんどん自動化していきましょう。

「LINEで送る」リンクが正常に動作しない不具合と、その修正方法

あなたのWebサイトには、数年前に設置した「LINEで送る」のボタンが更新されずに設置された状態になっていませんか?

今回は業務で不具合対応を行った「LINEで送る」リンクの設置方法について、備忘録を残しておきたいと思います。

従来の「LINEで送る」リンク設置方法

今までの「LINEで送る」の実装方法はこちら。

http://line.me/R/msg/text/?{URL}

今回、不具合が確認されたサイトでは2016年くらいから下記の記述方法を使用して設置していたはずです。

ですが2019年2月現在、上記の方法でリンクを設置すると、一部端末の環境でリンクURLが通常テキストとして表示され、リンク遷移ができない可能性があるようです。

不具合の発生条件と原因について

ただ、この不具合が厄介なのは全ての端末で発生するものではなく、何らかの条件により発生する(しない)端末があることです。

現に今回も会社所有の検証端末では事象が発生せず、社員の端末で同様の事象が起きていたスマホを使いながら、調査と修正を行いました。

後日、個人的に改めて調査してみたところ、似たような事象を解説しているブログを発見。

aimstogeek.hatenablog.com

予想通り、従来リンクで使用しているLINEのURLスキームが何か影響しているようですね。

リンク修正方法1(失敗例)

業務で対応した際は上記のブログを発見する前でしたが、不具合が発生しているアプリのキャプチャーを見た時に、LINEボタンのリンクがHTTPS化されてないことが問題なのでは?と予想し、リンクURLを下記の通りHTTPSで記述して、テストしてみました。

https://line.me/R/msg/text/?{URL}

その結果...不具合は解消せず 別の方法を試してみる事となりました。 (先に紹介したブログを読む限り、HTTPSすれば行けそうなのですが、何か別の要因があったのでしょうか?不明です....)

リンク修正方法2(成功例)

原因調査をする中で、そもそも2018年時点で「LINEで送る」を設置する際は「LINE Social Plugin」の使用が推奨されているようだったので、今回の不具合をきっかけに使用することにしました。

social-plugins.line.me

独自デザインのアイコンを使用している場合は「カスタムアイコン」の項目を参照します。

https://social-plugins.line.me/lineit/share?url={URL}

これに書き換えたことにより、不具合が発生していた端末でも正常にLINEアプリでリンクされるようになりました!

まとめ

LINEに限らず、頻繁に仕様変更が発生するSNS周りの情報は、改めて最新情報を常に追っていく必要があると感じました。とはいえ、使えなくなる時は事前に告知してほしいですね。。

BeautifulSoupでスクレイピングしたHTMLをCSVに出力する

PythonによるWebスクレイピングネタ第三弾。今回は取得したデータをCSVに出力する方法を紹介していこうと思います。

前回の記事はこちら

5log.hateblo.jp

はじめに:本記事で取得するデータ

今回は第三弾ということで、取得するデータも少し複雑なものを選んでいこうと思います。

そこで今回は毎日新聞社の新着ニュースのタイトル文言を取得していきます。下記画像の赤枠で囲んだところですね。

f:id:K3105:20190102132829j:plain

スクレイピングするために、このページのソースコードを見てみましょう。

f:id:K3105:20190102133200p:plain

TOPの記事は<p>タグ内に、2番目以降の記事は<li>タグの中に入っています。両方取得するためには、プログラムの記述を変える必要があるので、今回は簡単に取得できそうな<ul>タグ内のニュースタイトルを取得していくことにします。

今回取得したい要素は<span>タグに囲まれていますが、とはいえ<span>という条件でサイト全体から情報を取得すると、余分なタグも多く含まれてしまいます。余分なタグは取得せず、目的の情報にアクセスするために、サイト内のclass要素から範囲を絞っていき、該当の情報を取得していく形を取ろうと思います。

今回は<div class="mainbox">というタグ内の情報を取得後、<ul class="list-typeA">でさらに情報を取得、その中のaタグ全てからテキスト情報を取得し、CSVに出力していきます。

<a>タグに指定されているid情報を使って取得する事もできそうですが、サンプルコードの記述をシンプルにしたいので、今回は上記の方法で進めます。

1. テキストを1行でCSVに出力する。

pythonで取得したデータをCSVに出力するにはPythoncsvというモジュールを使用します。こちらもインストール作業なしで使うことができます。

早速、下記にサンプルコードを書いてみました。

import urllib.request, urllib.error
from bs4 import BeautifulSoup
import csv

# アクセスするURL
url = "https://mainichi.jp/"
# URLを開く
html = urllib.request.urlopen(url)
# BeautifulSoupで開く
soup = BeautifulSoup(html, "html.parser")

# HTMLからニュース一覧に使用しているaタグを絞りこんでいく
tag_mainbox = soup.select_one(".main-box")
tag_listA = tag_mainbox.select_one(".list-typeA")
news_tag = tag_listA.findAll("a")
# 配列の作成。
csvlist = []
for news_txt in news_tag:
    news_txt = news_txt.text
    csvlist.append(news_txt)

# CSVファイルを開く。ファイルがなければ新規作成する。
f = open("output.csv", "w")
writecsv = csv.writer(f, lineterminator='\n')

# 出力
writecsv.writerow(csvlist)

# CSVファイルを閉じる。
f.close()

このプログラムでは、毎日新聞のURLにアクセスして目的のタグにアクセスした後、その中のテキストデータをPythonの配列に保存、そして配列データをCSVファイルに出力する処理を実行しています。CSVへの書き込みには.writerowを使用します。

このPythonファイルを実行すると、実行したファイルと同じ階層に「output.csv」というファイルが作成されるはずです。それを開くと、下記のような結果となります。

f:id:K3105:20190102135105p:plain

これで、CSVデータへのテキスト情報出力が完了しました。

2. テキストを複数行で出力する。

さて、1ではデータを1行で出力しましたが、もう少し綺麗な形になるよう出力したいと思うので、少しプログラムを書き換えてみましょう。

今回は.writerowsを使用して、テキストを複数行で出力します。また、取得したテキスト要素に見出しや項番などもつけていきたいと思います。

import urllib.request, urllib.error
from bs4 import BeautifulSoup
import csv

# アクセスするURL
url = "https://mainichi.jp/"
# URLを開く
html = urllib.request.urlopen(url)
# BeautifulSoupで開く
soup = BeautifulSoup(html, "html.parser")

# HTMLからニュース一覧に使用しているaタグを絞りこんでいく
tag_mainbox = soup.select_one(".main-box")
tag_listA = tag_mainbox.select_one(".list-typeA")
news_tag = tag_listA.findAll("a")
# 配列の作成。表の見出し部分の情報を入力しておく。
csvlist = [["","ニュースリスト"]]
num = 0
for news_txt in news_tag:
    news_txt = news_txt.text
    csvlist.append([num, news_txt])
    num += 1

# CSVファイルを開く。ファイルがなければ新規作成する。
f = open("output.csv", "w")
writecsv = csv.writer(f, lineterminator='\n')

# 出力
writecsv.writerows(csvlist)

# CSVファイルを閉じる。
f.close()

プログラムを修正したら、再びPythonファイルを実行後に「output.csv」ファイルを開きます。

f:id:K3105:20190102140107p:plain

このように、1よりも見やすい形式で出力することができました。

まとめ

CSVで出力できるようになることで、サイト内の情報を目視で調べなくても、Pythonで自動的に情報取得が可能になります。ぜひ皆さんも試してみてください。