ウィジェット on qwerty.work

Instagram Graph APIを使う
Instagram ProアカウントとFacebookページを連携させる必要がある
以前は「jquery.instagramFeed.js」や「Instafeed.js」など、シンプルで使いやすいJSがあったようでが、APIの仕様変更で現在は使えなくなっています。JSを使う場合はAPIの仕様変更に気を付ける必要がありそうです。

参考サイト

https://qiita.com/benjuwan/items/a31e23121456f5c29083 https://qiita.com/benjuwan/items/a31e23121456f5c29083

https://arts-factory.net/insta\_api https://arts-factory.net/insta\_api

https://toriton.link/coding/insta\_embed https://toriton.link/coding/insta\_embed

https://engineering.webstudio168.jp/2022/02/2022-instagram-api-js/#google\_vignette https://engineering.webstudio168.jp/2022/02/2022-instagram-api-js/#google\_vignette

Googleアナリティクスとの連携でアクセスランキングが作れる『Ranklet』

Mon, 13 Dec 2021 22:11:12 +0900

ブログにアクセスランキングを設置

どんなブログでもGoogleアナリティクスのアクセス数を利用して、アクセスランキングを埋め込める『Ranklet』というサービスを見つけました。現時点でMovableTypeを使用しているこのブログに埋め込みたいと思います。

https://ranklet.com/ https://ranklet.com/

使い方はとても簡単です。

Googleアカウントでログオン
ランキングに使用するGoogleアナリティクスのプロファイルを選択
表示されたコードをコピペ

これだけで簡単にブログに埋め込むことができます。

HTML、CSS、Javascriptを編集する画面があるので、カスタマイズの自由度はとても高いです。ランキングの集計期も直近の期間から長期までいろいろ選べます。

デフォルトのソース

デフォルトで表示されるHTMLソースは、なぜか****が使用されています。

html

<div class="ranklet ranklet-reset">
    <table class="ranklet-table">
        <tbody class="ranklet-pages">
            {{#context.pages}}
            <tr class="ranklet-page">
                <td class="ranklet-rank">
                    {{rank}}
                </td>
                <td class="ranklet-image">
                    {{#image}}
                    <a href="{{url}}" class="ranklet-link">
                        <img class="ranklet-img" src="{{image}}" />
                    </a>
                    {{/image}}
                </td>
                <td class="ranklet-meta">
                    <div class="ranklet-title">
                        <a href="{{url}}" class="ranklet-link">
                            {{title}}
                        </a>
                    </div>
                    {{#description}}
                    <div class="ranklet-description">
                        <a href="{{url}}" class="ranklet-link">
                            {{description}}
                        </a>
                    </div>
                    {{/description}}
                </td>
            </tr>
            {{/context.pages}}
        </tbody>
    </table>
</div>

CSS

#ranklet-{{context.id}} {
    .ranklet-reset { // リセット
        table, tr, td, div, span {
            margin: 0;
            padding: 0;
            border: 0;
            font-size: 100%;
            font: inherit;
            vertical-align: baseline;
            line-height: 1;
            box-sizing: border-box;
        }
    }

    .ranklet-table {
        border-collapse: separate;
        border-spacing: 8px 24px;
        width: 100%;

        td {
            vertical-align: middle;
        }

        .ranklet-rank {
            text-align: center;
            font-size: 120%;
        }

        .ranklet-image {
            text-align: center;
            img {
                max-width: 64px;
                max-height: 64px;
            }
        }

        .ranklet-meta {
            .ranklet-title {
                font-size: 120%;
                line-height: 125%;
            }

            .ranklet-description {
                margin-top: 8px;
                line-height: 125%;
            }
        }
    }

}

MovableType用に書き換えたテンプレート

デフォルトので組まれているソース嫌なのと、デフォルトのまま使用するとデザインがおかしくなるので、以下のようにリスト形式にカスタマイズしました。デフォルトのソースにあるページの概要は不要なので{{description}}を省きました。

HTML

<aside >
<section id="side-recentpost" class="side-entrylist">
<nav>
<h2 class="widget-header"><i class="far fa-file-alt" aria-hidden="true"></i>週間アクセスランキング</h2>
<div class="widget-content">
	<ol class="entryList ranklet-list">
		{{#context.pages}}
        <li class="ranklet-list-item">
				  <span class="ranklet-image">
					  {{#image}}
						  <a href="{{url}}" class="ranklet-link"><img class="ranklet-img" src="{{image}}" loading="lazy" /></a>
					  {{/image}}
				  </span>
				  <span class="ranklet-title">
              <a href="{{url}}" class="ranklet-link">{{title}}</a>
          </span>
        </li>
		{{/context.pages}}
  </oll>
</div>
</nav>
</section>
</aside>

CSS

ol.ranklet-list {
list-style-position: inside;
}
.ranklet-image, .ranklet-title {
display: table-cell;
}
span.ranklet-image {
width: 25%;
}
img.ranklet-img {
width: 100%;
}

他にもMovableTypeのCSSに合わせスタイルをいじっていますが、最終的に見た目は以下の通りになりました。

参考サイト

https://mbdb.jp/web-technical/html/ranklet-template.html https://mbdb.jp/web-technical/html/ranklet-template.html

zenbackをGoogle Tag Managerで遅延読み込みさせる

Sun, 17 May 2020 17:23:37 +0900

ページ読み込みスピードを上げるために遅延させたい

最近では不要かもしれませんが、SEO対策の被リンク対応の一つとしてzenbackを導入しているのですが、これを導入することにより、zenbackウィジェットに必要なJSとかjQueryが降ってきます

//w.zenback.jp/v1/?base_uri=***
//w.zenback.jp/_p/js/jquery.min.js

ページの最下部に表示しているので、真っ先にzenbackを読み込む必要ながないので、いくつかのパターンで遅延させることができないかなと思いました。

画面スクロールされたら読み込み開始
ページ表示開始の数秒後に読み込み開始
zenbackが表示される部分が登場したら読込開始

これのどれか、または全部で遅延できる手段が何かないかなといろいろ探したら、Google Tag Manager で簡単にできることが分かったのメモ。

jQueryのLazy Loadとか、Javascriptで非同期や遅延読み込むする方法もありますが、Google Tag Manager を使う方法が最もシンプルで簡単でいいかもしれません。いろいろな条件でいろいろなタグを組み込めるので最近ハマっています。

Google Tag Managerで遅延表示させる方法

Google Tag Manager がどういう物かの説明は省きます。

1. 『新しいタグ』をクリック

2. タグを追加するため右上の鉛筆マークをクリック

3. 『カスタムHTML』を選択

4. zenbackのタグを貼り付ける

実際には以下のように改変して貼り付けています。``とJavascriptを分離して、Javascriptの部分だけを貼り付けています。

<!-- X:S ZenBackWidget -->
<script type="text/javascript">
 !function(d,i){
 if(!d.getElementById(i)){
 // オリジナル var r=Math.ceil((new Date()*1)*Math.random());
 var r = new Date();
 var r = ''+r.getFullYear()+('0'+r.getMonth()).slice(-2) ;  //randの値を年月（例 202005）にする 
 var j=d.createElement("script");
 j.id=i;
 j.async=true;j.src="//w.zenback.jp/v1/?base_uri=http%3A//qwerty.work&nsid=XXXXXXXXXXXXXXXXXX%3A%3AXXXXXXXXXXXXXXXXXXX&rand="+r;
 d.body.appendChild(j);}}(document,"zenback-widget-js");
 </script>
<!-- X:E ZenBackWidget -->

****はウィジェットを表示させる部分に記載します。**「document.writeをサポートする」や「詳細設定」**は特に設定しませんでした。

※ページ下部でも記載していますが、このタグが空のままだと失敗しますので、ご注意ください。

5. トリガーを追加するため鉛筆マークをクリック

6. 新しいトリガーを作成するので + マークをクリック

7. トリガーの名前を付けて鉛筆マークをクリック

8. 『要素の表示』を選択

10. 保存して閉じる

11. 『公開』ボタンをクリック

公開しないと設定しただけで終わるので注意。公開ボタンを押すとバージョン名を設定する画面に進みます。

12. バージョン名を設定して『公開』して完了

追加や変更があった場合、バージョン名を設定して公開ボタンを押さないと反映されません。私の場合。バージョン名は日付にしていますが、**『zenback追加』**とかここは何でもいいです。最後に『公開』ボタンを押したら作業は完了です。

ウィジェットが表示されないとき

最初、タグの登録が終わって、ページ表示テストをしたときzenbackのウィジェットが表示されませんでした。以下のページによると、要素（``）が空だと高さ判定で弾かれ、トリガーが発動しないみたいです。

https://jdash.info/archives/Google_Tag_Manager_Element_Visibility_Trigger_not_fire https://jdash.info/archives/Google_Tag_Manager_Element_Visibility_Trigger_not_fire

私の場合、仮にタグを以下のように「その他お知らせ」を追加したところうまく表示できました。

<div id="zenback-widget-loader"></div>

↓

<div id="zenback-widget-loader">その他お知らせ</div>

複数のトリガーを設定しておいた方がいいかも？

今回は参考にzenback-widget-loaderという要素が現れたら表示するようにしましたが、検索ロボットが来たときはどうなるだろう？という疑問が残りました。今回の場合、ページ下部までスクロールされれば表示されますが、スクロールされなければ表示されず無い物という扱いになうのではないかと思いました。

折角設置しているのに無い物扱いだと意味がないので、今回の**『要素の表示』と『タイマー』を組み合わせ**て、スクロールされなくても3～5秒後には強制表示みたいなことをしておけば安心かもしれません。

PageSpeed Insightsで100点が出た！！

これが効いたのかどうかわかりませんが、この記事を投稿した直後にPageSpeed Insightsで計測したら100点でした。マグレでも嬉しいです。

Braveなどでは表示されなくなるので注意！！

Google ChromeやEdgeでは問題ないのですが、Braveなどセキュリティ要素が強いブラウザではzenbackウィジェットが表示されなくなるので注意してください。Google Tag Managerのタグの書き方で回避できるかもしれませんが、それはまた今度探そうと思います。

Javascriptで宅急便各社の荷物追跡サービスの検索結果を表示するフォームを作る

Thu, 17 Sep 2009 17:12:57 +0900

宅配便各社の荷物追跡結果を表示するフォームを作る

Javascriptで宅急便各社の荷物追跡サービスの検索結果を表示するフォームを作ってみました。

検索窓に伝票番号（お問い合せ番号）を入力
宅急便会社を選択
ボタンを押す
新規ウィンドウに検索結果が表示される

よく荷物検索に使う以下の各社なので、この宅配便の検索をメインに作ります。

クロネコヤマト
佐川急便
エクスパック

フォームのソース

サンプルページ：http://qwerty.work/nimotsu_search/nimotsu.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"><br /><html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /><title>荷物追跡</title><br /></head><br /><body><br /><script type="text/javascript"><br /><!--
function data_in(){
 //フォームデータ入力用変数<br />    var denpyou;<br />    var kaisha;<br /> var url;<br /> url = new Array();<br /> //クロネコヤマト<br /> url[1] = "<a href="http://jizen.kuronekoyamato.co.jp/jizen/servlet/crjz.b.NQ0010?id">http://jizen.kuronekoyamato.co.jp/jizen/servlet/crjz.b.NQ0010?id</a>=";<br /> //佐川急便<br /> url[2] = "<a href="http://k2k.sagawa-exp.co.jp/p/web/okurijosearch.do?okurijoNo">http://k2k.sagawa-exp.co.jp/p/web/okurijosearch.do?okurijoNo</a>=";<br /> //日本郵便（ゆうパック・EXPACK・ポスパケット）<br /> url[3] = "<a href="http://tracking.post.japanpost.jp/service/singleSearch.do?org.apache.struts.taglib.html.TOKEN=&searchKind=S002&locale=ja&SVID=&reqCodeNo1">http://tracking.post.japanpost.jp/service/singleSearch.do?org.apache.struts.taglib.html.TOKEN=&searchKind=S002&locale=ja&SVID=&reqCodeNo1</a>=";
<br />    //フォームデータを受け取る<br />    if(document.form1.denpyou.value==""){<br />  alert("伝票番号が入力されていません。");<br />  }<br /> else{<br />  denpyou=document.form1.denpyou.value;  <br /> <br />  //ラジオボタンの値を受け取る <br />  for (i=0;i<document.form1.kaisha.length;i++){<br />    if (document.form1.kaisha[i].checked)<br />        kaisha = document.form1.kaisha[i].value;<br />      }<br />      <br />  url = url[kaisha];<br /> <br />  //新しいウィンドウで検索結果を表示<br />  window.open(url+denpyou);<br />  }
}
<br />/* 半角数字チェック */<br />function TextCheck() {<br />   var str = document.form1.denpyou.value;<br />   if( str.match( /[^0-9.-]+/ ) ) {<br />      alert("半角数字、半角ハイフンで入力して下さい。");<br />      return 1;<br />   }<br />   return 0;<br />}
-->
</script><br /><form id="form1" name="form1" method="post" action=""><br />  <br /><br />  <label for="denpyou">伝票番号<br />  <input name="denpyou" type="text" id="denpyou" value="" onblur="TextCheck();" /><br />  </label><br />  （半角数字、半角ハイフン） <br /><br />  <label for="kaisha">会社選択<br />  <input name="kaisha" type="radio" id="kaisha" value="1" checked /><br />  ヤマト運輸<br />  <input name="kaisha" type="radio" id="kaisha" value="2" /><br />  佐川急便<br />  <input name="kaisha" type="radio" id="kaisha" value="3" /><br />  ゆうパック･EXPACK</label><br />  <br /><br />  <input name="button" type="button" id="button" value="検索結果ページを開く" onClick="data_in();" /><br /></form><br /></body><br /></html>

このページに埋め込んでテスト

実際に使用できます。

伝票番号（半角数字、半角ハイフン）会社選択ヤマト運輸佐川急便ゆうパック･EXPACK

PHP版も作りました

PHP版は以下をご参照ください。

PHPで宅配便各社の荷物追跡結果ページを表示するフォームを作ってみる。

ウィジェット on qwerty.work

Instagramの最近の投稿をサイトに埋め込むプラグイン/ウィジェット

クラウドサービス

Wordpressプラグイン

TCD参考ページ

その他まとめサイト（参考）

Javascriptで埋め込む場合

参考サイト

Googleアナリティクスとの連携でアクセスランキングが作れる『Ranklet』

ブログにアクセスランキングを設置

デフォルトのソース

html

CSS

MovableType用に書き換えたテンプレート

HTML

CSS

参考サイト

zenbackをGoogle Tag Managerで遅延読み込みさせる

ページ読み込みスピードを上げるために遅延させたい

Google Tag Managerで遅延表示させる方法

1. 『新しいタグ』をクリック

2. タグを追加するため右上の鉛筆マークをクリック

3. 『カスタムHTML』を選択

4. zenbackのタグを貼り付ける

5. トリガーを追加するため鉛筆マークをクリック

6. 新しいトリガーを作成するので + マークをクリック

7. トリガーの名前を付けて鉛筆マークをクリック

8. 『要素の表示』を選択

9. 要素の欄に「zanback-widget-loader」と入力して保存

10. 保存して閉じる

11. 『公開』ボタンをクリック

12. バージョン名を設定して『公開』して完了

ウィジェットが表示されないとき

複数のトリガーを設定しておいた方がいいかも？

PageSpeed Insightsで100点が出た！！

Braveなどでは表示されなくなるので注意！！

Javascriptで宅急便各社の荷物追跡サービスの検索結果を表示するフォームを作る

宅配便各社の荷物追跡結果を表示するフォームを作る

フォームのソース

このページに埋め込んでテスト

PHP版も作りました