インスタグラムに投稿された情報を一覧取得するには – 「Instagram基本表示API」と「Instagram oEmbed」

インスタグラムロゴ

インスタグラムに投稿された情報を一覧取得したい

インスタグラムで投稿したメディアを取得してウェブに表示させたいという需要は多いと思います。この場合、「Facebook for Developers」で提供されているAPIを使うことで実現が可能です。

インスタグラムの投稿データの取得を可能とするAPIは、「Facebook for Developers」において下記の2つが存在します。

・インスタグラム基本表示API

・Instagram oEmbed

「インスタグラム基本表示API」と「インスタグラムoEmbedの違い」

どちらもエンドポイントにパラメーターを追加してリクエストすればJSONデータ形式で応答が得られるという点においては同じですが、若干仕様が異なります。

〇インスタグラム基本表示API

こちらはエンドポイントに、下記フィールドを指定してしてリクエストを送信すると、指定したフィールドデータが返ってくるというものです。

そして、これはメディアIDを指定して任意の投稿のみのフィールドデータを取得することも、フィールドデータを全投稿分まとめて一覧として取得することもできます。

その結果、取得したフィールドデータを好きなUI(ユーザーインターフェース)で出力させる事ができます。

【フィールド一覧】

captionメディア(投稿)のキャプションテキスト
idメディア(投稿)のID
media_typeメディアのタイプ。IMAGE、VIDEO、またはCAROUSEL_ALBUMのいずれか
media_urlメディア(投稿した画像や動画)のURL
permalink各投稿のURL。このパーマリンクを取得すれば、インスタグラムoEmbedにて、各投稿の埋め込みHTMLコードの取得が可能となる
thumbnail_urlメディアのサムネイル画像のURL。VIDEOメディアでのみ使用可能
timestampメディアの公開日付(ISO 8601形式)
usernameメディア所有者のユーザーネーム

〇インスタグラム oEmbed

インスタグラムoEmbedは、エンドポイントに投稿のURLを指定して、その投稿の埋め込みデータを取得できます。埋め込みデータは、インスタグラムでの表示そのものが取得できます。

ただし、1度のリクエストで1つの投稿の埋め込みデータしか取得できません。

エンドポイントに指定するURLは、基本表示APIでpermalinkというフィールドデータとして取得可能です。

従いまして、インスタグラムoEmbedは基本表示APIとの組み合わせた処理が必要になります。

また、インスタグラムoEmbedは、アプリのレビューを受け、承認を得る必要があります。

「インスタグラム基本表示API」で情報を一覧取得する

「インスタグラム基本表示API」を使ってインスタグラムの情報を一覧取得するには、インスタグラムが用意するエンドポイントへ必要なパラメーターを追加してリクエストする必要があります。

〇エンドポイントへのリクエスト構文

https://graph.instagram.com/me/media?fields={fields}&access_token={access-token}

パラメーターとして、{fields}と{access-token}が必要です。

〇インスタグラム基本表示APIエンドポイントへのリクエストパラメーター{fields}

このパラメーターは取得したい情報を指定するものです。これは「Facebook for Developers」のリファレンス(https://developers.facebook.com/docs/instagram-basic-display-api/reference/media#fields)に記載があります。

【フィールド一覧】

captionメディア(投稿)のキャプションテキスト
idメディア(投稿)のID
media_typeメディアのタイプ。IMAGE、VIDEO、またはCAROUSEL_ALBUMのいずれか
media_urlメディア(投稿した画像や動画)のURL
permalink各投稿のURL。このパーマリンクを取得すれば、インスタグラムoEmbedにて、各投稿の埋め込みHTMLコードの取得が可能となる
thumbnail_urlメディアのサムネイル画像のURL。VIDEOメディアでのみ使用可能
timestampメディアの公開日付(ISO 8601形式)
usernameメディア所有者のユーザーネーム

〇インスタグラム基本表示APIエンドポイントへのリクエストパラメーター{access-token}

エンドポイントにリクエストしてインスタグラムの情報を取得するにあたり、セキュリティの観点から、あらかじめInstagramユーザーアクセストークンの発行を受ける必要があります。

このInstagramユーザーアクセストークンは、「Facebook for Developers」にユーザー登録のうえ、APIを使用するユーザーや使用先URL、使用目的等を明らかにしてアプリケーションの登録を受けると取得ができます(取得手順は後記)。

〇インスタグラム基本表示API、リクエスト例

インスタグラム投稿毎にタイムスタンプ、ユーザーネーム、キャプション、パーマリンクを取得する場合。

https://graph.instagram.com/me/media?fields=timestamp,username,caption,permalink&access_token=IGQVJVLUM・・・

上記リクエストを送りますと下記のようなJSON形式のデータが返ってきます。

JSONデータ

ここまでくれば、あとはこのJSONデータを加工(配列に変換)して、画面に出力するだけですよね。

「インスタグラム基本表示API」のInstagramユーザーアクセストークンを取得するには

Instagramユーザーアクセストークンさえ取得できれば、簡単にインスタグラムで投稿された情報を、必要な情報(フィールド)のみ一覧取得ができる事は説明いたしました。

しかし、このInstagramユーザーアクセストークンの取得までの手順が大変なんです。

〇必要なもの

開始する前に以下が必要です。

・Facebook開発者アカウント。

・Instagramアカウント。

・所有している公開ウェブサイト(インスタグラムを埋め込む先ウェブサイト)。

手順1.まずはFaceebook開発者アカウントを取得する

「Facebook for Developer」ウェブサイト(https://developers.facebook.com)にアクセス。

手順1
「Facebook for Developer」、スタートガイドをクリック
手順2
「「次へ」をクリック
手順3
手順4
メールアドレスは自動で入力されている。チェックを入れて認証ボタンを押す

手順5
最もあてはまるものを選択。登録完了ボタンを押す。

これでFacebook開発者アカウントの取得が完了です。

手順2.アプリを作成する

あらかじめインスタグラム基本表示APIを使用するウェブサイトやユーザーを指定してウェブアプリケーションとしての登録が必要となります。

アプリ登録手順1
「アプリを作成」ボタンを押す。
アプリ登録手順2
基本表示APIを使うには「生活者」を選びます。次へを押す。
アプリ名と連絡先メアドを入力。「アプリを作成」を押す。
パスワード入力画面が表示される。フェイスブックのパスワードを入力して送信を押す。
製品の中から「instagram basic display」を選び、設定を押す
「設定」のリンクをクリック。または、左側メニューの設定→ベーシックを選ぶ
プライバシーポリシーURLとコールバックURLの入力。アプリの目的を選択のうえ「変更を保存」。
画面を下にスクロールしてプラットフォームの追加。
「ウェブサイト」を選択
サイトURLを入力して「変更を保存」。
「Instagram Basic Display」→「Basic Display」を選択
Create New Appを押す
アプリを作成を押す
役割→役割を選択
インスタグラムテスターを追加を押す
ここでインスタグラムのユーザーアカウントが必要となる
ユーザー名を一文字づつ入力していくと、マッチするユーザーの表示が絞られていく。自分のユーザー名を選択
送信ボタンを押す
インスタグラムテスターが認証待ちとして表示される。

ここでインスタグラム側での認証が必要。インスタグラムへログインし「アプリとウェブサイト」のリンクをクリック。

インスタグラムの「アプリとウェブサイト」管理画面。「テスターへのご招待」タブを選択。「承認する」を選択。

インスタグラムはここで閉じて良い。次に、インスタグラムの認証URLへリクエストが必要。

Facebook for Developerサイト(https://developers.facebook.com/docs/instagram-basic-display-api/getting-started)に説明あり。認証URLリクエストを作成し、作成したURLリクエストをブラウザのアドレスバーに入力すると認証ウィンドウが開く。

認証URLを作成。

https://api.instagram.com/oauth/authorize?client_id={app-id}&redirect_uri={redirect-uri}&scope=user_profile,user_media&response_type=code

{app-id} :InstagramアプリID

{redirect-uri} :アプリ登録の際に登録したURL(トップページのURLで良い)

InstagramアプリID確認画面

作成したURL:

https://api.instagram.com/oauth/authorize?client_id=507370250475451&redirect_uri=https://www.office-tomo.net/&scope=user_profile,user_media&response_type=code

※黄色のマーカー部分が必要な情報を当て込んだ部分。

ブラウザのアドレスバーに作成したURLを入力。エンターを押す。
認証画面が表示される。許可するを押す。

次にInstagramユーザーアクセストークンを取得する。Developerサイトのトークンジェネレーターを使用。

Generate Tokenを押す
インスタグラムログイン画面。ログインする。
Allowを押す。
「I understand」にチェックするとInstagramユーザーアクセストークンが表示されるのでコピーしてメモ帳等に張り付けて保存する。

これでようやく「インスタグラム基本表示API」で必要なInstagramユーザーアクセストークンの取得完了です。

取得したInstagramユーザーアクセストークンを使い、実際にリクエストを試すと、私のインスタグラムからは下記のようなJSONデータが返ってきます(下記に表示されているJSONデータは、自作のショートコードを使って、エンドポイントにリクエストし、取得したJSONデータを表示させています)。


{"error":{"message":"Error validating access token: The session has been invalidated because the user changed their password or Facebook has changed the session for security reasons.","type":"OAuthException","code":190,"fbtrace_id":"AGFKraQphjQO4kX8FelOrvz"}}


このJSONデータはjson_decode()関数により連想配列へとデコードし、スタイルを施して出力すると下記のような感じになります(カードをクリックしますと私のインスタグラムの各投稿ページが別ウィンドウで開きます)。

エンドポイントへのリクエストからJSONデータの受け取り、カード表示として出力するまでの一連の流れをショートコード化しておりますのでワードプレスであれば、すぐに!どのページにも!好きな場所に!インスタグラムの投稿を一覧表示できます。

上記一覧表示をもっと大きな画面で見たい方は下記ページをご覧ください。

https://www.office-tomo.net/?page_id=3502

「インスタグラムoEmbed」でインスタグラムをそのまま埋め込む

前記、基本表示APIを使ったカード表示は、独自UIにて取得した情報を一覧表示させる場合の方法です。

他にも「Instagram oEmbed」APIを使って、インスタグラムをそのまま埋め込むための埋め込みデータを取得する方法もあります。

ただし、冒頭で説明済みですが「Instagram oEmbed」は投稿の個別URLを指定して、その投稿の埋め込みデータを取得するものであり、一覧取得できるものではありません。

従って、基本表示APIを使い、各投稿の「permalink」フィールドデータを一覧取得し、さらにこの「permalink」を使い、各投稿の埋め込みデータ取得のリクエスト→取得といった処理を連続でループ処理する必要があります。

結果、以下のような形でインスタグラムの各投稿埋め込みデータを一覧表示できます。

上記一覧表示をもっと大きな画面で見たい方は下記ページをご覧ください。

https://www.office-tomo.net/?page_id=3545

関連記事

サイテーションシグナルを活用しよう – SEO対策

SEO

ブログや記事投稿を活用して検索エンジンでの上位表示を目指しておられる方々、外部対策としてサイテーションシグナルは活用しておられますか?

そもそも、検索上位を狙うどころか、検索インデックスすら進まない等、それ以前の問題を抱える方も多いのではないでしょうか?

ホームページ自体に何か問題があるのであれば改修すれば改善される事も多いのですが、サーチコンソールに登録してホームページの存在を知らせ、ホームページに問題もなく、サイトマップも取り入れる等、適切に最適化しているにもかかわらず、検索上位はおろかインデックスすらままならないケースもあるかと思います。

この膠着状態になりますと私達ウェブ業者もどうしようもないのです。

何故なら適切な設定を施して納品はしているからです。そして、原因として考えられるのは認知度不足が考えられます。

でも、「お客様からすると何故なんだ?」と疑念を感じる事でしょう。

しかし、施策がないわけではありません。今回お伝えする施策は、あくまで「改善に向けた取り組み」なのであって結果を保証するようなものではありません。

通常のビジネスや業務、仕事においても現状の問題点を洗いだし、改善策を検討して実行し、結果を再度確認する。この繰り返し作業を行い業務改善を図る筈です。

いわゆるPDCAサイクルというものです。

この考え方が理解できずに結果のみ求めるタイプの方はこのブログはスルーして下さい。と言いますか、検索結果において上位表示を実現し、営業に結び付けるのは難しいと考えます。

サイテーションシグナルとは

過去のブログにおきまして、検索結果の順位は人気度的な指標に左右される事は既にお伝え致しました。

そしてこの人気度を図る指標は、トラフィック数やサイト滞在時間、被リンク(バックリンク)の数等であります。

最近では、上記指標以外にも、グーグルさんはサイテーションシグナルを指標として取り入れているのではないかと言われております。

そして、サイテーションとは、ウェブにおきましては「言及」を意味します。

そしてウェブ上でのサイテーション数、つまり言及された数の多さ(シグナル)でそのキーワードの価値を図っているわけです。

例えば様々なサイトやブログ上で「○○○事務所」や「△△△コンサルティング」等の言及が増えれば、より多くの方に認知された会社なんだな、と推定されるわけです。

現在では、他人のホームページからリンクされていなくとも、ウェブ上で自社ブランドに関し、ただ言及がされるだけで一定の評価を受けられるのです。

従いまして、流入数やバックリンク数を増やすだけではなく、サイテーションシグナルを上げる施策も合わせて実施したら良いと思います。

サイテーションシグナル対策 – プレスリリースの実施

ウェブ上での言及が増えるという事は、自社ブランドが話題になっているという事の現れです。つまり話題性が必要なわけです。全く話題性のないブランドや商品、取り組みが言及されるはずもありません。

そして話題性のある取り組みやサービスを日々世の中に紹介してくれているのがメディアです。このメディアを活用するわけです。

メディアを活用するうえで、まずは、他社にはない独自性の高い商品やサービスを考えたり、話題にしたくなるようなユニークな取り組みを実施する必要があります。

そして準備が出来たらプレスリリースします。

実はプレスリリース代行会社というものがあります。ウェブ上で良く知られているのが「PR TIMES」や「バリュープレス」等です。

世の中のメディアやプレス社は、実はこのようなプレスリリース代行会社等からニュースソース等を買っています。プレスリリース代行会社は、様々なプレスやメディアに情報を提供しているのです。

そして、提供されたプレスリリース情報の中から、もしかすると、どこかのメディアやプレスに採用される(言及される)事もあるのです。

しかし、大手のプレスリリース代行会社は1回の配信につき3万円~の料金設定です。ただし、配信先のメディアやプレス数は何百社とか何千社といった規模になりますので、それだけの効果は期待できるかもしtれません。

有料以外にも完全無料のプレスリリース代行会社も存在します。ご予算のない方はこちらを使うしかありませんね。無料ではありますが、残念なことに配信先メディア数が20件とかに限られてしまいます。

※無料のプレスリリース会社

PR-FREE(ピーアールフリー)

DirectPress!(ダイレクトプレス)

ぷれりり(PRERELE)

HARMONY PRESS(ハーモニープレス)

このようなプレスリリース会社を活用することでサイテーションシグナル数を増加させることができます。

その他のサイテーションシグナル対策 – ポータルサイトを活用する

検索エンジン以外にもユーザーが情報を探す場所があります。それは、ショッピングサイトや比較サイト、口コミサイト、業種別ポータルサイトや地域情報サイト等です。このようなポータルサイトに登録掲載され、露出を増やせば、より多くの他社サイトに掲載されることになります。

以上のような取り組みを行うことで、ウェブ上での認知度が向上し、よりクローリングが進むことにつながるのではないでしょうか。

関連記事

ブログで検索上位を狙うには – SEO対策

SEO

1.まずは仕組みを知る

検索結果に表示される順番にはルールがあります。意味もなくランダムに表示されている訳ではありません。

では、どのような根拠に基づき検索順位は決まるのでしょうか?

簡単に言うとそのブログの中身で決まります。内容が優れたブログをユーザーの目に止まらせるべきだからです。

では、それは何故なのか?

ウェブは表現の自由に資するツールだからです。

ウェブを使う事で世の中にとって為になる情報や自身の意見等を自由に発信できる事から、それによる世論形成等、公益上とても良い効果につながる訳です。

だから、世の中にとって利益となる、つまりは公益に資するような記事、ブログが求められます。

そして、検索エンジンの事業者は、公益に資するべく、内容が優れた記事を有するページを上位に表示されるようにしているのです。

でも、実際には優れた記事を多数投稿しても結果につながらない事が多いのが現実です。

さらに何故か?

世界中に拡がるウェブの世界には無数のウェブサイトが存在しており、一つのページ毎に内容を人がチェックしている訳にはいきません。

なので、実際にはクローラやボットと呼ばれるソフトウェア(ロボット)を用いて検索エンジン事業者は情報を収集しているのです。

そして、どのようなアルゴリズムで記事の内容の優劣を判断しているかと言いますと、有用なページであるかどうかは、人が実際に見て判断しているのではなく、先のロボットで、被リンクの数、流入トラフィックの頻度、滞在時間等から、有用な情報を発信しているウェブページかどうかを判断していると言われています。

・たくさんのページからリンクされている → 中身が良いから人気があるんだろう ⤴️⤴️
・訪問者が多い → 中身が良いから人気があるんだろう ⤴️⤴️
・滞在時間が長い → 複数のページを閲覧したから滞在時間が長かったんだろう → 中身が良いからだろう⤴️⤴️

ですので、上位表示させるには、流入トラフィック数を増やす、被リンクを増やす等の方法を考えた方が良いのです。このような人気度的な要素で検索順位は決まります。

2.ブログタイトルを工夫する – トラフィック流入数を増やすために

とりあえずブログが検索結果に表示されるが、順位が上がらない場合は、タイトルを工夫してみましょう。

先に説明したとおり、人気度的な要素で検索順位が決まる訳ですから、検索結果に表示されたリンクからユーザーが訪問する数を増やす必要があります。

つまりは、検索結果に表示されたページリンクをクリックして貰う必要があるわけです。

自分より上に表示されているページを追い抜いて上位を目指すには、自分より上のページよりもクリックされる機会を増やす必要があるのです。

私のブログで分かりやすい例があります。

“addeventlistener ie11”

この2つのキーワードでグーグル検索してみてください。私のブログが1~3位前後に表示されている筈です。

そして、私のブログや私のブログと1位を争うブログのタイトルをよく見てほしいんです。

結論が分かりやすく端的にタイトル化されていませんか?

検索して情報を求めるユーザーは、単純に結論・結果を求めているのです。

だから、ユーザーが何を求めているのか(ニーズ)を良く考えて、タイトルを考えましょう。

それにより情報を求めるユーザーがクリックしやすくなります。

3.ブログの中身も工夫する – サイト滞在時間を増やすために

せっかく検索結果から訪問してくれたユーザーですから、そのまま帰してしまうのは惜しいんです。

せっかくだからユーザーの滞在時間を延ばす努力もするべきです。

まず、サイト滞在時間の計算方法ですが、グーグルアナリティクスの滞在時間等を見ると「0時間:0分:0秒」と表示されていませんか?

一瞬だけ訪問があったのか?少し違います。

この理由はサイト滞在時間のカウント方法に起因します。

サイト滞在時間はユーザーが最初に着地したページのみ閲覧して直帰(別のサイトへの移動やブラウザを閉じた等)したのみの場合は時間がカウントされないからです。

ユーザーが着地したページからさらにウェブサイト内の別のページへと移動した場合にのみ着地時点から滞在時間がカウントされる仕組みなのです。

ですから、サイト滞在時間を延ばすには、ユーザーが着地したページから、さらにウェブサイト内の別ページへと読み進めてくれる必要があります。

その工夫としては、関連記事を表示する等です。

最初にユーザーが着地したブログ記事の最後に、そのブログ記事と関連するおすすめ記事のリンクを張るのです。

これによりユーザーが別ページへと読み進めやすくなるのです。

4.SNSや他ウェブサイトとの連携機能を活用する

SNSと連携する機能(OGP)や他サイトと連携する機能(oEmbed、オー・エンブド)がウェブにはあります。このような機能をウェブサイトに追加改修することで、記事が目に留まりやすくなり、トラフィックの向上につながります。

また、SNSシェアボタンを配置しましょう。先のOGP機能と組み合わせる事で、ユーザーが、SNSにシェアしやすくなるのです。

5.ブログ記事の内容もおろそかにしない

検索順位は実際には人気度的指標により決まると書きましたが、だからと言って記事の中身はどうでも良いかと言うとそうではありません。

せっかく訪問してくれたユーザーの為にも、良い記事を書くべきです。

また、中身をおろそかにすると、それ一回きりの訪問となってしまい、繰り返し訪問をしてもらえません。

結果、トラフィックの逸失に繋がります。

以上、ブログ記事で検索順位を上げる方法でした。

【関連記事】

スモール事業者がブログで検索順位を上げる方法 – ニッチなキーワードを狙いましょう

ソーシャルメディア

ホームページをお持ちの事業者様は、検索エンジンで上位表示させたいとお考えの方も多いのではないでしょうか?

例えばお酒屋さん。「日本酒  川崎市」とか、そんなキーワードで上位表示されたらウハウハですね。

でもそんなに甘くはありません。「日本酒  川崎市」等の範囲の広いキーワードによる検索結果上位表示は困難です。

ウェブの有用性、検索エンジンの仕組みから理由を説明致します。

ウェブは表現の自由に資する事から公益上有用なツールです。そして、その公益性から中身(有用な情報を発信しているか)が重視されます。

検索エンジン事業者も上記理由から、有用なウェブページを上位表示させるような仕組みにしております。

有用なページであるかどうかは、人が実際に見て判断しているのではなく、ロボットで、被リンクの数、流入トラフィックの頻度、滞在時間等から、有用な情報を発信しているウェブページかどうかを判断していると言われています。

・たくさんのページからリンクされている → 中身が良いから人気があるんだろう ⤴️⤴️

・訪問者が多い → 中身が良いから人気があるんだろう ⤴️⤴️

・滞在時間が長い → 複数のページを閲覧したから滞在時間が長かったんだろう → 中身が良いからだろう

ですので、上位表示させるには、流入トラフィック数を増やす、被リンクを増やす方法を考えた方が良いです。

流入数を増やす方法として、

・ブログ数を増やす

 → 単語数が増えるので何かの拍子に検索ヒットして訪問者が来る事につながる。地道に時間をかけて育て作り込む方法です。

・ブログタイトルはニーズを逆手にとって考える

 → 自分が何かを調べたい時にどんなキーワードを使っているかを考えると分かります。例えば、新規開業を考えていて、無料相談を考えている方や相談料金が不安な方の場合「開業 無料相談」や「開業 相談 料金」とかで調べますよね。タイトルにはこのようなキーワードを自然に入れます

 ・SNSとウェブを連携する。フェイスブックが一番効果が大きいそうです。

ブログ数を増やしたり、タイトルを逆手に取る手法は地道な時間のかかる方法です。本来のウェブの役割や有用性を考えると、そのようなウェブページが上位表示されるべきでしょうが、実際には先のとおり人気度的な指標から順位が決まってしまいます。

それでも地道に続けて下さい。そうしないと元も子もないと思います。

ただ、「日本酒  川崎市」等の漠然とした範囲の大きいキーワードの組み合わせで上位表示は難しいと思って下さい。

例えば、日本酒を買いたい方が「日本酒」で検索した場合、日本酒メーカーや大手量販店が表示されるばかりです。日本酒を売っているスモールビジネス業者は目にも止まりません。「日本酒 川崎市」等、地域を組み合わせて調べる人がいても、大手量販店等が表示されるばかりです。スモールビジネス業者は目にも止まりません。

なぜなら、大手はふんだんに広告費を使っているからです。広告費をかけて流入トラフィックを増やしているんですね。だから、こういう大きいキーワードでの検索結果は大手の一人締めであり、スモールビジネス業者は太刀打ちできません。

ただ、そのスモールビジネス業者が、地域限定の独自のお酒を売っていた場合はどうでしょうか?中にはそのようなニーズを持つ方もいるかもしれませんし、ニッチなキーワードの組み合わせだと上位表示の可能性があるわけです。

実際に私のホームページも「川崎市 ホームページ制作」では埋もれてしまい表示されません。しかし、「tcd074」でグーグル検索してみて下さい。4番目くらいに私のブログが表示されます。「addeventlistener  ie11  使えない」このキーワードの組み合わせで検索してみて下さい。私のブログが2番目くらいに表示されトップを取る勢いです。このブログは、最近毎日2~3人はアクセスがあります。そして、徐々に順位が上がり、トップを狙う勢いです。

たぶん、ホームページ制作している方が困って検索し、ニッチなキーワードで競合が少なく、それなりに上位表示されていたので、クリックされる機会が少なくともあり、そしてそれが繰り返され、定期の流入トラフィックがあるので、今の順位にまで徐々に競り上がって来たんだと思います。

ブログで検索上位を狙うのであれば、こういうニッチなスモールキーワードを狙って下さい。漠然とした範囲の大きいキーワードでは、上位を狙うのは難しいです。

ブログの工夫についてはご自身で考えて頂くしかないと思います。何故なら、私ではその業界や業務内容、ニーズに精通していないからです。キーワードを逆手に取る事もできません。

SNSとの連携をするにも工夫が必要です。ウェブにはOGPというSNS連携機能があります。

OGPについて知りたい方はこちら。

以上、参考になれば幸いです。

こちらもお読み下さい

ウェブサイト制作における脆弱性(セキュリティホール)と基本的対策 – クロスサイトスクリプティング脆弱性

危機管理
データセキュリティ

ウェブサイト制作を行う上で検討しないといけない点としてセキュリティ対策があります。

従来の静的なウェブサイトでは、ウェブサイト管理者が悪意でない限り問題とならなかったのですが、動的ウェブサイトでは脆弱性(セキュリティホール)が問題となります。

これはどういうことかと言いますと、良く知られた典型的なセキュリティ脆弱性の一つである「クロスサイトスプリクティング( XSS: Cross Site Scripting)」で説明したいと思います。

クロスサイトスプリクティング脆弱性とは?

クロスサイトスプリクティング脆弱性が問題となるのは掲示板サイト等です。

例えば、2ch(2ちゃんねる)という掲示板の書き込みを見ると、ハイパーリンクが張ってあることがあると思います。

「掲示板上の不明なリンクにはアクセスしないほうが良い」とか「メールを開いてリンクをアクセスしない」等とよく言われますが、それは悪意のある第3者がクロスサイトスプリクティング脆弱性を利用し、情報を盗もうとしている可能性があるからにほかなりません。

このような掲示板のようなウェブアプリケーションは、HTTP(HyperText Transfer Protocol)という、サーバとクライアント間において決まったプロトコル(手続き)を介し、エンドユーザーが入力したデータ(書き込み内容)をウェブサイト側で受け取り、さらに、ウェブサイト側は、受け取ったデータをHTTPプロトコルを介してブラウザに表示する、という処理になります。

この時、ウェブサイト側が、エンドユーザーから受け取った書き込みデータをそのままの状態でブラウザ上に表示させてしまうと問題なんです。

何故かと言うと、書き込まれたデータにHTMLコードやスクリプトコード等のタグが含まれていると、そのままデータをブラウザに渡すと、ブラウザはHTMLタグやスクリプトタグだと認識してしまう事から、掲示板上にリンクが張れてしまうのです。

そして、外見上はどこかのウェブサイトへのリンクのように見えても、実は有害なスクリプトが仕込まれているというわけです。

クロスサイトスプリクティング脆弱性対策として – サニタイズ処理

サニタイズ

このように、外部エンドユーザからの入力などによって生成されるページでは、ウェブサイト側は対策を講じる必要があり、最も良いのは、ウェブサイト側が受け取った書き込みデータからタグはあらかじめ除去しておくとか、タグ自体を文字列に変換する等の文字列処理を施してブラウザに渡すとか、データを無害化してブラウザに出力する事です。

これをサニタイズ処理と言います。

動的ウェブサイトを構築する際のコンピューター言語にPHP言語(ワードプレスもPHP言語で作られたソフトウェアです)がありますが、PHP言語にはあらかじめ、このサニタイズ処理のための文字列関数としては、htmlspecialchars()が用意されています。

・htmlspecialchars()関数

この関数は、<(小なり)や、>(大なり)、"(ダブルクォート)、'(シングルクォート)等の特殊記号をHTMLエンティティという&で始まり;で終わる文字列に変換してくれる関数です。

このHTMLエンティティ化された文字列をブラウザに渡すと、タグを文字列として表示してくれます。

ワードプレスではデフォルトAPIを使うにおいてはサニタイズ不要

ワードプレスはPHP言語で作られたソフトウェアです。ワードプレスにおいてウェブサイト制作するにおいては、ワードプレスにより準備されたサニタイズ用関数もあります。

[入力値サニタイズ用関数]

関数名説明
sanitize_email()メールアドレスとして不適当な文字を除去
sanitize_file_name()ファイル名として不適当な文字を除去し、スペースをダッシュに変換
sanitize_html_class()HTMLのクラス名として不適当な文字を除去
sanitize_key()識別子として不適当な文字を除去
sanitize_text_field()ユーザーが入力した文字列を無害化する
sanitize_title()タイトルとして不適当な文字を除去
sanitize_user()ユーザー名として不適当な文字を除去
esc_url_raw()データベースに渡すURLとして不適当な文字を除去

ワードプレスにおいて、上記のように入力値のサニタイズ関数が用意されてはいますが、実はあまり考える必要はありません。ワードプレスにおいて入力値を保存する際には、一般的にワードプレスAPIが用いられますが、これらAPI関数の中で適切にサニタイズされているからです。

出力値においてもワードプレスにはthe_title()やthe_content()等のテンプレートタグ関数を使うことが多いかと思います。これらテンプレートタグに該当する関数も内部で適切にサニタイズされていますので問題はありません。

//テンプレートタグを使って画面に出力する場合はサニタイズ不要
<h1><? php the_title(); ?></h1>

ただし、テンプレートタグを使わずにHTML要素内のテキストはすべて、下記のようなesc_html()関数等でのサニタイズが必要です。

//出力値にサニタイズが必要な例
<h1><? php echo esc_html($title); ?></h1>

基本的な考え方としては、むやみにechoは使わずに、なるべくテンプレート タグ の 使用 を 考えたほうが良いです。

他にも、

・aタグのhref属性や、imgタグのsrc属性等、画面に表示するURLはすべて、下記のようなesc_url()関数でサニタイズ

<img src="<? php echo esc_url($url); ?>">

・インラインのJavaScriptでは、すべてesc_js()関数でサニタイズ

<a href="#" onclick="<? php echo esc_js($script); ?>">クリックしてください</a>

・HTMLタグのその他属性は、すべてesc_attr()関数でサニタイズ

<ul class="<? php esc_attr($nav_class); ?>">
<input type="text" name="example" value="<? php echo esc_attr($value); ?>">

クロスサイトスクリプティング以外の脆弱性

典型的な脆弱性の例としてクロスサイトスクリプティングを取り上げましたが、他にも、

  • SQLインジェクション
  • クロスサイトリクエストフォージェリ
  • パストラバーサル
  • NULLバイト攻撃
  • メールヘッダインジェクション 他

等があります。

しかし、一般的なホームページ制作において知っておくべきなのはクロスサイトスクリプティングだと思います。

これまで知らなかった検索エンジン「DuckDuckGo」 – フィルターバブル対策に

フィルターバブル

当オフィスサイトへの本日のアクセスを確認していたところ、トラフィック流入元に何やら見慣れない自然検索トラフィックがある事に気づきました。

それがこれ、

「3.duckduckgo / organic」初の来訪です

「DuckDuckGo」についてネットで調べたところ、

DuckDuckGo(ダックダックゴー)は、インターネット検索エンジンである。利用者のプライバシーの保護と利用履歴等を記録保存しないことを運営方針としている。VivaldiTor Browserの標準検索エンジンにも採用されている。また、DuckDuckGoは検索結果のパーソナライズを行わないため「フィルターバブル」に陥らない”

※wikipediaからの引用

「DuckDuckGo」はアメリカの会社のようで、グーグルとは対照的な特徴を持つ検索エンジンの模様。

インターネットのユーザーは、いつも同じ検索エンジンやSNS、ニュースサイトから情報を得ている事が多く、情報が偏り、盲目に陥りやすいと言われています。

いわゆる「フィルターバブル」と呼ばれるものです。

盲目に陥らない為にも、いつもと趣の異なる検索エンジンを使ってみるのも良いかもしれません。

バリエーション豊富で高機能なスライダー「Swiper」 – フレームワーク

Swiperロゴ

カルーセルやスライダーを実装する為のCSS・JSライブラリにはBootstrapやFlexSlider等いくつかありますが、その中でも「Swiper」はおすすめのフレームワークライブラリーです。

Bootstrapも簡単にカルーセルスライダーが実装できますがバリエーションが少ないのが欠点。

また、ギャラリータイプのスライダーが実装可能なFlexSliderはjQueryのバージョンに依存するので、他のjQueryバージョンを使うテーマやプラグインと相性が悪く、動かない事がある。

その点「Swiper」は、バリエーションが豊富でありまして、また、jQueryが不要である事から汎用的です。

・タイプ:Default(ループなし、指やマウスでスワイプする基本のタイプ)

Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10

・タイプ:Navigation(ループなし、左右の矢印ナビゲーション付き)


・タイプ:Pagination(ループなし、ページネーション付き)


・上記組み合わせ(ナビゲーション、ページネーション付き)+ループ


・上記+オートプレイ

Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10

といった具合に基本のスライダーは簡単に実装可能。

「Swiper」の魅力はここからです。一般的なスライダータイプ以外にも様々なバリエーションがあります。

・タイプ:Thumbs Gallery


・タイプ:Effect Cube


・タイプ:Effect Coverflow


使い方は「Swiper」の公式サイトを参照ください。

〇「Swiper」公式サイト

 https://swiperjs.com


〇インストールおよび使い方

 https://swiperjs.com/get-started


〇詳細な設定、カスタマイズ

 https://swiperjs.com/swiper-api


〇デモ

 https://swiperjs.com/demos

SNSとの連携 – OGP(Open Graph Protocol)を設定しよう

ソーシャルメディア

当オフィスのホームページもようやくOGP(Open Graph Protocol)対応へと改修いたしました。

一応、投稿ページにはシェアボタンを設置していたのですが、シェアボタンが正常に動いていないことに気づきまして、ついでに、OGP設定も行った次第です。しかし、SNSと連携するなら、ホームページのOGPはとても便利な機能だと実感しました。

〇OGP(Open Graph Protocol)とは何か?

まず、OGP(Open Graph Protocol)とは何かといいますと、FacebookやTwitter等のSNSでシェアした際に、OGPに対応しているホームページですと、そのシェアしたページのタイトルやイメージ画像、メタディスクリプション等が、カード形式で表示される機能です。

〇OGP対応サイトにする事のメリット

まず、SNSにシェアされやすくなります。

良い記事がある。じぁあシェアしよう!と思っても、シェアする側からすると説明文を記載したり、リンクを張ったり、画像を張ったりと、シェアするにも手間がかかり、面倒くさいもの。

しかしそれが、OGP対応サイトであれば、SNSユーザーは、URLアドレスを入力するだけで、その記事のグラフィカルな情報を自身のSNSに埋め込む事ができるんです。

他にも、自分が投稿した記事を自身のSNSと連携する際にも便利です。

これまでは例えばTwitterへブログを投稿しようと思ったら、Twitterにアクセスして、リンク張って、文章書いて、とかなり面倒でありまして、それによりTwitterアカウントは持っていましたものの、ほぼ稼働していない状態でした。

それが、OGP対応したことにより、当オフィスのTwitterにブログ記事を一気にツイートできました。

〇OGP対応のサイトにするには – OGP設定

OGPに対応したホームページにするには、ホームページのヘッダー部分に決まった書式でコードを記述する必要があります。

ホームページのタイトルや内容を検索エンジンに伝える為にヘッダーにメタ情報を記述したりしますが似たようなものです(OGP設定はTwitterやFacebook等に情報を伝える点、また、グラフィカルな情報であるという点で異なりますが)。

1.OGPの宣言

ウェブサイトをOGP対応とするためには、まずは宣言が必要です。宣言は<html>タグに記述するようです。以下、宣言の記述方法です(この宣言はそのままコピペでOK)。

<html prefix="og: https://ogp.me/ns#">

2.Open Graphマークアップ

フェイスブックやTwitter等のSNSに渡したい情報を<head> ~ </head>内にメタタグを使いメタデータとしてマークアップします。

SNSに渡せる情報(プロパティ)は決まっており、以下のとおりです。

og:url ⇒ ページの正規URを指定します。SNSにカード表示させたい投稿ページのURL等を指定します。以下、マークアップ例。

<meta property="og:url" content="https://www.office-tomo.net">

og:title ⇒ 記事のタイトル。以下、マークアップ例。

<meta property="og:title" content="<?php bloginfo( 'name' ); ?>">
 //トップページの場合

og:description ⇒ コンテンツの簡単な説明。2~4文が一般的です。Facebook上では、投稿のタイトルの下に表示されます。以下、マークアップ例。

<meta property="og:description" content="<?php bloginfo( 'description' ); ?>">
 //トップページの場合

og:image ⇒ コンテンツがFacebookでシェアされたときに表示される画像のURL。以下、マークアップ例。

<meta property="og:image" content="<?php the_post_thumbnail_url('large'); ?>">
 //投稿ページで、アイキャッチ画像を指定する場合

og:type ⇒ コンテンツのメディアのタイプ。

<meta property="og:type" content="website"> //トップページの場合、一般的に「website」を指定するようです。

<meta property="og:type" content="article">
 //投稿ページ等の記事の場合、「article」を指定。

og:locale ⇒ リソースのロケール。デフォルトはen_USです。

<meta property="og:locale" content="ja_JP"> //日本語のみのページであればja_JPを指定します。

基本的なOpen Graphマークアップの仕方は以上のとおりです。

〇有料テーマだとOGPに対応しているテーマが殆ど

OGPマークアップ方法を説明しましたが、実際には、有料テーマや一部無料テーマにはOGP設定機能を持つテーマが多いので、このようなテーマを使用すればOGPマークアップを自分で行う必要はなく、管理メニューで簡単に可能です。

・TCDテーマの場合

TCDテーマOGP設定方法
TCDテーマオプション内にOGP設定メニューがある

【TCDテーマ】

・リキッドプレステーマの場合

リキッドプレスOGP設定方法
管理メニュー「カスタマイズ」内の「SEO」メニューを開く
リキッドプレスOGP設定方法
「「「「「OGP、TwitterCards」メニュー

・Vektor「ライトニング」無料版の場合

ライトニング無料版の場合、テーマ単体ではOGPには対応しておりませんが、高機能無料プラグイン「All in one Ex-Unit」をインストールすることで、プラグインでのOGP設定が可能です。

vektorテーマOGP設定方法
プラグイン「All in one Ex-Unit」SNSメニュー
Vektor WordPress Solutions
Lightning Proの紹介サイト

是非、シェアやツイートをお願い致します。

【参考リンク】

・Facebook開発者向けOGPの解説(公式:ウェブ管理者向けシェア機能ガイド)

https://developers.facebook.com/docs/sharing/webmasters#markup

・Twitterカード利用開始ガイド(公式サイト)

https://developer.twitter.com/ja/docs/tweets/optimize-with-cards/guides/getting-started

ホームページの製作費が数十万円と数万円、その違いは何だと思いますか?

費用対効果イメージ

当オフィスにおいて、ホームページ制作にかかるご提案書を提出する機会もありますが、たまに苦情を承ることがあります。その苦情の内容というのが、

「別の業者の見積書はうん十万円だった」、「何でこんなに金額が違うのか?」、「うん十万円の金額の根拠は何?」等、

おおよそ私に言わせると、これらの類の苦情は大変理不尽なものであります。何故なら、私がうん十万円をご提案しているわけでもないのに、別の業者様のお見積書や金額、業界への立腹や不満の表明だからです。

それでも私は落ち着き払い、

「そのお見積書の内容(内訳)がわからないので一概には何とも言えません」

等と、なるべく同業他社様の営業の邪魔にならないように配慮した回答を心掛けております。

そして、そのように配慮した回答をしているのは、平和主義とか、事なかれ主義等の理由ではありません。

そもそも、数十万円と数万円の価格差があるのは別に何もおかしいことではないからなんです。そのことに立腹や不満をお持ちなのが間違いだからなんですよね。

だって、価格なんていくらで見積もって提示しようがその業者様の勝手ですよ。

極端な例で言うと、1個100円の消しゴムを100万円で売ったっていいんです。何かの法令に抵触しますか?

結局はそんな金額で売ったって誰も買う人はいないだけであって、別に何も問題はないと思うんです。

ただ、状況如何によっては問題となる場合はあります。

例えば問屋との私的契約において売価が決まっているとか。このような場合は見積金額に制約を受ける事はあります。

また、消費者を違法に錯誤に陥れて販売したとか、消費者を誤認させたりとか、消費者法令に抵触するような場合も問題にはなり得ます。

しかし、上記のようなケースに該当しない範囲内であれば、いくらで見積もろうと業者の勝手なわけです。

しかも、まだ見積書の提示を受けた時点なのであれば、消費者に選択権があるわけですし何も問題は生じていません。金額が気に入らないとか、費用対効果がないと思うのならば、その業者を選ばなければ良いだけですしね。

書画骨董だって、それを見る人によって価値が変わるんです。そもそも根拠に基づく裏打ちされた価値としては、土の値段や工数手間を見積もればたかが知れているけれども、その人の見る目、価値観によっては数十万円とか数百万円とかの値が付く物もあるわけです。

そもそも人によって価値観が違えば、事情も異なるわけで、結局のところ妥当な金額とはその人の価値観や事情に左右されるものです。

大口取引先との関係から数十万円の業者を選ばなければならないのであれば、その人にとっては数十万円の業者を選ぶのが得策であり、値打ちがありますし、その金額が妥当な金額なわけです。

何度も言いますが、結局は、その人自身の価値観や事情によって物の価値は異なります。そして、どちらを選ぼうとその人の自由です。

うん十万円のホームページが高いと感じる方は、当オフィスのような格安の業者を是非ご利用ください。

BASE(ベイス)を使った EC サイト導入において、BASE オフィシャルパートナーに依頼するメリット

BASEロゴ

実は、BASE オフィシャルパートナーには特典が与えられています。

お客様に好きな有料テンプレートを選んでいただき、立て替えご購入いただきますと、有料テンプレート代がキャッシュバックされます。

ご自身の気に入ったテンプレートを実質無料で手に入れることができるんです。

また、有料機能(500 円)を購入しないと BASE ロゴは消せませんが、BASE パートナーには特典としてこれを無料でお客様に提供できます!

BASE オフィシャルパートナーはウェブ制作業者が担っておりますので、デザイン改修などのニーズにも対応が可能です。

一般ユーザーにおいては大幅なデザインの変更が叶いません。BASE パートナーならそれができるのが強みです。

また、早期の立ち上げが期待できます。BASE ならばご自分でも EC サイトの立ち上げはできるでしょう。

しかし、そこはやはり色々と複雑な設定(料金設定や配送設定等)も必要となります。

ご自分で調べるには時間がかかりますし、ご自分の本業の時間が勿体ないと思いませんか?

我々にお任せいただければ、余計な時間をロスせずに済みますし、その分、本業に注力してください。