Web 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

WixとBizメールを組み合わせるときのDNSレコードサンプル

Fri, 01 Nov 2024 00:00:00 +0000

WEB・メール・ドメインが全部バラバラ

以下のような環境の際のDNSレコードのメモ。特にビズメール（ホームページ＆メール）を以下のようにすべてバラバラの環境に移行した場合のメモ。

ドメイン：お名前ドットコム
ホームページ： Wix
メールサーバ： Bizメール＆ウェブ（NTTコミュニケーションズ）

DNSレコード

通常のレンタルサーバーと違って、Bizメールが絡むとちょっと厄介です。手こずった方も多いのではないでしょうか。今回うまくいったDNSレコードの設定をメモ。

お名前ドットコムに登録したDNSレコードの例１

対象ドメインがabc.comで、メールアドレスがxxx＠abc.comで、ホームページ公開URLがwww.abc.comである場合の例。

特に①のWixのポインティング方式でドメイン接続する際に指示されるIPアドレスの追加と、③の127.0.0.1のループバックアドレスの追加。

No.	ホスト	タイプ	値	説明
①	www	A	111.111.111.111	WixのグローバルIPアドレス（数字は実際の環境のものに入れ替える）
②	（空白）	A	222.222.222.222	BizメールのメールサーバーIPアドレス（数字は実際の環境のものに入れ替える）
③	（空白）	A	127.0.0.1	要らないかも
④	ftp	CNAME	abc.com	要らないかも
⑤	pop	CNAME	abc.com	要らないかも
⑥	imap	CNAME	abc.com	要らないかも
⑦	smtp	CNAME	abc.com	要らないかも
⑧	mail	CNAME	abc.com	要らないかも
⑨	（空白）	TXT	v=spf1 a include:_spf.bizmw.com ~all	Bizメールで指定のSPFレコード
⑩	（空白）	MX	mwbgw1.ocn.ad.jp	Bizメールで指定のサーバー名
⑪	（空白）	MX	mwbgw2.ocn.ad.jp	Bizメールで指定のサーバー名

DKIM、DMARCのTXTレコードは未確認

①のWixのグローバルIPアドレスについて

Wixの公式ドキュメントなどで説明がある内容と異なります。Wixの説明では、wwwをCNAMEで登録するように書かれていますが、Aレコードで直接IPアドレスを書きます。

③のループバックアドレスについて

ループバックアドレスとは、127.0.0.1のことでlocalhostを表します。なぜこれがいるのか不明ですが、参考サイトにもあったので考えずに追加してみましょう。

④～⑧のCNAMEについて

これは以下のようにアスタリスク（*）で、一つにまとめてもいいかもしれません。

*　CNAME　abc.com

むしろ、CNAMEは全部無くてもいい気がします。

⑨のSPFレコードについて

メールサーバーのグローバルIPアドレスや、独自ドメイン名も登録したい場合は以下の公式ヘルプを参照。

https://www.ntt.com/business/services/cloud/rental-server/biz/function/setting-spf.html?\_gl=1\*ee9lq0\*\_ga\*MTgwMDUzMTE4My4xNzMwNzE3MjQz\*\_ga\_64VPN83DT4\*MTczMDcxNzI0Mi4xLjAuMTczMDcxNzI0Mi42MC4wLjA.\*\_ga\_SPQ4VXW6SM\*MTczMDcxNzI0Mi4xLjAuMTczMDcxNzI0Mi42MC4wLjA. https://www.ntt.com/business/services/cloud/rental-server/biz/function/setting-spf.html?\_gl=1\*ee9lq0\*\_ga\*MTgwMDUzMTE4My4xNzMwNzE3MjQz\*\_ga\_64VPN83DT4\*MTczMDcxNzI0Mi4xLjAuMTczMDcxNzI0Mi42MC4wLjA.\*\_ga\_SPQ4VXW6SM\*MTczMDcxNzI0Mi4xLjAuMTczMDcxNzI0Mi42MC4wLjA.

⑩⑪のMXレコードについて

基本的に以下のいずれかがMXレコードとして追加されていると思いますが、メメールセキュリティサービスを利用の有無で内容が異なります。

メールセキュリティサービスを利用している場合

以下の2つをMXレコードとして追加します。

mwbgw1.ocn.ad.jp
mwbgw2.ocn.ad.jp

メールセキュリティサービスを利用していない場合

以下の一つのみをMXレコードとして追加します。

abc.com（使用している独自ドメイン）

参考サイト

ホームぺージをジンドゥーで、メールがBizメール＆ウェブの場合の参考ページ。

https://office-gita.com/diary/jimdo-bizmail https://office-gita.com/diary/jimdo-bizmail

簡略化した例2

STUDIOでは以下のレコードで大丈夫でした。

www.abc.com. A STUDIOのサーバーIPアドレスabc.com. A Bizメール＆ウェブIPアドレスabc.com. MX 10 mwbgw1.ocn.ad.jp.abc.com. MX 10 mwbgw2.ocn.ad.jp.abc.com. TXT "v=spf1 a include:_spf.bizmw.com +ip4:Bizメール＆ウェブIPアドレス include:_abc.com ~all"bizmw._domainkey.abc.com TXT "v=DKIM1; k=rsa; p=MIG*********QAB"_dmarc.abc.com.TXT "v=DMARC1; p=reject;"

No.	ホスト	タイプ	値	説明
①	www	A	111.111.111.111	WixのグローバルIPアドレス（数字は実際の環境のものに入れ替える）
②	（空白）	A	222.222.222.222	BizメールのメールサーバーIPアドレス（数字は実際の環境のものに入れ替える）
③	（空白）	MX	mwbgw1.ocn.ad.jp	Bizメールで指定のサーバー名
④	（空白）	MX	mwbgw2.ocn.ad.jp	Bizメールで指定のサーバー名
⑤	（空白）	TXT	“v=spf1 a include:_spf.bizmw.com ~all”	Bizメールで指定のSPFレコード
⑥	bizmw._domainkey	TXT	“v=DKIM1; k=rsa; p=MIG*********QAB”	Bizメールで指定DKIMの設定
⑦	_dmarc	TXT	“v=DMARC1; p=reject;”	DMARCの設定

参考サイト

ホームぺージをヘテムルで、メールがBizメール&ウェブビジネスの場合の参考ページ。

https://mothershipweb.jp/webtec/post7497 https://mothershipweb.jp/webtec/post7497

Bizメール&ウェブビジネスのSPFの書き方。

https://www.ntt.com/business/services/cloud/rental-server/biz/function/setting-spf.html https://www.ntt.com/business/services/cloud/rental-server/biz/function/setting-spf.html

【DNS】ドメイン移管などに便利なDNSレコードをオンラインで確認できるサイト

Wed, 18 Sep 2024 00:00:00 +0000

オンライン確認サイト

https://rakko.tools/tools/18 https://rakko.tools/tools/18

http://webadmin.jp/tooldns http://webadmin.jp/tooldns

https://dns.flexion.jp https://dns.flexion.jp

https://www.seonet.jp/domain/dns https://www.seonet.jp/domain/dns

https://dnschecker.org/all-dns-records-of-domain.php https://dnschecker.org/all-dns-records-of-domain.php

https://www.whatsmydns.net https://www.whatsmydns.net

コマンド

Windows

nslookup -type=any domain.com

Mac

dig -t any domain.com

【Webデザイン】色の組み合わせを探せるAI配色ツール

Thu, 11 Jul 2024 00:00:00 +0000

ホームページの制作で配色に困ったときに使えるサイトメモ。

Colormind

http://colormind.io http://colormind.io

COOLORS

https://coolors.co https://coolors.co

Color Hunt

https://colorhunt.co https://colorhunt.co

その他

https://photoshopvip.net/155741 https://photoshopvip.net/155741

https://kodocode.net/design-free-colorscheme https://kodocode.net/design-free-colorscheme

【STUDIO】よく使うカスタムコード（CSS他）

Mon, 01 Jul 2024 00:00:00 +0000

CSS

スマホの横長画面対応

スマホを横向きにしたとき、キービジュアルの高さを1vhで指定したときに、高さが足りずレイアウトが崩れるため、最低限の高さを指定。

<style>/* スマホの細い横長画面対応 * メインビジュアル高さ指定 *//* 画面高さが540px以下で横向きの場合 */@media screen and (max-height: 540px) and (orientation: landscape) {  #任意のid {      height: 840px !important;  }}/* 縦横比が1200px:768px以下の細長さで横向きの場合 */@media screen and (max-aspect-ratio: 1200/768) and (orientation: landscape) {  #任意のid {      height: 760px !important;  }}</style>

正方形の画像のレスポンシブ対応

画像を正方形で縦横をそれぞれピクセルで指定した際、画面サイズによってはレイアウトが崩れないように小さめに配置することがありますが、1:1の縦横比を保ったまま画面に合わせて、拡大縮小を行う例。

<style>#任意のid .image.sd {    width: 100%;    height: auto;    aspect-ratio: 1;}</style>

Lighthouseパフォーマンス対策

Lighthouseのベンチマークで「パフォーマンス」で指摘される部分の対策。ページ読み込みスピードの高速化に寄与。ページ読み込み時にあらかじめ接続をするpreconnectと、あらかじめ名前解決しておくdns-prefetch。

<link rel="preconnect" href="https://www.googletagmanager.com" /><link rel="preconnect" href="https://storage.googleapis.com" /><link rel="preconnect" href="https://fonts.googleapis.com" /><link rel="preconnect" href="https://analytics.studiodesignapp.com" />または<link rel="dns-prefetch" href="https://www.googletagmanager.com" /><link rel="dns-prefetch" href="https://storage.googleapis.com" /><link rel="dns-prefetch" href="https://fonts.googleapis.com" /><link rel="dns-prefetch" href="https://analytics.studiodesignapp.com" />

【STUDIO】ブレークポイントの追加/削除/変更/調整

Fri, 28 Jun 2024 00:00:00 +0000

ノーコードでホームページ制作ができるSTUDIOで、表示デバイスの画面幅に合わせて表示する可変レイアウト（レスポンシブ）対応についてメモ。

様々なデバイスが世の中に溢れていて、それに対応するためのレスポンシブですが、「パソコン、タブレット、スマートホンの３つに対応すればヨシ」という訳にはいかないことが多々あります。特にパソコンとタブレットの間のMicrosoft Surface Proや、縦だとスマホ、横にするとタブレット表示になるiPhoneなど、ノーコードツールとはいえ、細部までこだわったサイトにしようと思うと、ディープな設定が必要になってきます。そのようなときにやってみたことを、ここにメモ。

STUDIO標準のブレイクポイントの追加/削除

標準　1280px以上（パソコン向け）
スモール　1140pxまで（小型ノート向け）
タブレット　840pxまで
モバイル　540pxまで（スマホ向け）
ミニ　320pxまで

それぞれ、既定の幅を数値の入力か、マウスドラッグで変更が可能です。ただし、上記の5つのブレイクポイントの他に追加ができません。

https://help.studio.design/ja/articles/4954050-%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E3%83%96%E3%83%AC%E3%82%A4%E3%82%AF%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88 https://help.studio.design/ja/articles/4954050-%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E3%83%96%E3%83%AC%E3%82%A4%E3%82%AF%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88

カスタムコードでCSSを書く方法もある

標準のブレイクポイントの数以上にオリジナルで追加したい場合は、有料プランにあるカスタムコードに直接CSSを書くしかなさそうです。カスタムコードに書いたCSSはプレビューでは反映されません。更新ボタンで公開したサイトで反映されるので、テスト的に使う場合は一般の目に触れないように注意することが必要です。

ここに手を付けると、もはやノーコードではない気がしますが、コーディングして制作するよりも制作は随分楽です。

Surface Pro 7+をタブレットのレイアウトに含めたい

iPadはタブレットのブレイクポイントで作成しますが、タブレットに近いサイズのSurface Pro 7+はスモール（PC）として認識されます。これを縦向きにしても、ほぼタブレットサイズに近いのに、スモールまたは標準のブレークポイントで制作したサイトが表示されます。

その場合の対応として、

タブレットのブレイクポイントを840ピクセルから912ピクセルに変更する
カスタムコードにCSSを書く

このどちらかになるかと思います。

カスタムコードの例

Surface Pro 7+の縦向き対応

STUDIOのブレイクポイントを変更せず、タブレットのデフォルト幅840px以上である841px～1023pxの間で縦向きだった場合のカスタムコードで対応する例。

<style>@media screen and (min-width: 841px) and (max-width: 1023px) and (orientation: portrait) {   #対象のid .sd.appear {       ここにルールを書く   }}</style>

ホームページ制作でよく使用するフォントメモ

Fri, 31 May 2024 00:00:00 +0000

明朝体

ヒラギノ明朝ProN W3
ヒラギノ明朝ProN W6
凸版文久明朝レギュラー
遊明朝体 Medium
遊明朝体 Demibold

ゴシック体

ヒラギノ角ゴ ProN W3
ヒラギノ角ゴ ProN W6
凸版文久ゴシック Regular（英数字は凸版文久明朝 Rと共通）
凸版文久ゴシック Demibold（英数字は凸版文久明朝 Rと共通）
ヒラギノ丸ゴProN W4

サンセリフ

Helvetica
Furuta
DIN
Optima
Avenir

セリフ

Times New Roman
Adobe Garamond Pro
Baskerville
Didot
Adobe Caslon Pro

【WebDAV】Windows10のエクスプローラーからの接続に失敗するとき

Tue, 19 Mar 2024 23:52:24 +0900

レンタルサーバーのMixhostでWebDAVを使用していますが、フリーソフトのCarotDAVからの接続は問題ないのですが、エクスプローラーから接続する際に問題が発生します。エクスプローラーから接続設定を行い、最初の接続は問題なく使えるのですが、再起動した２回目からはエラーになり、ミックスホストのコントロールパネルに入れなくなりました。しかも、メールの送受信までできなくなりました。こうなるとCarotDAVからもWebDAVのフォルダを開けなくなります。

これはミックスホストのサーバーがLightspeedだから？？

いろいろ試したこと

webclientの再起動

Windowsのサービス「webclient」を再起動を以下のコマンドで行います。試しましたがダメでした。

net stop webclient
net start webclient

サービス「webclient」を自動実行に変更

以下のページに、同様の症状と回避方法が掲載されていました。試しましたが関係ありませんでした。

レジストリを変更してみる

以下のレジストリを「1」から「2」に変更し、パソコンを再起動しましたが、改善されませんでした。

HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\WebClient\Parameters

ここにある

BasicAuthLevel

の値を「2」に変更する。

もしかしてExplorerから接続しないほうがよい？

以下の参考ページは次の記載がありました。WindowsOSではExplorerより、WebDAVクライアントソフトを使うほうがいいみたいです。こりゃ困ったな。

Windows OS では、OS 側の WebDAV の実装が不十分なため、操作が不安定になる場合があります。また、異なるOSや異なるクライアントソフトでファイル共有を行うと、OSやクライアントソフトの相性により不具合が発生する可能性があります。複数の端末でファイル共有を行う場合は、共通のWebDAVクライアントソフトを利用することをおすすめしています。

Windowsでwebclientは非推奨になったらしい

2023年11月にwebclientサービスは使えるけど、非推奨になったらしい。

CarotDAVのDAV Server機能が使えるかも？

フリーソフトのCarotDAVにあるDAVサーバー機能で、このDAVサーバーを経由してエクスプローラーから接続すれば解決かも？CarotDAVに登録してあるWEBドライブをまとめてエクスプローラーから操作できるようです。

その他

ファイルサイズ、タイムアウト時間の設定

ドメイン接続のDNS/SSL関連のエラー調査時に使えそうなオンラインツール

Sun, 10 Mar 2024 00:00:00 +0000

ドメイン、WEBサーバー、メールサーバーがすべて別の契約で、DNSレコードを設定は間違いないのにサイトに紐づけてもホームページが表示されず、SSL関連のエラーがブラウザに表示されて困ったことがあります。

STUDIOやWIXなどのクラウドサービスを使用していると、サイトの公開時に自動で行われているSSLサーバー証明書の発行でコケることがあります。ドメイン接続をやり直してもコケることがあります。その際に、ブラウザのエラーメッセージだけではヒントが少なすぎて何が原因でエラーになっているのが、わかりにくいです。

そもそも設定したDNSレコードが間違っていないか？それともSSLの状態が悪いのか？外部から見てどうなっているのか簡単にオンラインで調査できるサイトがあるのでメモ。直接エラーを直してくれるものではないですが、エラーの対処のヒントになるかもしれません。

オンラインツール

独自ドメインのDNSレコードの状況を知りたいとき

ドメイン名からAレコード、CNAME、MX、NS等のレコードの状況と、世界中のDNSサーバーの浸透具合がわかるサイト。

https://www.whatsmydns.net/ https://www.whatsmydns.net/

Whoisの内容を調べたいとき

https://www.whois.com/whois/ https://www.whois.com/whois/

https://whois.domaintools.com/ https://whois.domaintools.com/

SSL/TLS証明書関連のエラーの詳細を調べたいとき

サイトを表示した際、ブラウザ上にSSL関連のエラーから具体的に何が原因なのか詳しく知りたいときに使えそうなサイト。

https://www.ssllabs.com/ssltest/analyze.html https://www.ssllabs.com/ssltest/analyze.html

【DNSレコード】ドメイン、WEB、メールがすべて別々の場合

Tue, 05 Mar 2024 00:00:00 +0000

以下のように、ドメイン、ホームページ、メールをすべてバラバラのサービスで契約した場合や、移管や移転で分離した際でも、独自メイン（例：example.com）でホームページもメールもアクセスできるようにするDNSレコードの設定例をメモ。

公開インフラの環境

ムームーDNSの設定例

ムームードメインの管理画面で、最低限必要なDNSレコードの設定は以下の通りです。

ホスト名	タイプ	データ	優先度	メモ
（空欄）	A	34.111.141.225		STUDIOのグローバルIPアドレス
mail	A	XXX.XXX.XXX.XXX		メールサーバ（さくらインターネット）のグローバルIPアドレス
（空欄）	MX	example.sakura.ne.jp	10	さくらインターネットの初期ドメイン（exmapleの部分はご自分の環境の物に入れ替えてください）
（空欄）	TXT	v=spf1 a:www1234.sakura.ne.jp mx ~all		さくらインターネットのホスト名（www1234の部分はご自分の環境の物に入れ替えてください）

DKIM、DMARCを追加する場合

メールのなりすまし対策として、DKIMやDMARCもDNSレコードに追加したいときの例。

ホスト名	タイプ	データ	優先度	メモ
rs20240305._domainkey	TXT	v=DKIM1; k=rsa; p=MIIBIabcd～～～xyzAB		さくらインターネットのメールの管理画面で設定したもの
_dmarc	TXT	v=DMARC1; p=none; aspf=r; adkim=r		さくらインターネットのメールの管理画面で設定したもの

さくらインターネットのDNS設定例

ドメインとメールサーバーがさくらインターネットで、WEBサーバーがSTUDIOの場合。

以下の画面はさくらインターネットのコントロールパネルの**「ドメイン契約の一覧」**から進んだ画面の一例です。

参考ページ

https://support.muumuu-domain.com/hc/ja/articles/12999927550099-STUDIO%E3%81%A8%E6%8E%A5%E7%B6%9A%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95%E3%82%92%E6%95%99%E3%81%88%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84 https://support.muumuu-domain.com/hc/ja/articles/12999927550099-STUDIO%E3%81%A8%E6%8E%A5%E7%B6%9A%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95%E3%82%92%E6%95%99%E3%81%88%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84

https://www.ni4.jp/2014/09/22-125209.html https://www.ni4.jp/2014/09/22-125209.html

Bing Webmaster Toolsがエラーで開けないとき

Tue, 16 Jan 2024 00:00:00 +0000

「ご希望のページは利用できません」というエラー

Bingに新しく制作したサイトを登録しようとして、Bing Webamaster Toolsを検索エンジンやブックマークから開こうとすると以下のようなエラーページが表示され、管理画面に入れませんでした。2～3日ほど日を置きましたが状況は変わらず。

ご希望のページは利用できません

現在サービスの復旧に努めています。
お試しください
更新ページ — 一時的な問題が発生している可能性があります。
このメッセージが再度表示された場合は、後でもう一度確認してください。

クッキー削除で解決

サイトにトラブルがあるのかな？こんなに何日も復旧できないとかおかしくない？と、モヤモヤしていたのですが、原因はクッキーでした。ブラウザからcookieを削除したら解決できました。

ブラウザからクッキーを削除する方法

Google Chromeの場合

ブラウザメニューから**「閲覧履歴を消去」**またはCtrl+Shift+Delで表示される以下の画面から削除実行する。

Microsoft Edgeの場合

ブラウザメニューから**[設定]-[プライバシー、検索、サービス]の画面から、[閲覧データをクリアする]にある「クリアするデータの選択」**またはCtrl+Shift+Delで表示される以下の画面から削除実行する。

ヘッドレスCMS、SPA、SSR、SSGについてメモ

Sat, 09 Dec 2023 09:46:03 +0900

最近、「ヘッドレスCMS」というのをよく聞きますが、どういったもので、何が必要なのかを忘れないためにメモ。

ヘッドレスCMSってどんなもの？

ヘッドレスCMSは通常のCMSとは異なり、フロントエンドとバックエンドが完全に切り離されていて、CMSの仕組みにとらわれず開発できます。また、表示速度が速い、CMS機能を後付けできるといったメリットがあります。

Wordpressなど、サーバー側で動的に処理して表示させるものとは違い、動的なページを予め静的なページで吐き出します。静的なサイトの読み込みとなるため表示が高速になるそうです。更にCDNにキャッシュさせて配信すると更に速くなるかも？解釈が違っていたらごめんなさい。

https://bluemonkey.jp/media/column/Headless_CMS https://bluemonkey.jp/media/column/Headless_CMS

その中でおすすめの構成が以下のページに書かれていました。

https://www.synergate.co.jp/blog/headless-wordpress-speed/ https://www.synergate.co.jp/blog/headless-wordpress-speed/

何が必要？

ヘッドレスCMSを制作するには、幾つかの方法と組合せがあるようですが、「ジャムスタック構成」（Jamstack構成）と呼ばれるものが良いみたいです。

https://jamstack-sg.com/ https://jamstack-sg.com/

使用するのは以下の3つが相性がいいとのこと。

SSG（静的サイトジェネレーター）… Gatsby.js
ホスティングサービス … Cloudflare Pages
ヘッドレスCMS … microCMS

Gatsby.jsはReactで作られた静的サイトジェネレーター。

https://qiita.com/manabito76/items/fe91eefe11a74dcf5126 https://qiita.com/manabito76/items/fe91eefe11a74dcf5126

GatsbyよりもAstro.jsかも

以下のページによると、Gatsbyはブラックボックスになりやすいとのこと。まだ、Gatsbyでサイトを作ったことがなく、作り方もチンプンカンプンな私のレベルでは、Gatsbyは敷居が高くて手を出すのに躊躇しています。その次にNext.jsを検討しているのですが、これも使ったことのないReact製フレームワークで、Reactを書かなければならないとなるとちょっと…という感じです。

https://scr.marketing-wizard.biz/utilities/post-wordpress-alternarive-headlesscms https://scr.marketing-wizard.biz/utilities/post-wordpress-alternarive-headlesscms

しかし、Astro.jsならHTML/CSSをそのまま書けば良さそうなので、SSGができて普通に書けばいいとなるとストレスは相当低くなりそうです。

https://astro.build/ https://astro.build/

よって、以下の構成がいいかも？

SSG（静的サイトジェネレーター）… Astro.js
ホスティングサービス … Cloudflare Pages
ヘッドレスCMS … microCMS

その他参考

https://qiita.com/hppRC/items/b22e8426d021938601fd https://qiita.com/hppRC/items/b22e8426d021938601fd

https://www.ragate.co.jp/blog/articles/16888 https://www.ragate.co.jp/blog/articles/16888

STUDIOで制作したサイトを独自ドメインで公開するときのDNS Aレコード

Thu, 24 Aug 2023 00:00:00 +0000

ノーコードでホームページを制作できるSTUDIOで、制作したサイトを独自ドメインで公開する際に必要なDNSの設定についてメモ。

STUDIOのAレコード

Aレコードはホームページを公開するWEBサーバーのIPアドレス（IPv4)です。お名前.com やムームードメイン、バリュードメイン、Xserverドメイン、Google Domains、名づけてねっと、.oneなど珍しいドメインを取り扱っているゴンベエドメインなど、ドメイン会社のコントロールパネルでDNSの設定を変更する際、Aレコードを以下の内容に変更。

34.111.141.225

以下の公式サイトのサポートページに記載があります。

https://help.studio.design/ja/articles/5707271-studio%E3%81%A7%E6%8E%A5%E7%B6%9A-%E5%85%AC%E9%96%8B%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B%E7%8B%AC%E8%87%AA%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E3%81%AE%E3%83%A1%E3%83%BC%E3%83%AB%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E3%82%92%E5%88%A9%E7%94%A8%E3%81%99%E3%82%8B%E3%81%AB%E3%81%AF%E3%81%A9%E3%81%86%E3%81%97%E3%81%9F%E3%82%89%E8%89%AF%E3%81%84%E3%81%A7%E3%81%99%E3%81%8B https://help.studio.design/ja/articles/5707271-studio%E3%81%A7%E6%8E%A5%E7%B6%9A-%E5%85%AC%E9%96%8B%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B%E7%8B%AC%E8%87%AA%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E3%81%AE%E3%83%A1%E3%83%BC%E3%83%AB%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E3%82%92%E5%88%A9%E7%94%A8%E3%81%99%E3%82%8B%E3%81%AB%E3%81%AF%E3%81%A9%E3%81%86%E3%81%97%E3%81%9F%E3%82%89%E8%89%AF%E3%81%84%E3%81%A7%E3%81%99%E3%81%8B

お名前ドットコムでの設定手順の例

https://mik2062.jp/studio-custom-domain/ https://mik2062.jp/studio-custom-domain/

Google Domainsでの設定手順の例

https://help.studio.design/ja/articles/1884451-dns%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%E8%A8%AD%E5%AE%9A https://help.studio.design/ja/articles/1884451-dns%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%E8%A8%AD%E5%AE%9A

公開時はTLS証明書の発行に数時間かかる

STUDIOで制作したサイトを公開する際は、DNSのAレコードを変更してから公開の設定作業が必要です。STUDIO上で公開作業を進めていく上で、独自ドメインへの接続をクリアすると、TLS証明書の発行が始まります。しかし、これが数時間かかるため、公開作業は夜間に行う方がいいかもしれません。結果、2時間～3時間近くかかりました。

[caption id=“attachment_507” align=“alignnone” width=“700”] この画面をうっかり閉じても、バックグラウンドで発行作業は進行しています。再度「公開設定」画面にアクセスすることで、ステータス（進捗状況）を確認することができます。[/caption]

私は通常の業務時間に行ったため、TLS証明書が発行されていない状態でサイトにアクセスするとHTTPSで強制的に接続され**「このサイトへの接続はセキュリティで保護されていません」**と、証明書がないためにずっとエラー画面（ERR_SSL_VERSION_OR_CIPHER_MISMATCH）が出たままになってしまいました。

https://help.studio.design/ja/articles/4358651-tls-%E8%A8%BC%E6%98%8E%E6%9B%B8 https://help.studio.design/ja/articles/4358651-tls-%E8%A8%BC%E6%98%8E%E6%9B%B8

同じように時間がかかって困った方の記事

早ければ5～10分程度という方もいらっしゃるみたいですが、中には一晩かかったという方も…。

独自ドメイン接続完了画面

TLS証明書の発行が完了すると、以下の画面になります。この後、サイトにアクセスすると制作したサイトが見れると思います。

ホームページ・WEBサイトの更新日を調べる方法

Mon, 08 May 2023 00:00:00 +0000

いつ頃制作されたサイトとか知りたい

「このサイトっていつ頃制作されたんだろう？」と思う時がありますが、Whoisでドメイン取得日を調べても、途中でサイトをリニューアルされている場合があり、サイト制作日がわからないケースが多いです。そういった場合に、目安でもいいから今のデザインになったのはいつ頃が知りたいときがあります。コンテンツの最終更新日を調べる方法があったのでメモ。

ブラウザのコンソールから調べる方法

Chromeなどのブラウザのコンソールから以下のJavascriptコードでコンテンツの最終更新日を調べることができます。

alert(document.lastModified);

Wordpressなど、動的に生成されたWEBページの更新日を調べるのは難しいと思います。その場合は静的な画像ファイルを対象に調べると、そのサイトがいつ頃制作されたか目安としてわかると思います。

安くて良さそうな国産SSLサーバー証明書

Mon, 05 Dec 2022 00:00:00 +0000

DV認証ありきでピックアップ

SSLサーバー証明書はドメイン認証（DV）、企業認証（OV）、EV認証と種類がありますが、一番安いドメイン認証ありきで調べてみました。最安値や格安であればどこでも良いという訳ではなく、契約や更新などで困ったことがあっても何とかなりそうな国内企業や国産SSLで良さそうなサービスに絞って調べてみました。

FUJI SSL 1,100円～

FUJI SSLは純国産の証明書で認証局はセコムです。これでドメイン認証なら1年 1,100円と、かなりやすいです。企業認証型（OV）でも1年 8,800円と格安です。

https://www.fujissl.jp/

アルファSSL 6,600円～

アルファSSLは国産証明書で認証局はGlobalSignです。レンタルサーバーの「Mixhost 」に持ち込んで何度か使用したことがありますが、特に契約や更新などの手続きも問題ありませんでした。ドメイン認証は1年 6,600円～

https://www.toritonssl.com/

以上の2つしかありませんが、これだけでも十分かと思います。

.htaccessでRainloopのdataフォルダにアクセス制限をかける方法

Tue, 29 Nov 2022 00:00:00 +0000

管理画面のエラーに対処

レンタルサーバーに設置できるWEBメーラー「Rainloop」を使用しているのですが、管理画面で以下のようなエラーが出ました。この警告が出ないように対処する方法をメモ。

Rainloopの管理画面に表示された警告

.htaccessでディレクトリにアクセス制限

Rainloopのディレクトリにdataフォルダがあります。この直下にある**.htaccess**を開いて以下のように変更しります。

変更前の.htaccess

Deny from all
<IfModule mod_autoindex.c>
Options -Indexes
</ifModule>

変更後の.htaccess

内部からのアクセスは許可して、それ以外はブロックする内容です。

SetEnvIf Referer "^https://example.com" chk_url
SetEnvIf Referer "^http://example.com" chk_url

Order Deny,Allow
Deny from all
Allow from env=chk_url

<IfModule mod_autoindex.c>
Options -Indexes
</ifModule>

これで警告画面がが表示されなくなりました。

【Exment】Mixhostにインストールしたときの手順

Wed, 02 Nov 2022 08:40:55 +0900

ExmentをMixhostにインストール

顧客管理、日報管理、勤怠管理、アドレス帳など、ちょっとした業務用WEBアプリに使えそうで、「なんでも管理できるWEBデータベース」と謳っている国産オープンソースソフトウェア「Exment」（エクスメント）。これを現在使用しているレンタルサーバー「ミックスホスト」にインストールしてみました。その手順をメモ。

https://exment.net/what https://exment.net/what

Exmentの動作要件

PHP 7.3.0以上
MySQL 5.7.8以上、8.0.0未満

または MariaDB 10.2.7以上

MixhostのcPanelでの作業

サブドメイン作成通常の公開サイトとは別に、Exment用サイト作る場合、mixhost のcPanelからサブドメインを作成します。

例） exmple.com → exment.example.com

PHPのバージョンを変更このページを投稿した時点のExmentのバージョンが v.5.0.0 で、ベースであるPHPフレームワークのLaravelバージョン9を使用し、PHPのバージョンは8.0以上である必要があります。Mixhostのデフォルト設定が７.０系の場合、変更する必要があります。以下のページを参考。

https://exment.net/archives/1816 https://exment.net/archives/1816

FTPユーザー作成 MySQLにデータベースを作成 **[cPanel]-[MySQLデータベース]**の画面からExment用に新しいデータベースを作成します。作成したデータベースにユーザーを追加データベースが作成できたら、同じ画面から作成したデータベースにアクセスする新しいMySQLユーザーを作成し、データベースに対して割り当てます。

Laravelをインストール

ExmentはPHPフレームワークのLaravelをベースに作られているので、サーバーにLaravelを入れておく必要があります。mixhost ではGUIで簡単にインストールできます。

cPanelのLarabelのアイコンをクリック

[![cPanelからLaravelインストール](images/No-10.jpg)](/blog/2022/11/02/No-10.jpg)

メニューに従い、インストールしたいドメインとディレクトリを指定。

インストールフォルダを分けないときはディレクトリの指定は不要。

[![cPanelからLaravelインストール](images/No-11.jpg)](/blog/2022/11/02/No-11.jpg)

[mixhost](https://px.a8.net/svt/ejp?a8mat=2ZF6W2+2DQFW2+3JTE+5YJRM)

の場合、Composerは標準でインストールされているので、別途Composerをインストールする必要はありません。

各バージョンを確認

cPnanlのTerminalからExmentに必要な各バージョンを確認。

コマンド

カレントディレクトリを変更

$ cd public_html/対象サイトフォルダ名

PHPのバージョンを確認するコマンド

$ php -v

Composerのバージョンを確認するコマンド

$ conposer -v

Laravelのバージョンを確認するコマンド

$ cd public_html/対象サイトフォルダ名/laravel
$ php artisan -v

Exmentのインストール

ExmentのZIPをダウンロード

https://exment.net/docs/#/ja/quickstart_easy?id=zip%e3%83%80%e3%82%a6%e3%83%b3%e3%83%ad%e3%83%bc%e3%83%89%e3%83%bb%e5%b1%95%e9%96%8b https://exment.net/docs/#/ja/quickstart_easy?id=zip%e3%83%80%e3%82%a6%e3%83%b3%e3%83%ad%e3%83%bc%e3%83%89%e3%83%bb%e5%b1%95%e9%96%8b

解凍してアップロード解凍したexmentフォルダをLaravelフォルダ直下に置いてみました。公式サイトではexmentフォルダの中身を公開ディレクトリのルート直下に配置すると、外部からデータベースの設定が他人に見られてしまう恐れがあるとのことと、なんとなくフォルダ分けしておきたいのでLaravelフォルダの中にExmentフォルダを配置してみました。

`https://example.com/laravel/exment`

サイトルート
  └ laravel
     └ exment

Laravelフォルダの下位ではなく、同じ階層に置いた場合でもOKでした。

インストール画面にアクセス

Exmentフォルダ内にあるpublicのパス対して**admin**を付けてアクセス

https://exment.example.com/laravel/exment/public/admin/
  ↓
https://exment.example.com/laravel/exment/public/admin/install にリダイレクトされる

[![Exmentインストール画面](images/No-00s.jpg)](/blog/2022/11/02/No-00.jpg)

データベース接続設定使用できるデータベース

  - MySQL
  - MariaDB
  - SQL Server


[mixhost](https://px.a8.net/svt/ejp?a8mat=2ZF6W2+2DQFW2+3JTE+5YJRM)

の場合、MariaDBを選択。ホスト名：127.0.0.1、ポート：3306はそのままでOK。

[![Exmentインストール画面 データベース接続情報設定](images/No-01s.jpg)](/blog/2022/11/02/No-01.jpg)

警告に対処システム条件の確認で警告が出たら対処します。

cPanelの**MultiPHP INI Editer**から各数値の設定を推奨値に変更。

[![Mixhost cPanel MultiPHP INI Editer](images/No-03s.jpg)](/blog/2022/11/02/No-03.jpg)


  
    
      警告
      対応名称
      変更後の値
    
  
  
    
      メモリ使用量上限
      memory_limit
      512M
    
    
      一度にPOSTできる上限数
      max_input_vars
      3000
    
    
      タイムアウト時間
      max_execution_time
      180
    
  

［適用］ボタンを押して、再度インストール画面に戻り、システム条件の確認画面で警告が出なければそのまま進みます。

[![Exmentインストール画面 システム要件の確認 動作条件確認](images/No-05s.jpg)](/blog/2022/11/02/No-05.jpg)

Composerのインストールが確認できない警告については、既にインストールされていることを確認済みなので無視しました。

インストール実行

[![Exmentインストール画面](images/No-04s.jpg)](/blog/2022/11/02/No-04.jpg)

初期設定

インストールが完了すると初期設定画面が表示されるので、**サイト名**や**管理者情報**を登録します。

https://exment.example.com/laravel/exment/public/admin/initialize

[![Exment初期設定画面](images/No-06s.jpg)](/blog/2022/11/02/No-06.jpg)

419 PAGE EXPIRED エラーが出たら

初期設定画面を放置して、後から入力して保存したら、以下のエラー画面が出ました。一旦、初期画面に戻り、F5を押してページを更新し、改めて初期設定を行い保存したら、エラーが出ず保存できました。

[![419 PAGE EXPIRED エラー](images/No-07.jpg)](/blog/2022/11/02/No-07.jpg)

https://exment.example.com/laravel/exment/public/admin/initialize

ダッシュボードが表示されインストール完了

[![Exmentダッシュボード](images/No-08s.jpg)](/blog/2022/11/02/No-08.jpg)

ログイン画面

https://exment.example.com/laravel/exment/public/admin/auth/login

アップデート方法

cPanelのTerminalからコマンドで実行

$ cd public_html/サイトディレクトリ/laravel/exment
$ wget https://exment.net/downloads/cmd/ExmentUpdateLinux.sh
$ chmod 755 ExmentUpdateLinux.sh
$ ./ExmentUpdateLinux.sh

https://exment.net/docs/#/ja/update https://exment.net/docs/#/ja/update

Composerのアップデートに失敗するとき

PHPのバージョンが低いことが原因でアップデートに失敗した場合はPHPのバージョンを指定してからアップデートします。 ./ExmentUpdateLinux.shを実行したときにComposer関連でエラーが出る時も同様です。

エラーの例

[ErrorException]
  Composer detected issues in your platform: Your Composer dependencies require a PHP version ">= 8.0.2". You are running 7.4.33.

エラー回避のコマンド例

$ cd public_html/サイトディレクトリ/laravel/exment
$ composer config platform.php 8.0.27
$ composer update

または

$ composer --no-plugins update --no-scripts

それでもエラーが出る場合

Exmentの階層にあるcomposer.jsonのconfig項に "platform-check": falseを追記すると解決れできるかもしれません。

"config": {
    "platform-check": false
},

https://ao-system.net/note/170 https://ao-system.net/note/170

これを行ってかから、再度./ExmentUpdateLinux.shを実行すると無事にExmentのアップデートが正常に終わりました。

参考ページ

https://gray-code.com/php/specify-php-version-in-composer/ https://gray-code.com/php/specify-php-version-in-composer/

https://www.softel.co.jp/blogs/tech/archives/3826 https://www.softel.co.jp/blogs/tech/archives/3826

LaravelとComposerのバージョンを確認するコマンド

Mon, 31 Oct 2022 08:46:51 +0900

MixhostのcPanelのターミナルからコマンドを実行するときは、cd public_html/サイトフォルダに移動してから実行。

Laravelのバージョン確認

$ php artisan -V

または

$ php artisan --version

Composerのバージョン確認

$ composer -V

または

$ composer --version

WEB制作のためのオンラインツールまとめ

Wed, 21 Sep 2022 20:20:12 +0900

ワイヤーフレーム

https://cacoo.com/ja/home https://cacoo.com/ja/home

カンプ制作

完成形の見本制作。

https://www.sketch.com/ https://www.sketch.com/

プロトタイプ制作

https://prottapp.com/ja/ https://prottapp.com/ja/

https://www.invisionapp.com/ https://www.invisionapp.com/

サンプルコードのプレビューツール

https://jsbin.com/ https://jsbin.com/

HTML文法チェック

https://validator.w3.org/#validate_by_input https://validator.w3.org/#validate_by_input

検索エンジンでドメインのインデックス登録があるか確認する検索書式

Fri, 06 May 2022 22:25:53 +0900

新しいサイトが登録されたか確認したい

新しく取得したドメインでサイトを公開し、Google Search ConsoleやBing Webmaster Toolsでサイトの登録を行ったあと、検索エンジンで検索ヒットするかどうか確認したいとき、以下の書式で検索すると確認できます。

GoogleとYahoo

site:qwerty.work

Bing

url:https://qwerty.work

Bingで「url:https://qwerty.work」を検索

Bing Webmaster Toolsでページに問題がないのにインデックスされないとき

Fri, 06 May 2022 21:43:32 +0900

Bingにインデックスされず困った

Google Search Consoleでは問題なくインデックスされ、GoogleでもYahooでも検索でヒットするようになったページをBing Webmaster Toolsで、**「サイトマップ」の送信や「URL送信」をしても20日くらい待ちましたが、「ページに問題があります」**と表示されたままインデックスされませんでした。

他のサイト制作においても以下の内容が表示されることがありました。

インデックスが付きましたが、サービスを提供できません

URLはBingに表示出来ませんページのソースをどう見ても問題がなさそうで、**「URL検査」から「インデックスを要求する」**をしても変化がありませんでした。

サポートに連絡

Bingの検索エンジン登録についていろいろ調べると、

1ヶ月待ったらインデックスされた
3ヶ月～半年はかかる
数か月かかるの当たり前

みたいな情報が目についたので、**「もうしばらく待つか…。」**とも思いましたが、しびれを切らしてBing Webマスターサポートに連絡することにしました。

Bing Webマスターサポートは英語で問い合わせで、返事も英語のメールが届きます。

https://www.bing.com/webmasters/help/webmasters-support-24ab5ebf https://www.bing.com/webmasters/help/webmasters-support-24ab5ebf

連絡方法

Bing Webmaster Tools内から「Bing Webマスターのサポート」ページに行き、**「Raise support request」ボタンから、各種質問フォームに入力していくのですが、メッセージの欄（Be specific when describing your problem. The details that you include enable us to send you the most likely solution to your issue:と説明のある欄）に日本語で「ページに問題がなさそうなのにインデックスされない」**といった問い合わせ内容をDeepLで英語に翻訳して連絡しました。

ページに問題がなさそうなのにインデックスされなくて困っています。対応をお願いします。

I am having trouble getting the page to index even though it looks fine. Please help us.

その日の内にあっさり解決

すると、その日のうちに返信メールが届き、無事にインデックスされました。このレスポンスの速さにビックリです。

確認のため、Bing Webmaster Toolsの「URL検査」を行うと、以下の内容が表示されました。

正常にインデックスが付きました

URLはBingに表示できます

IndexNowを利用する方法も

有効かどうかはわかりませんが、クロールを待たずに検索エンジンに対してインデックスを依頼するIndexNowという機能をMicorosoftが公開しているようです。現在対応している検索エンジンはBingとYandexだけみたいですが、APIキーを取得してリンクをクリックするだけでBingにサイトの更新を知らせるできるようです。通知をするだけですぐにインデックスしてくれるかわかりませんが、以下のページを参考にやり方をメモ。

https://www.suzukikenichi.com/blog/bing-and-yandex-support-indexnow-to-immediately-index-content-without-crawling/ https://www.suzukikenichi.com/blog/bing-and-yandex-support-indexnow-to-immediately-index-content-without-crawling/

利用の手順

APIキーの取得
APIキーを名前にしたテキストファイルの設置
URLを開いて更新通知

APIキーの取得

Bing Webmaster Toolsの**[設定]-[APIアクセス]-[APIキー]-[APIキー生成]**に進み、APIキーを取得します。

APIキーを名前にしたテキストファイルの設置

a12345146aae4bcfac00eaba54c*****.txt

サイトのルートに以下のテキストファイルを設置します

URLを開いて更新通知

そして、以下のようなリンクを作成し、ブラウザからアセスするだけです。アクセスして更新通知に成功しても真っ白な画面が表示されます。

https://www.bing.com/IndexNow?url=送信したいページのURL&key=取得したAPIキー

https://www.bing.com/indexnow?url=http://www.example.com/product.html&key=a12345146aae4bcfac00eaba54c*****

複数のURLを同時に送信することもできるみたいです。またWordpressにはIndexNowのプラグインもあるようです。

参考サイト

https://www.indexnow.org/ja_jp/index https://www.indexnow.org/ja_jp/index

https://www.bing.com/indexnow#implementation https://www.bing.com/indexnow#implementation

https://wordpress.org/plugins/indexnow/ https://wordpress.org/plugins/indexnow/

CSS？SVG？Canvas？動く背景アニメーションのサンプルや参考ページ

Thu, 10 Feb 2022 09:31:06 +0900

こういう背景ってどうやって作るんだろう？

以下のホームページに使われていた背景の動くバブルがいいな～と思いました。あと、フッターの波のような動きも。

https://fukurou-labo.co.jp/recruit/ https://fukurou-labo.co.jp/recruit/

「どうやってやってるのかな？」と、チャレンジしたくなり、方法を探したときにいろいろ見つけたのでメモ。

参考ページ

オンラインで画像をFaviconに変換してくれるジェネレーターページのメモ

Sat, 05 Feb 2022 15:41:44 +0900

オンライン変換サイト

ファビコンにしたい画像をアップロードすると、オンラインで様々なサイズのFaviconに変換してくれます。設置に必要な site.webmanifest やHTMLのソースも合わせて提供してくれる便利なサイトです。

SVGあり

よく使っているのはこちらのサイト。あらゆる形式を全て網羅しているので重宝しています。

https://realfavicongenerator.net/ https://realfavicongenerator.net/

SVGなし

https://favicon.io/ https://favicon.io/

https://ao-system.net/favicongenerator/ https://ao-system.net/favicongenerator/

https://iconifier.net/ https://iconifier.net/

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

AdSense関係でChromeのコンソールにCORS関係のエラーが出るとき

Sun, 12 Dec 2021 21:28:19 +0900

赤文字でエラーが出る

Lighthouseのベンチマークをしているときに、Chromeのコンソール（F12押すと表示されるやつ）に以下のような警告が出ているのを見つけました。面倒くさいので放置していたのもありますが、本腰入れて解決してみようとやってみたらうまくいったのでメモ。

No ‘Access-Control-Allow-Origin’ headerと出るとき

Access to XMLHttpRequest at ‘https://bid.g.doubleclick.net/dbm/～’ from origin ‘https://googleads.g.doubleclick.net’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

オリジン ‘https://googleads.g.doubleclick.net’ からの ‘https://bid.g.doubleclick.net/dbm/～’ における XMLHttpRequest へのアクセスは CORS ポリシーによりブロックされています。リクエストされたリソースに’Access-Control-Allow-Origin’ヘッダが存在しません。- DeepL翻訳ツール

解決方法

.htaccessに以下の記載をしたところ、エラーが出なくなりました。

Access-Control-Allow-Origin *

他に見つけた書き方

以下のような書き方もあるようです。頭にHeader setを加えた方法です。

Header set Access-Control-Allow-Origin *
Header set Access-Control-Allow-Origin https://bid.g.doubleclick.net https://～

他にも見つけたオプション

Access-Control-Allow-Methods: GET, HEAD, POST, PUT, PATCH, DELETE, OPTIONS
Access-Control-Max-Age: 1728000
Access-Control-Allow-Credentials true

net::ERR_BLOCKED_BY_RESPONSEが出るとき

GET https://ad.atdmt.com/i/～ ad.atdmt.com/i/～ net::ERR_BLOCKED_BY_RESPONSE.NotSameOrigin 200

解決方法

.htaccessに以下の記載をしたところ、エラーが出なくなりました。

X-Frame-Options SAMEORIGIN

他に見つけた書き方

以下のような書き方もあるようです。頭にHeader setやHeader appendを加えた方法です。

Header set X-Frame-Options ALLOW-FROM https://ad.atdmt.com
Header set X-Frame-Options ALLOW-FROM *
Header set X-Frame-Options SAMEORIGIN
Header append X-Frame-Options SAMEORIGIN
header always append X-Frame-Options SAMEORIGIN

参考サイト

https://www.movabletype.jp/documentation/cloud/guide/cfg-htaccess-usage-apache.html https://www.movabletype.jp/documentation/cloud/guide/cfg-htaccess-usage-apache.html

https://webllica.com/deny-iframe-access-by-htaccess/ https://webllica.com/deny-iframe-access-by-htaccess/

https://exerror-com.translate.goog/google-recaptcha-v3-getting-console-error-neterr_blocked_by_response-200/?_x_tr_sl=en&_x_tr_tl=ja&_x_tr_hl=ja&_x_tr_pto=sc https://exerror-com.translate.goog/google-recaptcha-v3-getting-console-error-neterr_blocked_by_response-200/?_x_tr_sl=en&_x_tr_tl=ja&_x_tr_hl=ja&_x_tr_pto=sc

https://www-codesd-com.translate.goog/item/google-adsense-cors-and-rails-in-safari-empty-thousands-of-console-errors.html?_x_tr_sl=en&_x_tr_tl=ja&_x_tr_hl=ja&_x_tr_pto=sc https://www-codesd-com.translate.goog/item/google-adsense-cors-and-rails-in-safari-empty-thousands-of-console-errors.html?_x_tr_sl=en&_x_tr_tl=ja&_x_tr_hl=ja&_x_tr_pto=sc

https://developers-google-com.translate.goog/interactive-media-ads/docs/sdks/html5/client-side/cors?_x_tr_sl=en&_x_tr_tl=ja&_x_tr_hl=ja&_x_tr_pto=sc https://developers-google-com.translate.goog/interactive-media-ads/docs/sdks/html5/client-side/cors?_x_tr_sl=en&_x_tr_tl=ja&_x_tr_hl=ja&_x_tr_pto=sc

https://support-google-com.translate.goog/authorizedbuyers/answer/3202326?hl=en&_x_tr_sl=en&_x_tr_tl=ja&_x_tr_hl=ja&_x_tr_pto=sc https://support-google-com.translate.goog/authorizedbuyers/answer/3202326?hl=en&_x_tr_sl=en&_x_tr_tl=ja&_x_tr_hl=ja&_x_tr_pto=sc

WEBサイト制作で役立つ参考ページ検索＆ギャラリーサイト

Thu, 09 Dec 2021 20:39:08 +0900

どんなデザインにするか迷ったときに使える

ホームページの制作を受注したのはいいけれど、どんなデザインで作るか迷ったときに使える参考サイトを検索できるサイトを見つけたのでメモ。

https://sankoudesign.com/ https://sankoudesign.com/

https://webdesignclip.com/ https://webdesignclip.com/

https://clippa.jp/ https://clippa.jp/

https://www.ikesai.com/ https://www.ikesai.com/

https://muuuuu.org/ https://muuuuu.org/

https://uragawa.work/ https://uragawa.work/

https://io3000.com/ https://io3000.com/

https://81-web.com/ https://81-web.com/

https://stock.pulpxstyle.com/ https://stock.pulpxstyle.com/

https://maneru-design-lab.net/ https://maneru-design-lab.net/

https://bookma.org/ https://bookma.org/

https://good-web-design.com/ https://good-web-design.com/

https://gendaidesign.com/ https://gendaidesign.com/

https://bm.s5-style.com/ https://bm.s5-style.com/

https://choooodoii.com/ https://choooodoii.com/

https://uragawa.work/ https://uragawa.work/

https://1guu.jp/ https://1guu.jp/

https://www.pinterest.jp/ https://www.pinterest.jp/

LP（ランディングページ）のデザインギャラリー

https://rdlp.jp/lp-archive/ https://rdlp.jp/lp-archive/

Wordpressを使用したデザインギャラリー

https://cmsdesign.jp/ https://cmsdesign.jp/

http://wpgallery.kachibito.net/ http://wpgallery.kachibito.net/

海外サイトデザインのギャラリーサイト

https://www.awwwards.com/ https://www.awwwards.com/

https://www.cssdesignawards.com/ https://www.cssdesignawards.com/

https://www.landingfolio.com/ https://www.landingfolio.com/

https://www.siteinspire.com/websites https://www.siteinspire.com/websites

https://land-book.com/ https://land-book.com/

https://onepagelove.com/ https://onepagelove.com/

スマホ対応のサイトを集めたギャラリーサイト

https://agtsmartphonedesign.com/ https://agtsmartphonedesign.com/

https://responsive-jp.com/ https://responsive-jp.com/

アニメーション付きのサイトを集めたギャラリーサイト

https://1guu.jp/ https://1guu.jp/

https://www.hoverstat.es/ https://www.hoverstat.es/

ハーツなど部分的なデザインのギャラリーサイト

パーツの参考になるギャラリーサイト

https://partsdesign.net/ https://partsdesign.net/

https://modulesss.com/ https://modulesss.com/

サブページのメインビジュアルのギャラリーサイト

https://modulesss.com/ https://modulesss.com/

バナーデザインに特化したギャラリーサイト

http://banner.keizine.net/ http://banner.keizine.net/

https://design-library.jp/ https://design-library.jp/

見出しのデザインに特化したギャラリーサイト

https://midashi-design.com/ https://midashi-design.com/

その他ギャラリーサイトの参考ページ

https://liginc.co.jp/416443 https://liginc.co.jp/416443

https://tomorrowgate.co.jp/blog/1804/ https://tomorrowgate.co.jp/blog/1804/

https://blog.hubspot.jp/website-design https://blog.hubspot.jp/website-design

https://pulpxstyle.com/webdesigngallery/ https://pulpxstyle.com/webdesigngallery/

検索キーワード例

上記のサイトで検索するとしたら以下のキーワードが例になるのではないでしょうか？適当に思いつくキーワードを並べてみました。

モノトーン
ダーク
シンプル
カラフル
派手
ポップ
かわいい
上品
コーポレート
企業
病院
飲食
食品
美容室
ファッション

videoタグにcontrolsを設定したのに再生ボタンを押せないとき

Mon, 06 Dec 2021 21:44:57 +0900

MP4ビデオの再生ボタンがクリックできない

WEBサイトにMP4の動画を設置しました。再生／停止や全画面再生などのメニューを表示させるため、****タグにcontrolsを加えました

<video controls src="sample.mp4">

しかし、以下のように再生ボタンにカーソルを重ねても指のマークに変わらず、クリックできません。

z-indexで解決

原因はヘッダーをページ上部に固定していたせいかもしれませんが、controlsで表示されるメニューのレイヤーが前面になっていなかったせいのようです。これを解決するのが**スタイルシート（CSS）**で前面・背面のレイヤーを操作するz-index。

例

video {
  z-index:2;
}

数字が大きくなるほど前面（手前）に位置することを示します。絶対的に前面にするなら、1000とか極端な値を設定すれば良いかと思います。逆に、よく見かけるz-index:1;は最背面で、前後でいう一番奥を指定していることを表しています。

この、z-indexで動画を最前面にすることで再生ボタンをクリックすることができました。

z-indexについての参考ページ

https://developer.mozilla.org/ja/docs/Web/CSS/z-index https://developer.mozilla.org/ja/docs/Web/CSS/z-index

レスポンシブサイト制作時の画面サイズと埋め込み動画の解像度の参考値

Sat, 27 Nov 2021 15:36:37 +0900

レスポンシブサイト制作で気になるサイズ

レスポンシブサイトの背景に動画を埋め込む際に、ＰＣで表示する場合とスマートフォンで表示する場合で、どの解像度で動画を用意すればいいかを考える際に必要な参考値をメモ。

ブレークポイント

CSSフレームワークを使った場合の画面横幅の参考。単位はピクセル。

Bootstrap

Extra extra large（xxl）: 1400以上
Extra large（xl）: 1200以上
Large （lg）: 992以上
Medium（md）: 768以上
Small（sm）: 576以上
Extra small（xs）: 576未満

Pure CSS

Extra large（xl）: 1280以上
Large （lg）: 1024以上
Medium（md）: 768以上
Small（sm）: 568以上

参考ページ

https://getbootstrap.jp/docs/5.0/layout/grid/#grid-options https://getbootstrap.jp/docs/5.0/layout/grid/#grid-options

https://purecss.io/grids/ https://purecss.io/grids/

動画の解像度

アスペクト比 16:9 の解像度。単位はピクセル。

4320p: 7680×4320（8K）
2160p: 3840×2160（4K）
1440p: 2560×1440（2K）
1080p: 1920×1080（フルHD）
720p: 1280×720（HD）
480p: 854×480
360p: 640×360（SD）
240p: 426×240

参考ページ

https://support.google.com/youtube/answer/6375112 https://support.google.com/youtube/answer/6375112

動画や映像が背景に使われているサイトの参考ページ

Tue, 23 Nov 2021 16:12:40 +0900

背景に動画を使用した参考サイト

https://sankoudesign.com/category/movie/ https://sankoudesign.com/category/movie/

WordPressテンプレート『TCD』のデモサイト

https://demo.tcd-theme.com/tcd089/ https://demo.tcd-theme.com/tcd089/

https://demo.tcd-theme.com/tcd086/ https://demo.tcd-theme.com/tcd086/

https://demo.tcd-theme.com/tcd063/ https://demo.tcd-theme.com/tcd063/

https://demo.tcd-theme.com/tcd069/ https://demo.tcd-theme.com/tcd069/

https://demo.tcd-theme.com/tcd071/ https://demo.tcd-theme.com/tcd071/

https://demo.tcd-theme.com/tcd074/ https://demo.tcd-theme.com/tcd074/

https://demo.tcd-theme.com/tcd078/ https://demo.tcd-theme.com/tcd078/

https://demo.tcd-theme.com/tcd083/ https://demo.tcd-theme.com/tcd083/

ホームページの背景として動画を埋め込む際に行うことや気を付けること

Tue, 23 Nov 2021 15:30:30 +0900

デザインの一部として背景に動画を使う上で、以下のことが気になったのでメモ。

動画の容量
再生時間
画面サイズ
ファイル形式
モバイル対応でするべきこと

調べて分かったこと

動画の解像度やファイルサイズ

動画のファイルサイズが大きいと読み込みに時間がかかり、モバイル通信では容量を大量に消費させてしまいます。反対に、ファイルサイズが小さければ読み込み時間が短くなり、すぐに再生が始まります。訪問者に対して快適に閲覧してもらえるWebページにするためには、動画ファイルはなるべく小さくします。

いろいろ情報を見る中では具体的に3MB以内。できれば500KB以内が理想的というものをみかけましたが、10秒以下の動画でないと難しいと思います。トップページの背景に動画（MP4）を使用しているいくつかのサイトを参考に、いくつか動画をダウンロードしてプロパティを調べたところ以下のような平均値になっていることが分かりました。

  解像度
  再生時間
  ビットレート
  ファイルサイズ




  フルHD

  （1920ｘ1080）
  約15秒
  約5Mbps
  約10MB


  フルHD

  （1920ｘ1080）
  約14秒
  約3Mbps
  約5.9MB


  フルHD

    （1920ｘ1080）
  約20秒
  約2Mbps
  約4.75MB


  フルHD

  （1920ｘ1080）
  約54秒
  約1.5Mbps
  約9.8MB


  HD

    （1280ｘ720）
  約13秒
  約5Mbps
  約8MB


  HD

    （1280ｘ720）
  約30秒
  約4.9Mbps
  約16MB

参考値

この先、世の中の通信環境が変わるとわかりませんが、上記の平均値を踏まえて考えると、ここ最近では以下の条件で動画を作成するのが良いみたいです。

解像度は『フルHD』か『HD』
ビットレートは1.5M~~3Mbpsまたは4M~~5Mbps
ファイルサイズは10MB前後

スマートフォン向けの配慮

動画が埋め込まれたWebページは、テキストや画像を中心としたページに比べてデータ量がかなり大きくなります。スマートフォンでの閲覧は、モバイル通信の容量を大量に消費してしまいます。場合によっては、Webサイトにアクセスしたとたんに動画が自動的に再生され、通信制限がかかってしまうということもあるかもしれませんので、ユーザーへの配慮は動画を活用する上で重要なポイントとなり、通信量を可能な限り抑えることが肝心です。

そのためには、画像のファイルサイズができる限り小さくなるように、映像の解像度や動画フォーマットを慎重に決めていきます。また、スマートフォンのモバイル通信環境で実際にWebページをテスト表示させ、動画があってもストレスなく閲覧できるかどうか確認しておくことも大切です。

このとき、Basic認証がかかっているとAndroidでは動画が再生されないことがあります。テスト表示は、PC上でモバイル表示させる方法ではなく、できる限り本番の運用に近いスマートフォン上で行うようにしましょう。

再生時間について

動画をサイトの背景として配置する場合、それ自体が主要なコンテンツでなく、再生時間が長い動画を埋め込んだとしても、サイト訪問者は最後まで視聴する可能性は低いでしょう。ユーザーが飽きることなく、見る側のストレスがないよう尺の短い動画を使用するのが良いと思います。

具体的には長くても30秒～45秒あたりがベストではないでしょうか。

もし、WEBサイトの内容をよりわかりやすく伝えるために、もっと長い動画が必要な場合は、背景に使用するのではなく、メインコンテンツとしてページ内に配置するほうが適しているかと思います。例えばYouTubeやvimeoなどにアップロードしてiframeで埋め込みます。

サウンドオフと自動再生などデフォルトの設定

コンテンツとしての動画とは違い、背景動画は再生ボタン操作なしで自動再生させ、繰り返しループ再生させることが多いかと思います。その際は``タグに属性としてautoplayとloopを有効に設定します。すると、動画データ読込後に再生が自動で開始され、エンドレスで繰り返し再生されます。

また、ページ表示でいきなり音が鳴ると周囲に迷惑がかかったり、音が鳴ると困る場所では驚いて画面を閉じていします顔で知れません。そういうシーンに配慮してmuted属性を設定し、音がデフォルトで出ないようにします。

更に、WEBでの動画には全画面モードが搭載されていることがよくありますが、背景動画には不要だと思います。その場合、playsinline属性を有効に設定します。これは「動画の映像をインラインで再生する」という意味なので、全画面モードが禁止され、常にページ内で再生されるようになります。ちなみに、playsinline属性を使用するとiPhoneでインライン再生ができるようになります。

ソース例

<video  src="動画ファイル.mp4" playsinline autoplay loop muted></video>

または

<video playsinline autoplay loop muted poster="動画を読み込む間に表示する画像.jpg">
	<source src="動画ファイル.mp4" type="video/mp4" />
	<source src="動画ファイル.webm" type="video/webm" />
	<source src="動画ファイル.jpg" />
</video>

ユーザーの閲覧するブラウザによっては、指定した動画ファイルが再生されない場合があるため、>タグを使用して複数のファイル形式のソースを指定します。

指定の範囲だけ再生する方法

その他、参考として再生する範囲を指定することもできます。例えば、全体で30秒ある動画の5秒～10秒に当たる部分を再生する場合は``とします。この仕組みは**「Media Fragments URI」**という規格で定められた特別なURLの書き方で、その一部が各種ブラウザで採用されているために利用可能なものです。ただし、IE（Internet Explorer）とEdgeは対応していないので、使う際は注意が必要です。

IEやEdgeではJavascriptで制御も可能

再生範囲を指定できないIEやEdgeにも対応したい場合、再生が不要な部分を事前にカットして、必要な部分のみの動画にしておくのが最もシンプルな方法ですが、何らかの理由で事前にカットせずIEやEdgeに場合は、JavaScriptを用いて対応させる方法もあります。

``タグのすべての属性は、JavaScriptを通して動的に制御できます。再生範囲をURLで指定する#t=はタグは使用せず、代わりに「video」オブジェクトの「currentTime」属性によって再生位置の確認と設定が可能です。「video」オブジェクトの再生状態を制御するplay()やpause()などのメソッドと組み合わせれば、特定の範囲を再生させるプログラムを作れるかと思います。

ソース例

``タグに任意のIDを設定し、Javascriptで指定します。範囲を指定する方法は見つけれませんでしたが、こんな書式で制御できるみたいです。

<video id="header-video">
	<source src="動画ファイル.mp4" type="video/mp4">
	<source src="動画ファイル.webm" type="video/webm">
	<source src="動画ファイル.jpg">
	<p>ご使用のブラウザでは動画再生に対応していません。</p>
</video>

<script>
window.addEventListener('DOMContentLoaded', function(){
	var v = document.getElementById('header-video');
	v.autoplay = true;
	v.loop = true;
	v.muted = true;
	v.playsinline = true;
	v.currentTime= 30; //30秒から再生が開始される?
	v.play();
});
</script>

参考サイト

ファイル形式

iOS・Androidの両方で動画を再生させるとすると、動画形式は共通で扱える必然的にMP4（コーデックはh.264）となります。特別な理由がない限り、MP4で問題ないでしょう。また、MP4自体が特殊なものでもないこと理由の一つとなります。

Androidで扱える形式

3GPP、mp4、WebM

iPhoneで扱える形式

m4v、mp4、3gp、mov、qt

ブラウザやデバイスによって対応できるものがことなったり、ブラウザが自動的に最適なファイル形式を選択できるよう、複数のファイル形式を準備しておき、タグで複数の動画を設置しておくことをおすすめします。

<video id="header-video">
	<source src="動画ファイル.webm" type="video/webm">
   <source src="動画ファイル.ogg" type="video/ogg">
	<source src="動画ファイル.mp4" type="video/mp4">
   <p>ご使用のブラウザでは動画再生に対応していません。</p>
</video>

このように複数の動画がある場合、上から順番に対応できるものをブラウザが自動的に選択して再生します。

動画の代替手段としてアニメーションを使う

AndroidやiOSのバージョンいよってはページ内再生はできない場合があるようです。理由はよくわかりません。その場合はアニメーションGIFや**アニメーションPNG（APNG)**などを用いるなど、デバイスごとに最適な動画を用意することで、すべてのデバイスに対応できるかもしれません。アニメーションGIFでは256色までしか使えないため、画像が粗くなりますが、アニメーションPNGは24bitカラー（1677万色）でキレイな表示と半透過も使用可能です。その分、容量が大きくなります。拡張子もPNGですが、IEや古いバージョンのEdgeには非対応ですが、apng-canvas.jsで疑似的な対応は可能のようです。

オンラインでアニメーションGIFが作れるサイト

https://www.groovoost.com/blog/web/video-to-gif https://www.groovoost.com/blog/web/video-to-gif

各ブラウザのAPNGの対応状況

https://caniuse.com/?search=apng https://caniuse.com/?search=apng

オンラインでアニメーションPNGが作れるサイト

MP4の動画をオンラインでアニメーションPNG（APNG）が作成できる。アニメーションGIFにも対応。

https://i.kuku.lu/ https://i.kuku.lu/

apng-canvas.jsとサンプル

https://github.com/davidmz/apng-canvas https://github.com/davidmz/apng-canvas

https://ics.media/entry/2441/ https://ics.media/entry/2441/

https://coco-factory.jp/ugokuweb/move02/9-2/ https://coco-factory.jp/ugokuweb/move02/9-2/

https://lab.sonicmoov.com/design/how-to-make-apng/ https://lab.sonicmoov.com/design/how-to-make-apng/

アニメーションWebPという手段も

WebPとはGoogleよって軽量化を目的に作成された画像フォーマットで、アニメーションPNGよりも軽くなり。PNG同様にフルカラーでアルファチャンネルを持ち透過も使えます。ただし、IEでは表示できません。

各ブラウザの対応状況

https://caniuse.com/?search=webp https://caniuse.com/?search=webp

参考デモ

http://www.mimonelu.net/sandbox/browser/demo/animation-gif-apng-webp/index.html http://www.mimonelu.net/sandbox/browser/demo/animation-gif-apng-webp/index.html

オンラインで変換する方法の参考

https://gigazine.net/news/20210919-video2webp/ https://gigazine.net/news/20210919-video2webp/

オンライン変換ページ

オンラインでMP4形式の動画をアニメーションWebPに変換できるようです。

https://video2webp.mattj.io/ https://video2webp.mattj.io/

使用例

<picture">
	<source srcSet="animation.webp" type="image/webp" />
	<img src="picture.png" alt="title" />
</picture>

使い方の参考

https://gigazine.net/news/20210919-video2webp/ https://gigazine.net/news/20210919-video2webp/

オンライン変換サイト

https://video2webp.mattj.io/ https://video2webp.mattj.io/

WebM形式の動画も用意

WebMとは、Google社が開発・公開しているオープンな動画ファイル形式。動画圧縮にVP8/VP9形式、音声圧縮にVorbis形式、ファイル形式（コンテナフォーマット）にMatroska形式（MKV/MKA）のサブセットをそれぞれ用いたものです。

ちなみに、MP4はMPEG-4形式の圧縮動画データを格納するファイル形式の一つ。MP4はApple社のメディア技術QuickTimeのファイル形式を元に策定されたISO/IEC 14496 Part 12の派生フォーマットで、従来のQuickTime形式の多くを踏襲した構造となっています・

WebMをMP4と比較すると、画質はややMP4の方が良いみたいですが、私には見分けが付けいません。ファイルサイズはWebMの方が軽くなります。ただし、WebMに対応するブラウザが限られます。

各ブラウザの対応状況

https://caniuse.com/?search=webm https://caniuse.com/?search=webm

WebM形式の動画を作成する方法

Premiere Proから書き出す（プラグインが必要）
オンラインで変換する

Premiere Proは標準ではWebM形式で書き出せないため、プラグインをインストールする必要があります。インストール後は書き出し時のファイル形式からWebMを選択できるようになります。使い方は以下のページが参考になります。Mac用の参考ですが、Windowsもやり方は同じです。

https://vook.vc/n/859 https://vook.vc/n/859

プラグインはWindows/Macの両方が用意されています。プラグインは以下よりダウンロードできます。インストールはダウンロードしたファイルを開き、メニューに沿って次々に進めば簡単にインストールできます。

https://www.fnordware.com/WebM/ https://www.fnordware.com/WebM/

以下のサイトではMP4→WEBM、逆のWEBM→MP4にオンラインで変換することができます。

https://convertio.co/ja/mp4-webm/ https://convertio.co/ja/mp4-webm/

https://www.aconvert.com/jp/video/webm-to-mp4/ https://www.aconvert.com/jp/video/webm-to-mp4/

その他注意すること

iPhoneについて

videoタグにplaysinline属性を使用するとiPhoneでインライン再生ができるようになる。
低電力モードになっている時、WEBサイトの背景動画は再生されていないことが多い。

その他参考サイト

https://jp.ext.hp.com/techdevice/technologysc/creator_014/ https://jp.ext.hp.com/techdevice/technologysc/creator_014/

まとめ

モバイルにも対応したレスポンシブデザインのホームページ制作で、背景に動画を埋め込み際は、以下のことに心がければよいかと思われます。

動画の解像度はフルHDかHD。
ファイルサイズは約10MBになるようにビットレートを5Mbps以下に落とす。
MP4以外にサイズの軽いWebMなども設置する。
もっと軽くしたいときは動画の代替としてアニメーションPNG（APNG）やアニメーションWebPを使う。
iPhone対応で``タグにはplaysinlineを設定する。

【jQuery】画像のスライドを実現するSlick.js

Fri, 05 Nov 2021 13:50:27 +0900

画像のスライダー

画像のスライドを簡単に実現できるJSないかな～と探してみたら、あっさり見つけることができたのでメモ。

jQueryに依存するもの

Slock.js

Slick.jsを使った参考例

https://coco-factory.jp/ugokuweb/move01/6-1-6/ https://coco-factory.jp/ugokuweb/move01/6-1-6/

公式サイト

https://kenwheeler.github.io/slick/ https://kenwheeler.github.io/slick/

jQueryが不要なもの

Swiper.js

Slick.jsを使った参考例

https://www.rectus.co.jp/archives/496 https://www.rectus.co.jp/archives/496

https://digipress.info/tech/introducing-swiper-js/ https://digipress.info/tech/introducing-swiper-js/

公式サイト

https://github.com/nolimits4web/swiper https://github.com/nolimits4web/swiper

【2021年11月】ブログの更新通知PINGサーバー送信先リスト

Tue, 02 Nov 2021 11:55:23 +0900

ブログの更新通知先を再検証

最新と謳って更新通知先を掲載しているPing更新通知先のURLの一覧がネットに転がっていますが、実際にMovableTypeの**『ウェブサイト更新pingサービス通知』**欄に登録しているのですが、結構エラーが出ます。定期的に検証して追加・削除をしていきたいと思います。

正常だった更新通知先

自作のPING送信テストページで**『HTTP/1.1 200 OK』または『flerror 0 message Thanks for the ping.（メッセージpingをありがとう）』**と表示されたものです。ちょっと少ない気がしますが、エラーは出ませんでした。

http://ping.fc2.com/
http://pingoo.jp/ping/
http://www.blogdigger.com/RPC2

受信するけどサービスは終了している送信先

自作のPING送信テストページでは**『HTTP/1.1 200 OK』でしたが、『flerror 0 message Thanks for the Ping!! But this ping server no longer exists.（メッセージPingをありがとう！しかし、このpingサーバーはもう存在しません。）』または『flerror 1』**と表示されたもの。

http://ping.feedburner.com
http://ping.rss.drecom.jp/

既にサービスが終了していると思われる送信先

以前に使用していましたが、MovableTypeでエラーが出たため、送信先から削除したものです。もし下記のどれかがあったら消すことをオススメします。

注意事項

正常に存在する先だけど、ただタイムアウトしているだけのものも含まれている可能性があります。
httpではなく、httpsなら正常に送信できるものが含まれている可能性があります。

http://1470.net/api/ping
http://api.feedster.com/ping
http://api.moreover.com/ping
http://api.moreover.com/RPC2
http://bblog.com/ping.php
http://blo.gs/ping.php
http://blog.goo.ne.jp/XMLRPC
http://blog.rank10.net/update/ping.cgi
http://blogbot.dk/io/xml-rpc.php
http://blogcircle.jp/ping/rcv/12918
http://blogdb.jp/xmlrpc
http://blogdigger.com/
http://blogmatcher.com/u.php
http://blog-search.net/up.php
http://blogstreet.com/
http://blogstyle.jp/xmlrpc/
http://blog-wa.sub.jp/cgi/mt/mt-tb.cgi/4
http://bulkfeeds.net/rpc
http://center.jugem.cc/?eid=108
http://cgi.f24.aaacafe.ne.jp/~shun/sb/log/eid1.html
http://coreblog.org/jp/ping/
http://coreblog.org/ping
http://coreblog.org/ping/.gs/
http://effbot.org/rpc/ping.cgi
http://hamo-search.com/ping.php
http://iblogping.underdone.net/rpc/
http://j-ranking.com/ping.cgi
http://jugem.jp/?mode=NEWENTRY
http://kutsulog.net/ping.cgi
http://mod-pubsub.org/kn_apps/blogchatt
http://myblog.blogspot.com
http://ping.bitacoras.com/
http://ping.blo.gs/
http://ping.blogfreak.jp/
http://ping.blogmura.jp/rpc/
http://ping.blogoon.net/
http://ping.blogranking.net/
http://ping.cocolog-nifty.com/xmlrpc
http://ping.dendou.jp/
http://ping.eblog.jp/
http://ping.exblog.jp/xmlrpc
http://ping.freeblogranking.com/xmlrpc/
http://ping.gpost.info/xmlrpc
http://ping.kutsulog.net/
http://ping.qumana.com/
http://ping.rootblog.com/rpc.php
http://ping.sitecms.net
http://ping.speenee.com/xmlrpc
http://ping.weblog.ne.jp/
http://ping.weblogalot.com/rpc.php
http://ping.weblogs.se/
http://pingoat.com/goat/RPC2
http://r.hatena.ne.jp/rpc
http://ranking.kuruten.jp/ping
http://rcs.datashed.net/RPC2/
http://rpc.atblogs.com/
http://rpc.blogbuzzmachine.com/RPC2
http://rpc.bloghackers.net/newsoku
http://rpc.blogrolling.com/pinger/
http://rpc.icerocket.com:10080/
http://rpc.technorati.com/rpc/ping
http://rpc.technorati.jp/rpc/ping
http://rpc.weblogs.com/RPC2
http://serenebach.net/rep.cgi
http://serennz.cool.ne.jp/sblog/rep.cgi
http://services.newsgator.com/ngws/xmlrpcping.aspx
http://sra.jp/rpc.cgi
http://taichistereo.net/xmlrpc/
http://thingamablog.sourceforge.net/ping.php
http://topicexchange.com/RPC2
http://trackback.bakeinu.jp/bakeping.php
http://wordpress.xwd.jp/index.php 
http://wpdocs.sourceforge.jp/Update_Services
http://www.31engine.com/weblogUpdates/1.cgi
http://www.31engine.com/weblogUpdates/11.cgi
http://www.31engine.com/weblogUpdates/12.cgi
http://www.31engine.com/weblogUpdates/29.cgi
http://www.31engine.com/weblogUpdates/9.cgi 
http://www.accelanavi.com/anavi/ping.php
http://www.bing.com/ping?sitemap=
http://www.bitacoles.net/ping.php
http://www.bloglines.com/ping
http://www.blogoole.com/ping/
http://www.blogoon.net/ping/
http://www.blogroots.com/
http://www.blogroots.com/tb_populi.blog?id=1
http://www.blogshares.com/rpc.php
http://www.blogsnow.com/ping
http://www.blogstreet.com/xrbin/xmlrpc.cgi
http://www.blogstyle.jp/
http://www.catapings.com/ping.php
http://www.dontpushme.com/ft/Xmlrpc/Business.do
http://www.feedburner.com/fb/a/home
http://www.fieldsystem.ne.jp/rank/ping.asp
http://www.google.co.jp/webmasters/sitemaps/ping?sitemap=
http://www.google.com/webmasters/sitemaps/ping?sitemap=
http://www.i-learn.jp/ping/
http://www.lasermemory.com/lsrpc/ 
http://www.mod-pubsub.org/kn_apps/blogchatter/ping.php
http://www.netplaza.co.jp/ping.php
http://www.newsgator.com/ 
http://www.newsisfree.com/
http://www.newsisfree.com/xmlrpctest.php
http://www.popdex.com/
http://www.popdex.com/addsite.php
http://www.ranq.jp/xmlrpc/-/pI8t7Oy/gRrWJ/
http://www.rubhub.com/
http://www.snipsnap.org/RPC2
http://www.tagclick.net/ping 
http://www.trackbackcenter.com/
http://www.trackbackcenter.com/cgi-bin/receive.cgi
http://www.triathleteblog.net/ping3.php
http://www.weblogues.com/RPC/
http://www.xmlrpc.com/weblogsCom
http://xmlrpc.blogg.de/
http://xping.pubsub.com/ping/
https://blogsearch.google.co.jp/ping/RPC2
https://blogsearch.google.com/ping/RPC2
https://rpc.reader.livedoor.com/ping
https://rpc.weblogs.com/

事前に登録が必要な通知先

http://ping.blogmura.com/xmlrpc/<em>自分専用PING送信情報</em>
http://blog.with2.net/ping.php/<em>自分専用PING送信先情報1/自分専用PING送信先情報2</em>

MovableTypeで500エラーが出ている時

以下のページによると、PING送信に500エラーで失敗しているときは、送信先で処理がかかりすぎてMovableTypeが勝手に失敗としている場合があるそうです。デフォルトのタイムアウトは60秒で、この値を120秒とか延ばせばエラーにならないかもという話。

https://webllica.com/trackback-ping-500-err-on-mt/ https://webllica.com/trackback-ping-500-err-on-mt/

タイムアウトの設定は mt-config.cgi に記載すればいいみたいです。

#HTTPタイムアウト設定(120秒で設定)
HTTPTimeout 120

その他参考ページ

RSS送信フォーム

https://pingomatic.com/ https://pingomatic.com/

http://blo.gs/ping.php http://blo.gs/ping.php

PHPでPing送信するスクリプト参考

https://www.softel.co.jp/blogs/tech/archives/2418 https://www.softel.co.jp/blogs/tech/archives/2418

Googleマップ埋め込みタグのiframe書式例まとめ

Sat, 14 Aug 2021 13:05:14 +0900

書式例

赤田海水浴場の地図を表示する例

通常例

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d26355.54307992571!2d130.87437829737954!3d34.339204853827596!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3543123bc72ce0c3%3A0x3d98f38cb01c0f43!2z6LWk55Sw5rW35rC05rW05aC0!5e0!3m2!1sja!2sjp!4v1628905054118!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

キーワードで指定するシンプルな例

<iframe src="https://maps.google.co.jp/maps?output=embed&q=赤田海水浴場&z=15" width="100%" height="450"  style="border:0;" allowfullscreen="" loading="lazy"></iframe>

パラメーター参考

https://www.bricoleur.co.jp/blog/archives/4452 https://www.bricoleur.co.jp/blog/archives/4452

https://qiita.com/yu-rin-chi/items/41b37b4656ea504350c7 https://qiita.com/yu-rin-chi/items/41b37b4656ea504350c7

留意点

AMPページではwidth="100%"はエラーになるので、width="600"のようにピクセルで指定する必要があります。

layout="responsive"も加えておくと良いみたいです。（以下参考）

https://qiita.com/otsuky/items/9254065d41598cb242ce https://qiita.com/otsuky/items/9254065d41598cb242ce

その他参考

https://developers.google.com/maps/documentation/urls/get-started https://developers.google.com/maps/documentation/urls/get-started

https://qiita.com/hiron2225/items/8d5cd1b6728b4d63434b https://qiita.com/hiron2225/items/8d5cd1b6728b4d63434b

WAMP環境構築フリーソフトのメモ

Wed, 11 Aug 2021 16:22:11 +0900

WAMP環境構築フリーソフトのメモ

WEB制作で手っ取り早くApatchやPHP、MySQLのテスト環境（WAMP）をWindows上に構築を簡単できるフリーソフトをメモ。WordPress（ワードプレス）やMovableTypeをとりあえずテスト使用したいときなどに使えます。

WAMPはWindows+Apatch+MySQL+PHP環境の略。OSがLinuxだとLAMP、MacはMAMP。

ダウンロードページ

XAMPP

https://www.apachefriends.org/jp/index.html https://www.apachefriends.org/jp/index.html

Bitnami WAMP

https://bitnami.com/stack/wamp https://bitnami.com/stack/wamp

WAMPSERVER

https://www.wampserver.com/ https://www.wampserver.com/

【2021年6月】ブログの更新通知PINGサーバー送信先リスト

Sun, 27 Jun 2021 22:07:18 +0900

ブログの更新通知先を再検証

正常だった更新通知先

自作のPING送信テストページで『HTTP/1.1 200 OK』または『flerror 0 message Thanks for the ping.（メッセージpingをありがとう）』と表示されたものです。ちょっと少ない気がしますが、エラーは出ませんでした。

http://ping.bloggers.jp/rpc/
http://ping.fc2.com/
http://ping.freeblogranking.com/xmlrpc/
http://pingoo.jp/ping/
http://rpc.pingomatic.com/
http://www.blogdigger.com/RPC2
http://www.blogpeople.net/ping/
http://www.blogpeople.net/servlet/weblogUpdates

受信はするけどサービスは終了している送信先

自作のPING送信テストページでは『HTTP/1.1 200 OK』でしたが、『flerror 0 message Thanks for the Ping!! But this ping server no longer exists.（メッセージPingをありがとう！しかし、このpingサーバーはもう存在しません。）』または『flerror 1』と表示されたもの。

http://blog.with2.net/ping.php/
http://ping.feedburner.com
http://ping.rss.drecom.jp/

既にサービスが終了していると思われる送信先

注意事項

正常に存在する先だけど、ただタイムアウトしているだけのものも含まれている可能性があります。
httpではなく、httpsなら正常に送信できるものが含まれている可能性があります。

http://1470.net/api/ping
http://api.feedster.com/ping
http://api.moreover.com/ping
http://api.moreover.com/RPC2
http://bblog.com/ping.php
http://blo.gs/ping.php
http://blog.goo.ne.jp/XMLRPC
http://blog.rank10.net/update/ping.cgi
http://blogbot.dk/io/xml-rpc.php
http://blogcircle.jp/ping/rcv/12918
http://blogdb.jp/xmlrpc
http://blogdigger.com/
http://blogmatcher.com/u.php
http://blog-search.net/up.php
http://blogstreet.com/
http://blogstyle.jp/xmlrpc/
http://blog-wa.sub.jp/cgi/mt/mt-tb.cgi/4
http://bulkfeeds.net/rpc
http://center.jugem.cc/?eid=108
http://cgi.f24.aaacafe.ne.jp/~shun/sb/log/eid1.html
http://coreblog.org/jp/ping/
http://coreblog.org/ping
http://coreblog.org/ping/.gs/
http://effbot.org/rpc/ping.cgi
http://hamo-search.com/ping.php
http://iblogping.underdone.net/rpc/
http://j-ranking.com/ping.cgi
http://jugem.jp/?mode=NEWENTRY
http://kutsulog.net/ping.cgi
http://mod-pubsub.org/kn_apps/blogchatt
http://myblog.blogspot.com
http://ping.bitacoras.com/
http://ping.blo.gs/
http://ping.blogfreak.jp/
http://ping.blogmura.jp/rpc/
http://ping.blogoon.net/
http://ping.blogranking.net/
http://ping.cocolog-nifty.com/xmlrpc
http://ping.dendou.jp/
http://ping.eblog.jp/
http://ping.exblog.jp/xmlrpc
http://ping.gpost.info/xmlrpc
http://ping.kutsulog.net/
http://ping.qumana.com/
http://ping.rootblog.com/rpc.php
http://ping.sitecms.net
http://ping.speenee.com/xmlrpc
http://ping.weblog.ne.jp/
http://ping.weblogalot.com/rpc.php
http://ping.weblogs.se/
http://pingoat.com/goat/RPC2
http://r.hatena.ne.jp/rpc
http://ranking.kuruten.jp/ping
http://rcs.datashed.net/RPC2/
http://rpc.atblogs.com/
http://rpc.blogbuzzmachine.com/RPC2
http://rpc.bloghackers.net/newsoku
http://rpc.blogrolling.com/pinger/
http://rpc.icerocket.com:10080/
http://rpc.technorati.com/rpc/ping
http://rpc.technorati.jp/rpc/ping
http://rpc.weblogs.com/RPC2
http://serenebach.net/rep.cgi
http://serennz.cool.ne.jp/sblog/rep.cgi
http://services.newsgator.com/ngws/xmlrpcping.aspx
http://sra.jp/rpc.cgi
http://taichistereo.net/xmlrpc/
http://thingamablog.sourceforge.net/ping.php
http://topicexchange.com/RPC2
http://trackback.bakeinu.jp/bakeping.php
http://wordpress.xwd.jp/index.php 
http://wpdocs.sourceforge.jp/Update_Services
http://www.31engine.com/weblogUpdates/1.cgi
http://www.31engine.com/weblogUpdates/11.cgi
http://www.31engine.com/weblogUpdates/12.cgi
http://www.31engine.com/weblogUpdates/29.cgi
http://www.31engine.com/weblogUpdates/9.cgi 
http://www.accelanavi.com/anavi/ping.php
http://www.bing.com/ping?sitemap=
http://www.bitacoles.net/ping.php
http://www.bloglines.com/ping
http://www.blogoole.com/ping/
http://www.blogoon.net/ping/
http://www.blogroots.com/
http://www.blogroots.com/tb_populi.blog?id=1
http://www.blogshares.com/rpc.php
http://www.blogsnow.com/ping
http://www.blogstreet.com/xrbin/xmlrpc.cgi
http://www.blogstyle.jp/
http://www.catapings.com/ping.php
http://www.dontpushme.com/ft/Xmlrpc/Business.do
http://www.feedburner.com/fb/a/home
http://www.fieldsystem.ne.jp/rank/ping.asp
http://www.google.co.jp/webmasters/sitemaps/ping?sitemap=
http://www.google.com/webmasters/sitemaps/ping?sitemap=
http://www.i-learn.jp/ping/
http://www.lasermemory.com/lsrpc/ 
http://www.mod-pubsub.org/kn_apps/blogchatter/ping.php
http://www.netplaza.co.jp/ping.php
http://www.newsgator.com/ 
http://www.newsisfree.com/
http://www.newsisfree.com/xmlrpctest.php
http://www.popdex.com/
http://www.popdex.com/addsite.php
http://www.ranq.jp/xmlrpc/-/pI8t7Oy/gRrWJ/
http://www.rubhub.com/
http://www.snipsnap.org/RPC2
http://www.tagclick.net/ping 
http://www.trackbackcenter.com/
http://www.trackbackcenter.com/cgi-bin/receive.cgi
http://www.triathleteblog.net/ping3.php
http://www.weblogues.com/RPC/
http://www.xmlrpc.com/weblogsCom
http://xmlrpc.blogg.de/
http://xping.pubsub.com/ping/
https://blogsearch.google.co.jp/ping/RPC2
https://blogsearch.google.com/ping/RPC2
https://rpc.reader.livedoor.com/ping
https://rpc.weblogs.com/

事前に登録が必要な通知先

http://ping.blogmura.com/xmlrpc/<em>自分専用PING送信情報</em>
http://blog.with2.net/ping.php/<em>自分専用PING送信先情報1/自分専用PING送信先情報2</em>

MovableTypeで500エラーが出ている時

https://webllica.com/trackback-ping-500-err-on-mt/ https://webllica.com/trackback-ping-500-err-on-mt/

タイムアウトの設定は mt-config.cgi に記載すればいいみたいです。

#HTTPタイムアウト設定(120秒で設定)
HTTPTimeout 120

その他参考ページ

RSS送信フォーム

https://pingomatic.com/ https://pingomatic.com/

http://blo.gs/ping.php http://blo.gs/ping.php

PHPでPing送信するスクリプト参考

https://www.softel.co.jp/blogs/tech/archives/2418 https://www.softel.co.jp/blogs/tech/archives/2418

ブログ更新通知（PING）送信先サーバーの生存テストスクリプトの参考ページメモ

Tue, 18 May 2021 22:23:17 +0900

以下のサイトにPHPでテストできるサンプルコードがあったのでメモ。

ブログ通知先のPINGサーバーが使えるのか確認したい

MovableTypeでブログを新規投稿するすると、以下のようにPING送信エラーが良く出ます。

更新通知をする際に使ったらよいとされるPINGサーバー一覧がネット上に転がっていますが、ほとんどが使えない先でエラーが出ます。特に10以上あるようなリストは嘘が多いです。

そこで、予め『正常に稼働しているPING送信先か調べることができないかな？』と方法を探してみたら、いくつかPHPのコードがあったので、その参考ページをメモ。

参考ページ

https://www.softel.co.jp/blogs/tech/archives/2418 https://www.softel.co.jp/blogs/tech/archives/2418

https://pentan.info/php/sample/post_ping.html https://pentan.info/php/sample/post_ping.html

PINGサーバーテストページ作りました

（2021/05/26追記）PING送信先のサーバーが生きているのか簡易的に調べるツールを作成しました。

https://qwerty.work/test/ping-rss-sent-test.php

【2021年5月】ブログの更新通知PINGサーバー送信先リスト

Tue, 18 May 2021 21:15:58 +0900

ブログの更新通知先を再検証

正常だった更新通知先

ちょっと少ない気がしますが、エラーは出ませんでした。ping.feedburner.comはhttpだとエラーが出ましたが、httpsに変更するとエラーになりませんでした。

http://ping.blo.gs
http://ping.bloggers.jp/rpc/
http://ping.fc2.com/
http://ping.freeblogranking.com/xmlrpc/
http://ping.rss.drecom.jp/
http://rpc.pingomatic.com/
http://www.blogdigger.com/RPC2
http://www.blogpeople.net/ping/
http://www.blogpeople.net/servlet/weblogUpdates
https://ping.feedburner.com/

既にサービスが終了していると思われる送信先

注意事項

正常に存在する先だけど、ただタイムアウトしているだけのものも含まれている可能性があります。
httpではなく、httpsなら正常に送信できるものが含まれている可能性があります。

http://1470.net/api/ping
http://api.feedster.com/ping
http://api.moreover.com/ping
http://api.moreover.com/RPC2
http://bblog.com/ping.php
http://blo.gs/ping.php
http://blog.goo.ne.jp/XMLRPC
http://blog.rank10.net/update/ping.cgi
http://blog.with2.net/ping.php
http://blog.with2.net/ping.php/262/1107401316
http://blogbot.dk/io/xml-rpc.php
http://blogcircle.jp/ping/rcv/12918
http://blogdb.jp/xmlrpc
http://blogdigger.com/
http://blogmatcher.com/u.php
http://blog-search.net/up.php
http://blogstreet.com/
http://blogstyle.jp/xmlrpc/
http://blog-wa.sub.jp/cgi/mt/mt-tb.cgi/4
http://bulkfeeds.net/rpc
http://center.jugem.cc/?eid=108
http://cgi.f24.aaacafe.ne.jp/~shun/sb/log/eid1.html
http://coreblog.org/jp/ping/
http://coreblog.org/ping
http://coreblog.org/ping/.gs/
http://effbot.org/rpc/ping.cgi
http://hamo-search.com/ping.php
http://iblogping.underdone.net/rpc/
http://j-ranking.com/ping.cgi
http://jugem.jp/?mode=NEWENTRY
http://kutsulog.net/ping.cgi
http://mod-pubsub.org/kn_apps/blogchatt
http://myblog.blogspot.com
http://ping.bitacoras.com/
http://ping.blo.gs/
http://ping.blogfreak.jp/
http://ping.blogmura.jp/rpc /
http://ping.blogoon.net/
http://ping.blogranking.net/
http://ping.cocolog-nifty.com/xmlrpc
http://ping.dendou.jp/
http://ping.eblog.jp/
http://ping.exblog.jp/xmlrpc
http://ping.fc2.com/
http://ping.gpost.info/xmlrpc
http://ping.kutsulog.net/
http://ping.qumana.com /
http://ping.rootblog.com/rpc.php
http://ping.sitecms.net
http://ping.speenee.com/xmlrpc
http://ping.weblog.ne.jp/
http://ping.weblogalot.com/rpc.php
http://ping.weblogs.se/
http://pingoat.com/goat/RPC2
http://r.hatena.ne.jp/rpc
http://ranking.kuruten.jp/ping
http://rcs.datashed.net/RPC2 /
http://rpc.atblogs.com/
http://rpc.blogbuzzmachine.com/RPC2
http://rpc.bloghackers.net/newsoku
http://rpc.blogrolling.com/pinger/
http://rpc.icerocket.com:10080 /
http://rpc.pingomatic.com/
http://rpc.technorati.com/rpc/ping
http://rpc.technorati.jp/rpc/ping
http://rpc.weblogs.com/RPC2
http://serenebach.net/rep.cgi
http://serennz.cool.ne.jp/sblog/rep.cgi
http://services.newsgator.com/ngws/xmlrpcping.aspx
http://sra.jp/rpc.cgi
http://taichistereo.net/xmlrpc/
http://thingamablog.sourceforge.net/ping.php
http://topicexchange.com/RPC2
http://trackback.bakeinu.jp/bakeping.php
http://wordpress.xwd.jp/index.php 
http://wpdocs.sourceforge.jp/Update_Services
http://www.31engine.com/weblogUpdates/1.cgi
http://www.31engine.com/weblogUpdates/11.cgi
http://www.31engine.com/weblogUpdates/12.cgi
http://www.31engine.com/weblogUpdates/29.cgi
http://www.31engine.com/weblogUpdates/9.cgi 
http://www.accelanavi.com/anavi/ping.php
http://www.bing.com/ping?sitemap=
http://www.bitacoles.net/ping.php
http://www.bloglines.com/ping
http://www.blogoole.com/ping/
http://www.blogoon.net/ping/
http://www.blogroots.com/
http://www.blogroots.com/tb_populi.blog?id=1
http://www.blogshares.com/rpc.php
http://www.blogsnow.com/ping
http://www.blogstreet.com/xrbin/xmlrpc.cgi
http://www.blogstyle.jp/
http://www.catapings.com/ping.php
http://www.dontpushme.com/ft/Xmlrpc/Business.do
http://www.feedburner.com/fb/a/home
http://www.fieldsystem.ne.jp/rank/ping.asp
http://www.google.co.jp/webmasters/sitemaps/ping?sitemap=
http://www.google.com/webmasters/sitemaps/ping?sitemap=
http://www.i-learn.jp/ping/
http://www.lasermemory.com/lsrpc / 
http://www.mod-pubsub.org/kn_apps/blogchatter/ping.php
http://www.netplaza.co.jp/ping.php
http://www.newsgator.com/ 
http://www.newsisfree.com/
http://www.newsisfree.com/xmlrpctest.php
http://www.popdex.com/
http://www.popdex.com/addsite.php
http://www.ranq.jp/xmlrpc/-/pI8t7Oy/gRrWJ/
http://www.rubhub.com/
http://www.snipsnap.org/RPC2
http://www.tagclick.net/ping 
http://www.trackbackcenter.com/
http://www.trackbackcenter.com/cgi-bin/receive.cgi
http://www.triathleteblog.net/ping3.php
http://www.weblogues.com/RPC/
http://www.xmlrpc.com/weblogsCom
http://xmlrpc.blogg.de/
http://xping.pubsub.com/ping/
https://blogsearch.google.co.jp/ping/RPC2
https://blogsearch.google.com/ping/RPC2
https://pingoo.jp/ping/
https://rpc.reader.livedoor.com/ping
https://rpc.weblogs.com/

事前に登録が必要な通知先

http://ping.blogmura.com/xmlrpc/<em>自分専用PING送信情報</em>
http://blog.with2.net/ping.php/<em>自分専用PING送信先情報1/自分専用PING送信先情報2</em>

MovableTypeで500エラーが出ている時

https://webllica.com/trackback-ping-500-err-on-mt/ https://webllica.com/trackback-ping-500-err-on-mt/

タイムアウトの設定は mt-config.cgi に記載すればいいみたいです。

#HTTPタイムアウト設定(120秒で設定)
HTTPTimeout 120

PHPでPing送信するスクリプト例

https://www.softel.co.jp/blogs/tech/archives/2418 https://www.softel.co.jp/blogs/tech/archives/2418

PINGサーバーテストページ作りました

（2021/05/26追記）PING送信先のサーバーが生きているのか簡易的に調べるツールを作成しました。

https://qwerty.work/test/ping-rss-sent-test.php

【2020年5月】ブログの更新通知PINGサーバー送信先リスト

Sat, 23 May 2020 23:23:02 +0900

ブログの更新通知先を再検証

ネットに転がっている最新と謳っている更新通知先を使用してMovableTypeの**『ウェブサイト更新pingサービス通知』**欄に登録しているのですが、結構エラーが出ます。定期的に検証して追加・削除をしていきたいと思います。

通知先から削除した送信先

既に存在していないか、認証や登録が必要なのかわかりませんが、Movabletypeのログにエラーとして吐き出された送信先が以下となります。

http://api.my.yahoo.com/RPC2
http://blog.goo.ne.jp/XMLRPC
http://blog.with2.net/ping.php
http://blogsearch.google.co.jp/ping/RPC2
http://blogsearch.google.com/ping/RPC2
http://ping.ask.jp/xmlrpc.m
http://ping.feedburner.com/
http://rpc.reader.livedoor.com/ping
http://rpc.weblogs.com/RPC2
http://www.blogdigger.com/RPC2
http://xping.pubsub.com/ping/

今回再設定した送信先

ちょっと少ない気がしますが、エラーは出ませんでした。

http://ping.blo.gs
http://ping.dendou.jp/
http://ping.fc2.com/
http://ping.feedburner.com/
http://ping.freeblogranking.com/xmlrpc/
http://ping.rss.drecom.jp/
http://pingoo.jp/ping/
http://rpc.pingomatic.com/
http://www.blogpeople.net/ping/
http://www.blogpeople.net/servlet/weblogUpdatesll

既にサービスが終了している送信先

http://blogsearch.google.co.jp/ping/RPC2
http://blogsearch.google.com/
http://ping.blogranking.net/
http://ping.dendou.jp/
http://ping.rss.drecom.jp/
http://serenebach.net/rep.cgi
http://services.newsgator.com/ngws/xmlrpcping.aspx

https://muryoblog.cinemarev.net/entry/ping.html https://muryoblog.cinemarev.net/entry/ping.html

MovableTypeで500エラーが出ている時

https://webllica.com/trackback-ping-500-err-on-mt/ https://webllica.com/trackback-ping-500-err-on-mt/

タイムアウトの設定は mt-config.cgi に記載すればいいみたいです。

#HTTPタイムアウト設定(120秒で設定)
HTTPTimeout 120

PHPでPing送信するスクリプト例

https://www.softel.co.jp/blogs/tech/archives/2418 https://www.softel.co.jp/blogs/tech/archives/2418

PINGサーバーテストページ作りました

（2021/05/26追記）PING送信先のサーバーが生きているのか簡易的に調べるツールを作成しました。

https://qwerty.work/test/ping-rss-sent-test.php

AdSnseの広告に出る黄色の背景を消すCSS（スタイルシート）

Sat, 23 May 2020 15:02:46 +0900

余計な黄色の背景や余白を消す

AdSense広告を設置したページを開くと、広告が表示される部分に広告は表示されていないけど、全面に黄色い背景が表示されていたり、広告は表示されているけど、黄色い部分が一部表示されていたります。

これをそうにかできないかな？と方法を探したところ、消すというよりCSS（スタイルシート）で透過せることで解決できることがわかりました。

CSS（スタイルシート）例

以下の1行を既存のスタイルシートか、AdSenseの広告コードに加えるだけです。このコードは**『透明』**を意味するスタイルシートのコードです。これでAdSense広告の背景を透過させることができます。

background: transparent;

AdSenseの広告コードに加えた例

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
 <ins class="adsbygoogle"
 style="display:block; text-align:center; <span class="brush:css;">background: transparent;</span>"
 data-ad-layout="in-article"
 data-ad-format="fluid"
 data-ad-client="ca-pub-XXXXXXXXXXXXXXXXX"
 data-ad-slot="XXXXXXXXXXX"></ins>
<script>
 (adsbygoogle = window.adsbygoogle || []).push({});
 </script>

スタイルシートに加えた例

複数のAdSense広告があり、全部ページに共通のCSSで適用する場合は、以下の1行を加えればOKです。

.adsbygoogle { background: transparent;}

黄色の部分が消えた！

これで黄色い背景部分が消えました。ただ、背景を透明（透過）にするだけなので、広告部分を縮める訳ではないので余白部分ができます。

YoutTubeの埋め込みIFLAMEをレスポンシブ対応するCSS

Sat, 23 May 2020 13:56:06 +0900

モバイルページではYouTubeの画面がはみ出る

最近はページにYouTubeの動画を埋め込むことが増えてきました。スマホでそのページを見たときに動画の画面がはみ出ていたので自動的に幅に合わせて表示を変えてくれるレスポンシブに対応する方法を探しました。CSS（スタイルシート）で簡単にできることがわかったのでメモ。

まずは埋め込みタグをで囲む

YouTubeの埋め込みタグを以下のように``で囲みます。

ついでにloading="lazy"を加えて遅延表示対応しています。

<div class="youtube">
<iframe width="560" height="315" src="//www.youtube.com/embed/j1fyn12NH5s" frameborder="0" allowfullscreen loading="lazy"></iframe>
</div>

ちなみに以下の動画は随分前の森永ミルクキャラメルのCMで最後に小さな女の子の笑顔がたまらなく可愛くて、こちらまで幸せな気分になってしまうお気に入りの動画です。

予備動画 1 2

レスポンシブ対応するCSS

最近のaspect-ratioを使用する方法

以前はpadding-top: 56.25%;を使って16:9の縦横比（アスペクト比）に合わせてレスポンシブ対応していましたが、ここ最近ではaspect-ratioがほとんどのモダンブラウズで使えるようになり、簡単にできるようになったみたいです。

ソース例

.youtube {
    aspect-ratio: 16 / 9;
}
.youtube iframe {
    width: 100%;
    height: 100%;
}

または

iframe {
  aspect-ratio: 16/9;
  width: 100%;
  height: 100%;
}

後述の従来のposition: relative;とposition: absolute;とpadding-top: 56.25%;を組合せて使うより簡単でいいですね。

参考サイト

aspect-ratioとobject-fit: cover;について、以下のページが参考になりました。

https://moshashugyo.com/media/aspect-ratio https://moshashugyo.com/media/aspect-ratio

https://coliss.com/articles/build-websites/operation/css/about-aspect-ratio-in-css.html https://coliss.com/articles/build-websites/operation/css/about-aspect-ratio-in-css.html

ブラウザの対応状況

https://caniuse.com/mdn-css_properties_aspect-ratio https://caniuse.com/mdn-css_properties_aspect-ratio

https://caniuse.com/?search=object-fit https://caniuse.com/?search=object-fit

従来のpadding-top: 56.25%;を使用する方法

You-Tubeの埋め込みのサイズでよくあるwidth="560" height="315"の指定があってもページ幅最大に動画を表示するaspect-ratioを使わない従来の方法。PCの場合、サイトの作りによっては幅いっぱいに大きく表示されるようになります。スマホなどは適度な大きさで画面幅に合わせたレスポンシブ表示されます。aspect-ratioを使用するより、コードが多いのですが、IEなど古いブラウザ対応が必要な場合はこちらを使うことが必要になります。

ソース例

.youtube {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
  }
.youtube iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important;
  }

4:3の場合 padding-bottom: 75%;
16:9の場合 padding-bottom: 56.25%;
padding-bottomはpadding-topでも可。

padding-bottom: 56.25%;は16:9の幅16を100％にしたときの高さ9がナンバーセントの比率かを意味するかを意味しています。以下のページが参考になります。これを入れないとwidth: 100%;だけだと高さは変わらず、横だけがレスポンシブになってしまいます。これを入れることにより、縦横比を維持した状態でレスポンシブ表示する対応方法となっています。

参考ページ

https://h2ham.net/youtube-responsive/ https://h2ham.net/youtube-responsive/

従来の方法でスマホ用にちょっと手を加えた例

スマホなどのモバイルページではレスポンシブ表示して、PCなどは大きくなりすぎないように、埋め込みコードの指定通りwidth="560" height="315"で表示する場合の例です。私の場合、埋め込みコードの幅560ピクセルに合わせて、最大559ピクセルまでの解像度でアクセスした場合はレスポンシブ表示するようにしました。

@media screen and (max-width:559px){
   .youtube {
	   position: relative;
	   width: 100%;
	   padding-top: 56.25%;
	   margin: 0.5em 0 1em;
   }
   .youtube iframe {
	   position: absolute;
	   top: 0;
	   right: 0;
	   width: 100% !important;
	   height: 100% !important;
   }
}

動画を連続して埋め込んだときのためにmargin: 0.5em 0 1em;を加えて、上下に余白を入れて動画同士の間に隙間を作るようにしました。

試しにこのページを560px以下の解像度のスマホで見ていただければYouTube動画が幅いっぱいに収まっているはずです。

その他参考ページ

https://design.webclips.jp/youtube-movie-size/ https://design.webclips.jp/youtube-movie-size/

https://qiita.com/0084ken/items/e7d35d2a8eb507f4d59c https://qiita.com/0084ken/items/e7d35d2a8eb507f4d59c

Chromium系のブラウザなら画像・Youtube動画の遅延読み込みができるらしい

Thu, 14 May 2020 22:45:45 +0900

loading=“lazy"の追加で遅延読み込みができる？！

WEBページの表示を高速するための手段としてよく使われる遅延表示（Lazyload）ですが、以下のサイトの情報によると、最近のGoogle Chromeや新しいEdgeなどのChromium系のブラウザならJavascriptを使わなくてもやYouTube動画の埋め込みコードに使われているにloading="lazy"を追加するだけ遅延表示ができるらいです。Firefoxも同じ使い方で遅延表示ができるみたいです。

https://magnets.jp/web_design/11505/ https://magnets.jp/web_design/11505/

「data-vocabulary.org schema deprecated」の警告が出たときの対処方法

Sun, 26 Jan 2020 18:49:40 +0900

パンくずリストが原因で警告が出た

Google Search Consol にブログのほぼ全ページ数に該当する数で**「data-vocabulary.org schema deprecated」という警告が出ました。訳すと「data-vocabulary.orgは非推奨のスキーマ」**。今までこんな数の警告が出たことなかったので、びっくりして検索してみると、ブログのパンくずリストの部分にitemtype="http://data-vocabulary.org/Breadcrumb"というのを使っていたのがいけなかったみたいです。

以下の参考サイトによると、Google は2020年4月6日以降、data-vocabulary.orgを検索結果のリッチリザルトの対象外にすることを決めたそうで、これによる警告だった模様。

https://marie-web.design/blog/data-vocabulary-org/ https://marie-web.design/blog/data-vocabulary-org/

data-vocabulary.org から schema.org に変更が必要

この警告に対処するためにはdata-vocabulary.orgをschema.orgに変更すればいいのですが、URLだけ変えればいいという訳ではなく、作法があるようです。

https://developers.google.com/search/docs/data-types/breadcrumb https://developers.google.com/search/docs/data-types/breadcrumb

ブログは現在、MovableTypeを使用しているので、以下を参考にテンプレートの修正を行いました。

https://qiita.com/b_a_a_d_o/items/eddd25a4a7c68de5a4f9 https://qiita.com/b_a_a_d_o/items/eddd25a4a7c68de5a4f9

修正後のテストはOKでした

修正する前はリッチリザルトテストページでテストしたら「一部のマークアップがリッチリザルトの対象ではありません」と表示されていました。

修正後は無事**「このページはリッチリザルトの対象です」**と表示されました。

https://search.google.com/test/rich-results?hl=ja https://search.google.com/test/rich-results?hl=ja

CloudflareがWEBサイトの表示が高速化されるプロトコル「HTTP/3」に対応した件

Mon, 07 Oct 2019 22:58:05 +0900

HTTP/3のサポート開始したCloudflare

2019/09/26CDNサービスを提供しているCloudflareがHTTP/2+QUICおよびHTTP/3のサポートを使用可能にしたそうです。WEBサイトの高速化を常に意識している自分としてはとても気になります。

https://blog.cloudflare.com/jp/http3-the-past-present-and-future-jp/ https://blog.cloudflare.com/jp/http3-the-past-present-and-future-jp/

https://blog.cloudflare.com/the-quicening/ https://blog.cloudflare.com/the-quicening/

現時点では本サイトも高速化を目的にCloudflareを使用しており、レンタルサーバーもスピードを売りにしていてHTTP/3にも対応している**『Mixhost』**を使用していますので、ダブルで対応していることは関係ないかもしれませんが更に高速化できるのではないかと期待しています。

HTTP/3とは？

https://ja.wikipedia.org/wiki/HTTP/3 https://ja.wikipedia.org/wiki/HTTP/3

https://www.infoq.com/jp/news/2020/03/http-3-status/ https://www.infoq.com/jp/news/2020/03/http-3-status/

他のニュース参考記事

https://headlines.yahoo.co.jp/hl?a=20190927-35143184-cnetj-sci https://headlines.yahoo.co.jp/hl?a=20190927-35143184-cnetj-sci

https://news.infoseek.co.jp/article/itmedia_news_20190927078/ https://news.infoseek.co.jp/article/itmedia_news_20190927078/

https://japan.cnet.com/article/35143184/ https://japan.cnet.com/article/35143184/

https://www.itmedia.co.jp/news/articles/1909/27/news078.html https://www.itmedia.co.jp/news/articles/1909/27/news078.html

https://www.atmarkit.co.jp/ait/articles/1909/30/news046.html https://www.atmarkit.co.jp/ait/articles/1909/30/news046.html

CloudflareでHTTP/3を有効にする方法

https://developers.cloudflare.com/http3/intro https://developers.cloudflare.com/http3/intro

Chrome CanaryでHTTP/3を試す方法

HTTP/3でWEBページが閲覧できているか試すにはブラウザがHTTP/3に対応していなければなりません。現時点でHTTP/3に対応したChrome Canaryをインストーして試すことができます。

Windows 10 64bit版の Chrome Canary をダウンロード
インストールして以下のパスでChromeを起動

"C:\Users\Name\AppData\Local\Google\Chrome SxS\Application\chrome.exe" --enable-quic --quic-version=h3-23

  ※Nameの部分はユーザ名に入れ替えてください。

アドレスバーに以下を入力してEnter

chrome://flags/#enable-quic

「Experimental QUIC protocol」 をEnable（有効）にする

※以下のサイトでは「support for HTTP/3 (QUIC)」とありましたが、そのようなこ項目は見当たりませんでした。

- F12を押して適当なサイトを表示したときにNetworkタブを開き、Protocolの列を表示したときに **http/2+quic/99** の表示があれば **HTTP/3** でアクセスできています。

https://community.cloudflare.com/t/http-3-quic-not-detectable-in-chrome-canary-with-enable-quic-quic-version-h3-23/117812 https://community.cloudflare.com/t/http-3-quic-not-detectable-in-chrome-canary-with-enable-quic-quic-version-h3-23/117812

【追記】HTTP/3 と HTTP/2 のパフォーマンスの比較

CloudFlareのブログにて2020/04/14時点でのパフォーマンスの比較が掲載されていました。

https://blog.cloudflare.com/http-3-vs-http-2/ https://blog.cloudflare.com/http-3-vs-http-2/

またClodflareに限らずWEB全体でHTTP/3のシェアも増えてきているようです。

https://news.mynavi.jp/article/20200609-1051017/ https://news.mynavi.jp/article/20200609-1051017/

HTTP/3の対応をオンライン上で確認できるサービス

WEBサイトがHTTP/3に対応しているかURLを入力してチェックできるサイトです。

https://www.http3check.net/ https://www.http3check.net/

https://gf.dev/http3-test https://gf.dev/http3-test

Font-Awesome 5を使うときのPageSpeed Insights「ウェブフォント読み込み中の全テキストの表示」対策

Sun, 03 Mar 2019 22:06:49 +0900

Pagespeed Insightsでフォントの代替表示を求められた

ページ装飾のアクセントにアイコンフォントとしてFont-Awesome 5 のフォントをCDN経由で読み込んで使用しているのですが、Pagespeed Insightsでページの分析をした際、以下のような改善案が表示されました。

ウェブフォント読み込み中の全テキストの表示

フォント表示の CSS 機能を使用して、ウェブフォントの読み込み中にユーザーがテキストを見られるようにしてください。この改善案に対して、どうのような対策を採ればいいのか調べたとことCSSに**@font-face**の設定を加えればいいみたいなので、やってみたことをメモ。

３つのフォントファイルに対して対策が必要

Font-Awesome 5（Free）を以下のコードで読み込んでいるのですが、ページを表示する際に以下の3つのフォントファイルがFont-Awesome 5のスタイルシートから読み込まれます。その３つのフォントに対して代替表示の対策をしなければなりません。

Font-Awesome 5（Free）の読み込みコード

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/css/all.min.css">

上記のスタイルシートから読み込まれるフォントファイル

この３つに対して対策が必要。

fa-brands-400.woff2
fa-regular-400.woff2
fa-solid-900.woff2

スタイルシートに@font-faceを追加して解決

ページのスタイルシートに以下のコードを追記することで解決できました。@font-faceに３つのフォントファイルを指定。

@font-face {
     font-family: 'Font Awesome 5 Brands';
     font-style: normal;
     font-weight: 400;
     src: url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/webfonts/fa-brands-400.woff2") format("woff2");
     font-display: swap;
 }

 @font-face {
     font-family: 'Font Awesome 5 Free';
     font-style: normal;
     font-weight: 900;
     src:url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/webfonts/fa-regular-400.woff2") format("woff2"),
         url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/webfonts/fa-solid-900.woff2") format("woff2");
     font-display: swap;
 }

診断に合格

スタイルシートに**@font-faceを加えた後に、再度Pagespeed Insightsでページを分析したら無事合格しました。「診断」の欄から「合格した監査」**の欄に移動していました。

@font-faceでFont-Awesome 5を指定するときはfont-weightに注意

FontAwesome5を使うときは必ず font-weight:400; または font-weight:900; を指定しないとうまくいきません。font-weight:normal;とか使うとダメです。

また、ブラウザによっては**@font-face**に対応していないブラウザがあります。

https://caniuse.com/#search=font-display https://caniuse.com/#search=font-display

ついでに「Preload」や「Prefetch」で高速化

対策ついでに以下のコードを～間に入れておくことでページを読み込む間（レンダリングが開始される前）にWEBフォントを事前に読み込んでおくことができます。多少の高速化が図れます。

Preloadだけでもいいのですが、Preloadは一部のブラウザが対応していないので、幅広く対応しているPrefetchと併用しています。

<link rel="preload prefetch" as="font" type="font/woff2" href="//cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/webfonts/fa-brands-400.woff2" crossorigin>
<link rel="preload prefetch" as="font" type="font/woff2" href="//cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/webfonts/fa-regular-400.woff2" crossorigin>
<link rel="preload prefetch" as="font" type="font/woff2" href="//cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/webfonts/fa-solid-900.woff2" crossorigin>

参考にしたページ

https://pavelmakhov.com/2018/04/font-awesome-5-in-gwt/ https://pavelmakhov.com/2018/04/font-awesome-5-in-gwt/

https://coliss.com/articles/build-websites/operation/css/about-font-display.html https://coliss.com/articles/build-websites/operation/css/about-font-display.html

https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization?hl=ja https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization?hl=ja

https://qiita.com/oreo/items/2e82bfeb42e351557c3c https://qiita.com/oreo/items/2e82bfeb42e351557c3c

後日再発

解決したつもりが後日またPageSpeed Insightsで「ウェブフォント読み込み中の全テキストの表示」について警告が出ました。

all.cssを改造して読込

Font-Awesome 5 の** all.css** をCDNからの読み込みではなくローカルに置き、一部を以下のように変更しました。all.cssの最下位部分にあります。2パターンで試したところ、どちらでも警告が出ないようになりました。

パターン1 font-display: Auto;をswapに変更し**、意味はわかりませんがlocal("@")**を挿入し、urlはCDNのパスに変更してしています。

@font-face {
   font-family: 'Font Awesome 5 Brands';
   font-style: normal;
   font-weight: normal;
   font-display: swap;
   src: url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-brands-400.eot");
   src: local("@"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-brands-400.woff2") format("woff2"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-brands-400.woff") format("woff"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-brands-400.ttf") format("truetype"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-brands-400.svg#fontawesome") format("svg"); }
   
.fab {
   font-family: 'Font Awesome 5 Brands'; }
   @font-face {
   font-family: 'Font Awesome 5 Free';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
   src: url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-regular-400.eot");
   src: local("@"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-regular-400.woff2") format("woff2"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-regular-400.woff") format("woff"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-regular-400.ttf") format("truetype"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-regular-400.svg#fontawesome") format("svg"); }
   
.far {
   font-family: 'Font Awesome 5 Free';
   font-weight: 400; }
   @font-face {
   font-family: 'Font Awesome 5 Free';
   font-style: normal;
   font-weight: 900;
   font-display: swap;
   src: url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-solid-900.eot");
   src: local("@"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-solid-900.woff2") format("woff2"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-solid-900.woff") format("woff"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-solid-900.ttf") format("truetype"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-solid-900.svg#fontawesome") format("svg"); }

パターン2 パターン1との違いはlocalのパスの部分です。

@font-face {
 font-family: 'Font Awesome 5 Brands';
 font-style: normal;
 font-weight: normal;
 font-display: swap;
 src: url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-brands-400.eot");
 src: local("/webfont/fontawesome-free-5.11.2/package/webfonts/fa-brands-400.woff2") , url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-brands-400.woff2") format("woff2"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-brands-400.woff") format("woff"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-brands-400.ttf") format("truetype"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-brands-400.svg#fontawesome") format("svg"); }
 
.fab {
   font-family: 'Font Awesome 5 Brands'; }
   @font-face {
   font-family: 'Font Awesome 5 Free';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
   src: url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-regular-400.eot");
   src: local("/webfont/fontawesome-free-5.11.2/package/webfonts/fa-regular-400.woff2"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-regular-400.woff2") format("woff2"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-regular-400.woff") format("woff"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-regular-400.ttf") format("truetype"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-regular-400.svg#fontawesome") format("svg"); }
   
.far {
   font-family: 'Font Awesome 5 Free';
   font-weight: 400; }
   @font-face {
   font-family: 'Font Awesome 5 Free';
   font-style: normal;
   font-weight: 900;
   font-display: swap;
   src: url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-solid-900.eot");
   src: local("/webfont/fontawesome-free-5.11.2/package/webfonts/fa-solid-900.woff2"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-solid-900.woff2") format("woff2"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-solid-900.woff") format("woff"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-solid-900.ttf") format("truetype"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-solid-900.svg#fontawesome") format("svg"); }

ブログの目次をアンカーリンク付きで自動作成して表示するJS「TOC.js」

Mon, 25 Feb 2019 21:35:32 +0900

最近よく見かけるページの「目次」

最近やたらといろんなブログで「目次」を設置しているのを目にします。ページの要約としてパッとわかりやすいと思うのですが、ユーザービリティ向上のためだけではこのブログに設置しようとは思わないのですが、以下のページでSEO対策として有効な手段っぽいことがわかったので、このブログにも設置してみることにしました。

SEO対策としての目次についての参考ページ

https://seo-lpo-consultant.com/google-search-result-move/ https://seo-lpo-consultant.com/google-search-result-move/

https://macoblog.com/mokuji-seo-kouka/ https://macoblog.com/mokuji-seo-kouka/

「TOC.js」なら簡単に目次を設置できる

「目次」は英語で「Table of contents」と書くので「TOC」。

WordPressなら「Table of Contents Plus」というプラグインがあるみたいですが、MovableTypeやその他のCMSでプラインが見当たらない場合に**「toc.js」**を使うのがいいのではないかと思います。

TOC.jsはjQueryに依存するJavascriptで、これを設置すればページ内のやタグの文字列を読み取り、簡単にアンカーリンク付きの目次を表示してくれます。目次をクリックするとちゃんとその記事の部分にジャンプしてくれます。

また、ブログの記事内のみの指定したセクションのタグを対象にするように、classやidで指定したり、#### まで複数のを指定すると、段落を付けてリスト表示してくれたりと、小回りが利きます。

作者の公開ページ

http://projects.jga.me/toc/#toc6 http://projects.jga.me/toc/#toc6

「toc.js」または「toc.min.js」をダウンロード

まずは必要な「toc.js」を以下ページ内のReleaseページからダウンロードします。

https://github.com/jgallen23/toc https://github.com/jgallen23/toc

現時点での最新バージョンは1.4.1なのですが、このバージョンのZIPファイルには「toc.js」または「toc.min.js」が入っていませんので注意してください。

では、どこにあるかというと0.3.2のZIPの中にあります。

https://github.com/jgallen23/toc/releases?after=1.0.0-beta.1 https://github.com/jgallen23/toc/releases?after=1.0.0-beta.1

ダウンロードしたZIPを解凍したdistフォルダを開くと**「toc.js」とコード圧縮版の「toc.min.js」**が出てきます。これを任意のディレクトリにアップロードして使います。

目次の自動表示を実現するための手順

toc.jsで目次を自動作成して表示するためには以下の準備が必要です。

jQueryの読み込み
toc.jsの読み込み
toc.jsで出力する目次のセッティング
目次を表示する部分にタグを設置
目次を整形するCSS

jQueryとtoc.jsと目次のセッティング

私の場合、以下のソースをの直前あたりに組み込みました。

<script src="//cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js" defer></script>
<script src="/js/toc-0.3.2/dist/toc.min.js" defer></script>
<script defer>
window.addEventListener( 'load', function(){
    jQuery('#toc').toc({
          'container': 'section.entry-content', /* 見出しを取得するエリアを指定 */
          'selectors': 'h2, h3', /* 目次として表示したい見出しの指定 */
          'anchorName': function(i, heading, prefix) { //アンカーネームのカスタマイズ
          return prefix+i;
          },
    });
}, false);
</script>

Defer対応で**ソースをwindow.addEventListener( ’load’, function(){…}, false);で囲む JSを非同期実行させるためにDeferを使っているのですが、Deferを使うとChromeはtoc.jsのサンプルソースで目次を表示できましたが、EdgeとIE11（Internet Explorer 11）では表示できなかったので、Defer対策としてwindow.addEventListener( ’load’, function(){…}, false);**で設定のソースを囲っています。私の環境ではこれで表示できました。

‘container’でブログ記事の部分を指定このブログの記事を表示する部分は****で囲われているので、**‘container’の部分で ‘section.entry-content’**を指定しています。設置するブログに合わせてここを変えてください。

‘selectors’で,### を対象にするブログ記事内のタグを文字列を対象に目次に出力したいときは、**‘selectors’の部分に‘h2, h3’**を指定します。もっと詳しくh4,h5も加えてみましたが、h2～h5まで指定すると目次が縦長でウザイことになったので、私の場合h2,h3のみに絞りました。

‘anchorName’の部分で日本語環境時の不具合を回避 **‘anchorName’**の部分を指定しないと、目次のアンカーリンクが正常に割り当てられません。その不具合を回避するために、上記のような指定をしています。これを指定すると正常にアンカーリンクが割り当てられ機能します。

これ以外に指定できるオプションの参考

英語ですが公式ページの「Options」に説明があります。

http://projects.jga.me/toc/#toc4 http://projects.jga.me/toc/#toc4

日本語で解説した参考ページはこちら↓

https://nelog.jp/jquery-table-of-contents-plugin#toc7 https://nelog.jp/jquery-table-of-contents-plugin#toc7

目次を表示したい部分に設置するタグ

<div id="toc"></div>

このタグを目次を表示したいところに設置すれば、ここに目次が表示されます。

目次用のスタールシート（CSS）

公式ページのサンプルのスタイルシートは目次を画面左に表示しますが、私は記事内に表示したかったので、以下のコードは公式サンプルのコードの不要な部分をコメントアウトしています。また、モバイル表示では目次が邪魔になるので**@media screen**で幅が639pxの時は非表示にするようにしました。

#toc {
     /*top: 0px;
     left: 0px;
     height: 100%;
     position: fixed;
     background: #333;
     box-shadow: inset -5px 0 5px 0px #000;
     width: 150px;
     padding-top: 20px;
     color: #fff;*/
  }
 
 #toc ul {
   margin: 0;
   padding: 0;
   list-style: none;
   }
   
#toc li {
   padding: 5px 10px;
   }
   
#toc a {
   /*color: #fff;*/
   text-decoration: none;
   display: block;
   }
   
#toc .toc-h2 {
   padding-left: 10px;
   }
   
#toc .toc-h3 {
   padding-left: 30px;
   }
   
#toc .toc-h4 {
   padding-left: 50px;
   }
   
#toc .toc-active {
   /*background: #336699;
   box-shadow: inset -5px 0px 10px -5px #000;*/
   }

@media screen and (max-width:639px){
   section.mokuji, #toc {
   	display: none;
   	}
   }

手順に関する参考ページ

https://nelog.jp/jquery-table-of-contents-plugin https://nelog.jp/jquery-table-of-contents-plugin

https://haniwaman.com/toc/ https://haniwaman.com/toc/

その他の参考ページ

将来的に約に立ちそうなのでメモ。

WordPressでプラグインを使わずPHPで目次を作る参考ページ

https://www.iscle.com/web-it/wp/page-mokuji.html https://www.iscle.com/web-it/wp/page-mokuji.html

jQueryに依存せず目次を作るJSの参考ページ

https://imatomix.com/imatomix/notes/1509715980 https://imatomix.com/imatomix/notes/1509715980

目次を自動生成してくれるMovableTypeのプラグイン

jQueryに依存しているプラグインで、toc.jsと同じ感じ。

http://www.koikikukan.com/archives/2014/09/01-015555.php http://www.koikikukan.com/archives/2014/09/01-015555.php

hタグに自動でIDを割り当ててくれるMovableTypeのプラグイン

IDを割り振るだけで目次を生成してくれるわけではない。

https://github.com/onagatani/mt-plugin-GoogleSection/blob/master/README.md https://github.com/onagatani/mt-plugin-GoogleSection/blob/master/README.md

AMPページでCDN経由でFont-Awesomeを読み込むときはホワイトリストに気を付けて！

Wed, 20 Feb 2019 00:24:47 +0900

Googleの検索結果からAMPページが消えた

AMPページでFont-Awesomeのウェブフォントを使うことができるということで、埋め込んでみたところ、テストページではアイコンが正常に表示されたので、公開ページに適用したところ、数日後にGoogleの検索結果からAMPマーク**が表示されなくなりました。

なぜだろう？と、Google Search Consoleを久々に開いてみたところ、AMPページに問題があるというエラーの通知がありました。

「Google検索結果には表示されません」と、無効なAMPページとされていました。

原因はCDN

AMPページでFont-Awesomeを使うために、以下のようなコードでCDN経由のCSSを読み込んでいました。これがいけなかったみたいです。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/css/all.min.css">

これの何がいけないかというと、cdn.jsdelivr.netから読み込んでいるということ。本家のuse.fontawesome.comよりもcdn.jsdelivr.netから読み込む方が速いかな？と思って使ったのがいけなかったみたいです。

PC用のページはこれで読み込んでいますが、AMPページではこれが警告の原因となり、Googleの検索結果にAMPマークが表示されなくなりました。

使えるCDNと使えないCDNがある

以下のページを見ると、- タグでFont-Awesomeを読み込む場合はAMPプロジェクトのホワイトリストに登録されたCDNでないと使えないみたいです。

https://www.ampproject.org/ja/docs/design/responsive/custom_fonts https://www.ampproject.org/ja/docs/design/responsive/custom_fonts

スタイルシートで**@font-face**を使えば特に読込先に制限なくWEBフォントを読み込むことができるみたいです。

タグで読込可能なCDN

以下のいずれかのCDNからの読み込みであればタグで読み込んでもエラーが出ずに使えるようです。

https://maxcdn.bootstrapcdn.com https://maxcdn.bootstrapcdn.com

https://use.fontawesome.com

本家から読み込んで解決

以下のページにあるFont-AwesomeのCDNのコードから読込をすることで無事解決できました。

https://fontawesome.com/start https://fontawesome.com/start

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">

Google Search Consoleで再検査したところ有効なAMPページになりました。

サイト表示の高速化にDNS-Prefetch,Preconnect,Prefetch,Prerender,Preloadを試す

Sun, 03 Feb 2019 22:00:00 +0900

サイトの表示が遅いので、表示スピードを高速化する試行錯誤したり、他に方法はないかと調べていたら**「Resource Hints（リソースヒント）」**というのにたどり着きました。

Resource Hintsとは

DNS-Prefetch　…　DNSルックアップで名前解決を事前に行う
Preconnect　…　DNSルックアップと同時に事前接続をしておく
Prefetch　…　JSやCSSを先読みして取得（Preloadというのもある）
Prerender　…　次に表示しそうなページを事前にレンダリングしておく

というものらしく以下のように**～の間に書いておき、ページにアクセスがあったらページの表示と同時にAdSenseとかZenback**とか外部サイトの情報を事前に取得しておき、表示するときは予め取得しているので表示がサクッと済むというもののようです。

これを使えば速くなる？

実際に使ってみて結論から言うと、効果は大なり小なりありました。特にPrefetchはFont-Aewsomeのフォントや**、jQuery.js**、AdSense、Zenbackなどを使っている場合、あらかじめ使用する静的なJSやCSSがわかっている場合に限られますが、ページのHTMLを読み込んでいる間にそれらを事前に読み込むので、GTmetrixのWarerfallやChromeのNetworkタブでダウンロードの流れを見ると、同時並行でダウンロードしているのがわかります。

Resource Hints 使用前

GTmetrixのWarerfall

Resource Hints 使用後

GTmetrixのWarerfall

DNS-PrefetchとPreconnectもDNSルックアップやConnectingを事前に終わらせることができるので、指定したコンテンツの読み込み時間は0msにすることができました。

Resource Hintsに関する参考ページ

https://qiita.com/ryo_hisano/items/e525616e5026b015aafe https://qiita.com/ryo_hisano/items/e525616e5026b015aafe

https://blog.jxck.io/entries/2016-02-11/resource-hints.html https://blog.jxck.io/entries/2016-02-11/resource-hints.html

https://www.keycdn.com/blog/resource-hints https://www.keycdn.com/blog/resource-hints

https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf

https://developers.google.com/web/tools/lighthouse/audits/preload https://developers.google.com/web/tools/lighthouse/audits/preload

Prefetchに関する参考ページ

https://qiita.com/ShinyaOkazawa/items/f95788c67114d0360e40 https://qiita.com/ShinyaOkazawa/items/f95788c67114d0360e40

https://qiita.com/ryouhei156/items/c44a5e2f89fcffe0bd34 https://qiita.com/ryouhei156/items/c44a5e2f89fcffe0bd34

Preloadというのもある

Preloadは事前取得という意味ではPrefetchと同様の機能ですが違いがあります。これがまたスゴイ機能で対応しているブラウザだとかなり威力を発揮します。

Prefetch　…　ナビゲーションの前に動作する。
Preload　…　ナビゲーションが行われた後に動作する。

Preloadに関する参考ページ

https://blog.jxck.io/entries/2016-03-04/preload.html https://blog.jxck.io/entries/2016-03-04/preload.html

ブラウザの対応状況

投稿時点の主なブラウザの対応状況。この時点での最新バージョンによるものです。

  Resource Hints
  IE
  Edge
  Chrome
  Firefox
  Opera
  Safari
  Safari(iOS)
  Android
   




  DNS-Prefetch
  〇
  〇
  〇
  〇
  〇
  〇
  不明
  不明
  [参照](https://caniuse.com/#search=DNS-Prefetch)


  Preconnect
  ×
  △
  〇
  〇
  〇
  〇
  〇
  〇
  [参照](https://caniuse.com/#search=Preconnect)


  Prefetch
  〇
  〇
  〇
  〇
  〇
  ×
  ×
  〇
  [参照](https://caniuse.com/#search=Prefetch)


  Prerender
  〇
  ×
  〇
  ×
  〇
  ×
  ×
  ×
  [参照](https://caniuse.com/#search=Prerender)


  Preload
  ×
  △
  〇
  〇
  〇
  〇
  〇
  〇
  [参照](https://caniuse.com/#search=preload)

上記の対応状況は以下のページで確認しています。「参照」をクリックすると各Resource Hintsの対応状況が見れます。

https://caniuse.com/#search=DNS-Prefetch https://caniuse.com/#search=DNS-Prefetch

多用しすぎると評価が悪くなる？

高速化できる反面、多用しすぎるとスコアが悪くなりました。どのページにも共通して使用しているCSSやJSとJPEG・PNG・GIFなどの画像もPrefetchで先読みすると、速度は速くなってもスコアが悪くなりました。

たまたまかもしれませんが、GTmetrixで**「A」または「B」だった評価が「C」とか「D」に…。Google Speed Insightでも「97」から「65」**に…。

Resource Hints 使用前

Resource Hints 使用後

とにかく先読みできるものは全部先読みするようしたらスコアが悪くなりました。AdsenseやZenbackなどを使っているとあらゆるものが降ってくるので、そのせいかもしれませんが…。

よって、多用するのはDNS-PrefetchとPrecennectくらいにして、Prefetchは最低限のものだけの使用にした方がいいと思われます。それでもページ表示のスピードはあまり差がありませんでした。

スコアが悪くなった時のソース

とにかく他のページと共通するものは全部詰め込みました。jQuery、Font-Awesome、AdSense、Zenbackとか、スタイルシートも画像も。

<meta http-equiv="x-dns-prefetch-control" content="on">
  <link rel="preconnect dns-prefetch" href="//qwerty.work">
  <link rel="preconnect dns-prefetch" href="//ajax.cloudflare.com">
  <link rel="preconnect dns-prefetch" href="//cdnjs.cloudflare.com">
  <link rel="preconnect dns-prefetch" href="//cdn.jsdelivr.net">
  <link rel="preconnect dns-prefetch" href="//pagead2.googlesyndication.com" >
  <link rel="preconnect dns-prefetch" href="//cse.google.com">
  <link rel="preconnect dns-prefetch" href="//www.google-analytics.com">
  <link rel="preconnect dns-prefetch" href="//w.zenback.jp">
  <link rel="preconnect dns-prefetch" href="//graph.facebook.com">
  <link rel="preconnect dns-prefetch" href="//b.haena.ne.jp">
  <link rel="preconnect dns-prefetch" href="//jsoon.digitiminimi.com">
  <link rel="preconnect dns-prefetch" href="//widgets.getpocket.com">
<br>
  <link rel="dns-prefetch" href="//adservice.google.com">
  <link rel="dns-prefetch" href="//googleads.g.doubleclick.net">
  <link rel="dns-prefetch" href="//www.google.com">
  <link rel="dns-prefetch" href="//www.googleapis.com">
  <link rel="dns-prefetch" href="//www.googletagservices.com">
  <link rel="dns-prefetch" href="//csi.gstatic.com">
  <link rel="dns-prefetch" href="//s.wordpress.com"><br>
  <link rel="preload prefetch" as="style" href="//cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/css/all.min.css">
  <link rel="preload prefetch" as="font" type="font/woff2" href="//cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/webfonts/fa-brands-400.woff2" crossorigin>
  <link rel="preload prefetch" as="font" type="font/woff2" href="//cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/webfonts/fa-regular-400.woff2" crossorigin>
  <link rel="preload prefetch" as="font" type="font/woff2" href="//cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/webfonts/fa-solid-900.woff2" crossorigin>
  <link rel="preload prefetch" as="script" href="//w.zenback.jp/_p/js/jquery.min.js">
  <link rel="preload prefetch" as="script" href="/include/function/fetch_sns_count.js"><br>
  <link rel="prefetch" as="style" href="/blog/styles.css">
  <link rel="prefetch" as="style" href="//cdn.jsdelivr.net/npm/purecss@1.0.0/build/tables-min.css">
  <link rel="prefetch" as="style" href="//cdn.jsdelivr.net/npm/@tehnoskarb/slimbox2@2.0.5/css/slimbox2.css">
  <link rel="prefetch" as="style" href="//cdn.jsdelivr.net/npm/@gerhobbelt/keyscss@1.1.3-6/keys.css">
  <link rel="prefetch" as="style" href="//www.google.com/cse/static/style/look/v2/default.css"><br>
  <link rel="prefetch" as="script" href="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
  <link rel="prefetch" as="script" href="//adservice.google.com/adsid/integrator.js?domain=qwerty.work">
  <link rel="prefetch" as="script" href="//cse.google.com/adsense/search/async-ads.js">
  <link rel="prefetch" as="script" href="//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCore.min.css">
  <link rel="prefetch" as="script" href="//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCoreRDark.min.css">
  <link rel="prefetch" as="script" href="//cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js">
  <link rel="prefetch" as="script" href="//cdn.jsdelivr.net/npm/jquery@1.11.0/dist/jquery.min.js">
  <link rel="prefetch" as="script" href="//jsoon.digitiminimi.com/js/widgetoon.js"> <br>
  <link rel="prefetch" as="script" href="//www.google-analytics.com/analytics.js">
  <link rel="prefetch" as="script" href="//cdn.jsdelivr.net/npm/@tehnoskarb/slimbox2@2.0.5/js/autoload.js">
  <link rel="prefetch" as="script" href="//cdn.jsdelivr.net/npm/@tehnoskarb/slimbox2@2.0.5/js/slimbox2.js">
  <link rel="prefetch" as="script" href="//cdn.jsdelivr.net/npm/echo-js@1.7.3/dist/echo.min.js">
  <link rel="prefetch" as="script" href="//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shAutoloader.min.js">
  <link rel="prefetch" as="script" href="//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.min.js">
  <link rel="prefetch" as="script" href="/blog/main.js"><br>
  <link rel="prefetch" as="image" href="/loading.gif">
  <link rel="prefetch" as="image" href="/blog/images/default-userpic-90.jpg">
  <link rel="prefetch" as="image" href="/blog/images/prof_own.png">
  <link rel="prefetch" as="image" href="/blog/images/noimage-300.png">
  <link rel="prefetch" as="image" href="/blog/images/icon-follow-facebook.png">
  <link rel="prefetch" as="image" href="/blog/images/icon-follow-twitter.png">
  <link rel="prefetch" as="image" href="/blog/images/icon-follow-feedly.png">

最終的に最低限に絞ったソース

とりあえず、PrefetchはFont-AwesomeのCSSをCDNから読み込むときにバックグラウンドで落ちてくるWEBフォント（woff2）とZenbackのJSから落ちてくるjquery.min.****jsのみにしておきました。これ少し評価スコアは戻りました。

<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="preconnect dns-prefetch" href="//qwerty.work">
<link rel="preconnect dns-prefetch" href="//ajax.cloudflare.com">
<link rel="preconnect dns-prefetch" href="//cdnjs.cloudflare.com">
<link rel="preconnect dns-prefetch" href="//cdn.jsdelivr.net">
<link rel="preconnect dns-prefetch" href="//pagead2.googlesyndication.com" >
<link rel="preconnect dns-prefetch" href="//cse.google.com">
<link rel="preconnect dns-prefetch" href="//www.google-analytics.com">
<link rel="preconnect dns-prefetch" href="//w.zenback.jp">
<link rel="preconnect dns-prefetch" href="//jsoon.digitiminimi.com">
<link rel="preconnect dns-prefetch" href="//graph.facebook.com">
<link rel="preconnect dns-prefetch" href="//b.haena.ne.jp">
<link rel="preconnect dns-prefetch" href="//widgets.getpocket.com">
<br>
<link rel="dns-prefetch" href="//adservice.google.com">
<link rel="dns-prefetch" href="//adservice.google.co.jp">
<link rel="dns-prefetch" href="//googleads.g.doubleclick.net">
<link rel="dns-prefetch" href="//tpc.googlesyndication.com">
<link rel="dns-prefetch" href="//clients1.google.com">
<link rel="dns-prefetch" href="//www.google.com">
<link rel="dns-prefetch" href="//www.googleapis.com">
<link rel="dns-prefetch" href="//www.googletagservices.com">
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link rel="dns-prefetch" href="//csi.gstatic.com">
<link rel="dns-prefetch" href="//s.wordpress.com">
<br>
<link rel="preload prefetch" as="font" type="font/woff2" href="//cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/webfonts/fa-brands-400.woff2" crossorigin>
<link rel="preload prefetch" as="font" type="font/woff2" href="//cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/webfonts/fa-regular-400.woff2" crossorigin>
<link rel="preload prefetch" as="font" type="font/woff2" href="//cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/webfonts/fa-solid-900.woff2" crossorigin>
<link rel="preload prefetch" as="script" href="//w.zenback.jp/_p/js/jquery.min.js">

IEでは使えないPreload対策

既に開発が終了しているIE11ではPreloadが使えません。Preloadで指定したCSSを非同期で読み込ませたい場合の対策は以下のようにすればいいみたいです。onload=“this.rel=‘stylesheet’“を加えます。

<link rel="preload" as="style" href="/index.css" onload="this.rel='stylesheet'">

複数のCSSをまとめて指定したい場合は以下のようにすればいいようです。

<link rel="preload" as="style" href="css/style.css"/><span class="brush:xml;">
<link rel="preload" as="style" href="//cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/css/all.min.css">
</span><script>
	$('link[as = "style"]').attr('rel','stylesheet');
</script>

参考ページ

https://gist.github.com/tamaina/73ccf1f807bb4531c069da43112bd61c https://gist.github.com/tamaina/73ccf1f807bb4531c069da43112bd61c

https://qiita.com/memolog/items/a8fb8b39b840adca4d89 https://qiita.com/memolog/items/a8fb8b39b840adca4d89

大幅な高速化はできないけど効果あり

結局、、GTmetrixとGoogle Speed Insightの評価はResource Hintsを使用する前より悪くなりましたが、onload時間は以前よりたったの100ms前後ですが速くなった気がします。

WEBPAGETESTでは**「A」と「B」**の評価で割といい感じでした。

劇的なスピードアップはできませんが、効果はあるということで高速化の手段としては使えることがわかりました。

その他参考ページ

http://tokkono.cute.coocan.jp/blog/slow/index.php/programming/boostup-socials-with-dns-prefetch/ http://tokkono.cute.coocan.jp/blog/slow/index.php/programming/boostup-socials-with-dns-prefetch/

http://tokkono.cute.coocan.jp/demo/prefetch/?page=2 http://tokkono.cute.coocan.jp/demo/prefetch/?page=2

https://qiita.com/suzunone/items/55277b99893b2a6cf353 https://qiita.com/suzunone/items/55277b99893b2a6cf353

自作SNSボタンでサイトを高速化したいときに役に立ちそうなスクリプト

Tue, 25 Dec 2018 20:46:56 +0900

標準のSNSボタンは表示に時間がかかりすぎるので、自作で高速表示ができそうなスクリプトを紹介しているページを発見したのでメモ。

https://mae.chab.in/archives/2915 https://mae.chab.in/archives/2915

https://wp.miisa.pink/2018/06/webdesign/share-counter-button/ https://wp.miisa.pink/2018/06/webdesign/share-counter-button/

Wordpressだと「SNS Count Cache」といったプラグインがあるみたいですが、MovableTypeやその他のページの場合が自力で作成するしかありません。これを参考にいじくってみたいと思います。

試しに作ってみたテストページ

https://qwerty.work/test/cbsharecount/cbsharecount-js-test.php https://qwerty.work/test/cbsharecount/cbsharecount-js-test.php

「cb-sharecount-js」で注意すること

HTTPSのサーバーでは jquery.cbsharecount.js に含まれている「はてぶ」のURLが非HTTPのURLになってるため、カウント数が表示されませんでした。

57行目あたりにある「http://api.b.st-hatena.com/entry.count」を、SSL用の「https://b.hatena.ne.jp/entry.count」に変更する必要があります。

CloudFlareのRocket Loaderが原因で突然Javascriptが動かなくなった

Thu, 10 May 2018 22:10:26 +0900

まさか CloudFlare が原因だったとは…。WEBページのJSが急に動かなくなって困ったのですが解決できたのでメモ。

Javascriptが動かなくなる不具合は突然に

このブログを書く昨日まで普通に表示されていたページが今日になって突然おかしなことになりました。

おかしいというのは IE で表示したページは自体はレイアウトを保った状態で表示はされるのですが、 Javascript を使って表示される部分だけが表示されないんです。

表示されなくなったもの

Facebook、Twitter、はてな、Pocket、LINEなどのSNSボタン
Google AdSenseのバナー
jQuery.jsを使ったアコーディオン
Echo.js（画像を遅延表示させるLazyRoadみたいなやつ）
LightBox.js
SyntaxHighlighter（PREタグのソースを装飾するやつ）

などが全部動かなくなりました。

IEでは動いていないけどChromeでは一部動いている

Internet Explorer 11 では全ての Javascript が動いていないのに対して、Chrome では AdSenseの広告だけは表示されました。

ソースを見ると異常あり

おかしいな～なんで急に動かなくなるかな～とブラウザでページのソースを見ると以下のように

<script type="text/javascript"～

でないといけないところが、 **タグ全部 **が

<script type="15304f88fc0274cd53c9f980-text/javascript"～

になっていました。

15304f88fc0274cd53c9f980- の部分はページを表示する度にランダムで値が変化しました。

FTPにあるファイルは正常、怪しいファイルもなし

**どうなってんだこりゃ～改ざんか！？**とサーバにあるHTMLファイルを開いてみると、ソースは **タグを書き換えるような PHP や JS がサーバーにあるんじゃないか？と、見慣れないファイルがないか探しましたが怪しいファイルはパッと見で見当たりませんでした。

CloudFlareのRocket Loaderが怪しい

サーバーに置いてあるファイルは正常で、ブラウザで表示する際にソースが書き換わっているというこで、怪しいファイルがなくて、他にサーバーとブラウザ間でソースの置換ができるものとしたら CloudFlare しかないけど**まさかね～**なんて考えながらも CloudFlare を疑ってみました。

現時点では、ページの表示スピードを高速化させるために無料で使えるCDNサービスの CloudFlare を使用しています。 CloudFlare ではページ内の Javascript を高速化させるための 「ロケットローダー」 という機能があります。この機能を ON（Automatic） にすると自動的に タグの直前に以下のように rocket-loader.js を呼び出すソースが組み込まれます。

<script src="https://ajax.cloudflare.com/cdn-cgi/scripts/dba9ecf7/cloudflare-static/rocket-loader.min.js" data-cf-once=!1bf743e9df871d84cecbddbe-" defer=""></script>

ここがなんだか怪しいぞ、といことで CloudFlare の管理画面から Rocket Loader を OFF にしてみました。[Speed] ページの中間に** [Rocket Loader BETA] **という部分にあります。設定変更したら即座に反映されます。

ページが正常に表示された！

やっぱり原因は CloudFlare のRocket Loaderでした。OFF にした直後にページの表示を更新したら正常になりました。なんかCDNのサービスを無料で提供しているし、 Rocket Loader は BETA版だからってテストもせずにリリースするものなんですかね？以下のページのように、過去にも同じようなことがあったようです。CloudFlare には気を付けないといけないですね。やれやれ…。

http://news.7zz.jp/php/4232.html http://news.7zz.jp/php/4232.html

AdSenseの表示を高速化するために「DNS Prefetch」であらかじめ先読みする

Mon, 05 Mar 2018 21:17:48 +0900

きっかけはうっかりテーマを初期化

ブログのデザインをそろそろ変えようかな～とWordpress感覚で試しにMovableTypeのテンプレートをテーマを変更したら、以前のテンプレートがすべて初期化されてしまいました…。

それまではCloudFlare（CDN）と組み合わせてGTmetrixやPageSpeed Insightsの計測でページの表示が1～2秒台でした。

以前のテーマに戻してもコツコツ構築してきた高速化さるための設定を加えたテンプレートがすべて消えしました…。Wordpressの感覚でテーマの雰囲気だけ見たかっただけなのに完全に初期化されてしまいました。バックアップもしていなかったのでショックです。MovableTypeの場合は管理画面の［ツール］-［テーマのエクスポート］からバックアップをとっておかないといけなかったみたいです…。

後戻りもできないので初期化ついでに新しいテーマに変え、コツコツいじってレイアウトやらデザインを変更して、計測したら10～15秒台まで落ちてしまいました。そのうちの5～6秒がサーバーの応答時間でした。なんでだろう？

いままでどうやって高速化のしてきたのか施した方法が思い出せませんが、新しいテーマでのAdSenseの広告表示のもたつきがきになるので、とりあえずここの読み込みを速くできないかな？と調べているとdns-prefetchというのを見つけました。

DNS Prefetchであらかじめ先読み

DNS Prefetchは特定のホスト名に対するDNSの事前解決を強制的に行うもののようです。このブログではどのページにも共通してAdSenseを表示しているので、そういったURLはあらかじめ以下のタグで事前読み込みしておくURLを指定します。効果がどのくらいあるのか確認はしていませんが、とりあえずメモ。

<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="//pagead2.googlesyndication.com">
<link rel="dns-prefetch" href="//googleads.g.doubleclick.net">
<link rel="dns-prefetch" href="//googleads4.g.doubleclick.net">
<link rel="dns-prefetch" href="//tpc.googlesyndication.com">
<link rel="dns-prefetch" href="//www.gstatic.com">

****の直後あたりでとにかく上の方に書くといいみたいです。SNSのシェアボタンや外部のJavaスクリプトの読込にも使えるようです。

ChromeによるHTTPSでのDNS Prefetch

以下のページを日本語に翻訳してみたところ、「ChromiumはHTTPSページに表示されるハイパーリンク内のホスト名をプリフェッチしません。」とあります。

http://dev.chromium.org/developers/design-documents/dns-prefetching http://dev.chromium.org/developers/design-documents/dns-prefetching

一瞬ドキッとしましたが、最初の1行目のコレ↓でHTTPSページでもChrome（ブラウザ側）のDNS preftch が有効化されるみたいです。いろいろな参考ページで省略されていましたが、絶対書いたほうがよさそうです。

<meta http-equiv="x-dns-prefetch-control" content="on">

Javascript化してソースの見栄えを整理するする

たくさんのURLを事前読込するとタグ下に****がズラズラ並んでソースの見栄えが悪くなります。これを解消したい場合は以下が参考になります。以下のページではJavascript化して先読みするURLを隠していました。

http://tokkono.cute.coocan.jp/demo/prefetch/?page=3 http://tokkono.cute.coocan.jp/demo/prefetch/?page=3

ソースを見ると、タグの直前に以下のJavascriptを読み込むコードがあります。

<!-- DNS プリフェッチの設定 -->
<script src="js/prefetch.js"></script>

そして、このJSのソースを見ると以下のようになっていました。

(function(document) {
var servers = [
　　/* evernote
　　"static.evernote.com" //*/<br>

    
　　/* pocket */
　　,"d7x5nblzs94me.cloudfront.net"
　　,"widgets.getpocket.com"<br>

	
　　/* mixi
　　,"img.mixi.net"
　　,"static.mixi.jp"
　　,"plugins.mixi.jp" //*/<br>

	
　　/* google analytics, google +1 */
　　,"oauth.googleusercontent.com"
　　,"ssl.gstatic.com"
　　,"accounts.google.com"
　　,"apis.google.com"
　　,"www.google-analytics.com"<br>

	
　　/* facebook */
　　,"www.facebook.com"
　　,"s-static.ak.facebook.com"
　　,"static.ak.fbcdn.net"
　　,"static.ak.facebook.com"
　　,"connect.facebook.net"<br>

	
　　/* twitter */
　　,"twitter.com"
　　,"cdn.api.twitter.com"
　　,"p.twitter.com"
　　,"platform.twitter.com"<br>

	
　　/* hatena */
　　,"cdn-ak.b.st-hatena.com"
　　,"cdn.api.b.hatena.ne.jp"
　　,"b.st-hatena.com"<br>

	
　　/* zenback
　　,"web-jp.ad-v.jp"
　　,"w.zenback.jp" //*/
], i, e, link = document.createDocumentFragment();<br>

	
　　for (i = servers.length-1; i >= 0; i--) {
　　　　e = document.createElement('link');
　　　　e.setAttribute('rel', 'dns-prefetch');
　　　　e.setAttribute('href', '//' + servers[i]);
　　　　link.appendChild(e);
	}<br>

	
document.getElementsByTagName('head')[0].appendChild(link);
}(document));

が現れた時点でロードされるみたいです。クライアントサイドで実行するので0.1～0.15秒遅くなるみたいですが、ソースをゴチャゴチャさせたくない場合は試してみてください。

数値で比較しないと効果がわからないかも？

主要なほとんどのブラウザはdns-prefetchに対応しているようです。ZenbackとかSNSボタンとかに使われているドメイン20個ぐらいを指定してみたりして高速化を体感できるか試してみました。指定したドメインのすべて先読みされるのか不明ですが、ページのスピードテストしてみました。全体的にあまり表示時間は短縮されませんでした。数値で比較すればわかるのかもしれませんが、そこまで見ませんでした。体感できないレベルの効果しかないのかもしれませんが、やらないよりはやったほうがいいと思います。

表示が遅いのはサーバーかSNSシェアボタンの問題かも？

そもそもサーバーの応答時間が5～6秒かかっているので、AdSenseが遅いといういより、レンタルサーバーが遅い、またはFacebookやTwitterなどのSNSシェアボタンに問題があるのかもしれません。SNSシェアボタンのソースを見直したところ、3秒くらい短縮できました。他にも原因がありそうなので、また時間があるときに検証してみたいと思います。

参考ページ

https://qiita.com/ShinyaOkazawa/items/f95788c67114d0360e40 https://qiita.com/ShinyaOkazawa/items/f95788c67114d0360e40

http://hayashikejinan.com/wordpress/optimize/730/ http://hayashikejinan.com/wordpress/optimize/730/

http://tokkono.cute.coocan.jp/blog/slow/index.php/programming/boostup-socials-with-dns-prefetch/ http://tokkono.cute.coocan.jp/blog/slow/index.php/programming/boostup-socials-with-dns-prefetch/

WEBサイトの表示が高速化されるプロトコル「HTTP/2」と「QUIC」についてメモ

Thu, 01 Mar 2018 23:30:46 +0900

常時SSL化が当たり前になる時期が近付いています。SSL化すればWEBサイトを高速に表示できるプロトコル「HTTP/2」が使え、Chromeでは更に高速化が期待できる「QUIC」が使えるようです。それについていろいろ調べて気になることをメモ。

HTTP/2対応かURLからオンラインで確認

以下のページでURLからWEBサイトがHTTP/2に対応しているか確認できます。

https://tools.keycdn.com/http2-test https://tools.keycdn.com/http2-test

ブラウザでHTTP/2で通信しているか確認する方法

以下のページが参考になります。

https://nelog.jp/http2-browser-extensions https://nelog.jp/http2-browser-extensions

HTTP/2について

HTTP/2がなぜ高速なのかは以下のページが参考になります。

https://blog.redbox.ne.jp/http2-cdn.html https://blog.redbox.ne.jp/http2-cdn.html

https://zenlogic.jp/aossl/basic/response/ https://zenlogic.jp/aossl/basic/response/

https://lolipop.jp/http2/ https://lolipop.jp/http2/

このWEBサイトを高速に表示させるための技術として、HTTP1.1からGoogleがSPDYという高速化技術を作り、それが元でHTTP/2というのができて標準化されたそうです。

速度の違いを体感してみる

以下のページでHTTPで接続した場合と、HTTPSで接続した場合、見た目と表示完了時間で違いを視覚的に体感でできます。画面右上の「HTTP」と「HTTPS」のリンクをそれぞれクリックしてみてください。

https://www.httpvshttps.com/ https://www.httpvshttps.com/

HTTP/2が使えるブラウザ

HTTP/2はInternet Explorer 11（IE11)、Google Chrome、FireFoxなど、主要なブラウザで使えます.

Microsoft Windows 10上のInternet Explorer 11
Microsoft Edge
Google Chrome (Ver.30は設定が必要）
Mozilla Firefox (Ver.34から標準で有効)
Opera
Safari 9

その他のブラウザを含めた対応状況の参考ページ

https://caniuse.com/#feat=spdy https://caniuse.com/#feat=spdy

ブラウザだけではなくWEBサーバーのHTTP/2対応が必要

HTTP/2による通信はブラウザが対応していてもWEBサーバーというかWEBサイトがこのプロトコルに対応していないとできません。WEBサーバーが対応していなくても、CloudFlareなどのHTTP/2に対応したCDN経由で公開していれば、HTTP/2対応サイトにできます。

更に速いQUICで高速化？

GoogleがHTTP/2よりも安全で高速なレスポンスを実現するQUIC（Quick UDP Internet Connections）というTCPではなくUDPをベースにしたプロトコルを開発しているようです。

https://qiita.com/flano_yuki/items/251a350b4f8a31de47f5 https://qiita.com/flano_yuki/items/251a350b4f8a31de47f5

https://internet.watch.impress.co.jp/docs/column/ietf2017/1060156.html https://internet.watch.impress.co.jp/docs/column/ietf2017/1060156.html

https://www.iij.ad.jp/dev/tech/techweek/pdf/151111_4.pdf https://www.iij.ad.jp/dev/tech/techweek/pdf/151111_4.pdf

ChromeのQUIC関連の表示

QUICが使えるブラウザはまだChromeしかなさそうですが、ChromeでQUICに関する設定や状況表示は以下のURLをChromeのアドレスバーに入力すると表示できます。使い方はよくわかりません。

chrome://flags
chrome://net-internals/#quic

QUIC対応のレンタルサーバー

今のところ、HTTP/2とQUICに対応しているレンタルサーバーは以下だけのようです。

https://mixhost.jp/ https://mixhost.jp/

SyntaxHighlighterでWindowsバッチファイルのソースコードやコマンドを装飾表示できるようにするshBrushBat.js

Mon, 09 Oct 2017 22:39:10 +0900

WEBサイトでソースをきれいに表示してくれるSyntaxHighlighterですが、コマンドプロンプト（DOS）の**バッチファイル（bat, cmd, com）のソースは標準で対応していません。でも、別でWindowsバッチファイル用のBrushファイル（shBrushBat.js）**を読み込ませれば対応できるようです。その方法を教えてくれる参考サイトをメモ。実際に組み込んだら成功しました。

shBrushBat.jsのダウンロード先と参考サイト

/dev/null &"); ?> /dev/null &"); ?> /dev/null &"); ?>

SyntaxHighlightersa作者のページ

/dev/null &"); ?> /dev/null &"); ?>

SyntaxHighlighterと類似の他のハイライター

highlight.js

参考サイトの説明によると12KBと超軽量で行番号表示がないなど、シンプルでいいらいい。

/dev/null &"); ?> 参考サイト /dev/null &"); ?>

Prism.js

/dev/null &"); ?> 参考サイト /dev/null &"); ?>

code prettifier（Google）

/dev/null &"); ?>

AMP対応ページでAmazonアソシエイトのバナーの下に謎の空白・余白ができるとき

Sun, 23 Jul 2017 15:53:12 +0900

AMP対応のページにAmazonアソシエイトのバナーを貼ると、バナーの下に謎の空白というか余白が表示されるということがありました。

原因は layout=“responsive”

AMP対応ページを出力する際、通常のHTMLのページ（非AMP）のソースをスクリプトでAMPページ用にをに置き換えています。このときに加えている**layout=“responsive”**が謎の空白・余白ができる原因でした。

画像やYou-Tubeの動画で使われているを以下のように

<amp-iframe layout="responsive" src="http://exampl.com～" width=300 height=300></amp-iframe>

とすることで画面幅100％に合わせて表示してくれるのでいいのですが、アマゾンのバナーソースのにlayout=“responsiveに使うと、ブラウザはアマゾンのバナーサイズであるwidth=“120” height=“240"が画面幅100％になるようにフレームを拡大して広い表示スペースを取ります。

しかし、レスポンシブで拡大された広いフレームの中に表示されるのは拡大されていない120×240のバナーなので、空白というか余白ができてしまいます。

アマゾンの場合はlayout=“responsive"を付けない

ということで、Amazonアソシエイトバナーの場合はタグ内でlayout=“responsive"を使わないようにしましょう。

アマゾンに限らずiTunesのバナーなど、URL内にw=300&h=250やwidth=120&height=240といったパラメーターでサイズを指定して画像を呼び出しているものは同じようにlayout=“responsive"を削除しておかないと余白や空白ができてしまいますので同じ対応が必要です。

バナーが表示されないとき

もし、****でバナーが表示されないときは以下のように**sandbox=“allow-scripts allow-same-origin allow-popups”**を加えてみると表示されると思います。

<amp-iframe sandbox="allow-scripts allow-same-origin allow-popups" src="http://exampl.com～" width=300 height=300></amp-iframe>

いつかマネしたい好みの効果のあるクールなサイトのメモ

Sat, 25 Feb 2017 13:10:07 +0900

https://ics.media/ https://ics.media/

https://whois.domaintools.com/

http://www.feedmusic.com/ http://www.feedmusic.com/

BingとGoogleにブログの更新通知（sitemap.xml）を送信するURL

Sun, 27 Nov 2016 10:21:04 +0900

手動でブログやホームページのsitemap.xmlなどのサイトマップを送信する際、ウェブマスターツールを開くのが面倒なので、URLを開くだけで送信できるリンクをメモ。

ただ、これはWordPressやMovableTypeの更新通知先にも登録して使っているもので、ただそのリンクをブラウザで開くというだけのものです。また、事前にウェブマスター登録をしておく必要があります。

サイトマップ送信リンク

例えば、当ブログのサイトマップがhttp://qwerty.work/blog/index.xmlだっとしたら以下のようになります。

:は%3A、/は%2FとURLエンコードした文字列に変換しています。

以下のリンクを開くとサイトマップを受け付けた旨のメッセージが表示されます。

Bing

http://www.bing.com/ping?sitemap=http%3A%2F%2Fqwerty.work%2Fblog%2Findex.xml

Google

Yahoo

現在はサイトマップの受付はしていませんが、以前は以下で送信できていました。

http://search.yahooapis.com/SiteExplorerService/V1/ping?sitemap=http%3A%2F%2Fqwerty.work%2Fblog%2Findex.xml

ウェブマスターツール

Bing

Google

PHPのバージョンアップで発生するタイムゾーンエラーの対処方法

Wed, 09 Sep 2015 00:17:00 +0900

使用しているレンタルサーバーのバージョンが上がったせいか、今まで正常に動いていたPHPのスクリプトでエラーが出始めた。

エラーの内容

なにやらデフォルトのタイムゾーンを設定しろ的な**date_default_timezone_set()**に関するエラー。

Warning: date(): It is not safe to rely on the system’s timezone settings. You are required to use the date.timezone setting or the date_default_timezone_set() function. In case you used any of those methods and you are still getting this warning, you most likely misspelled the timezone identifier. We selected the timezone ‘UTC’ for now, but please set date.timezone to select your timezone. in /public_html/qwerty.work/lib/***.php on line 123

対処法方法

タイムゾーンの設定はphp.iniか.htaccessでするか、スクリプト内に宣言するかなどできます。

php.iniの場合

[Date]セクション内を編集

;date.timezone =
  　　　↓↓↓
date.timezone = Asia/Tokyo

※スクリプト全てに対して適用されます

.htaccessの場合

以下を追加

php_value date.timezone Asia/Tokyo

※.htaccess制御範囲内のスクリプト全てに対して適用されます

スクリプト内で宣言する場合

date_default_timezone_set('Asia/Tokyo');

※記述を追加したスクリプトのみに対して適用されます

YouTube動画の遅延読み込みができるEcho.js

Sun, 07 Jun 2015 23:17:57 +0900

動画を埋め込むとページの表示が重たいので遅延表示したい

画像を多量に使用してもページを表示するスピードを下げないために以前から「Echo.js」を使用しています。画像の遅延読み込みをするスクリプトで有名なのは「Lazy Load Plugin for jQuery」ですが、「Echo.js」は jQueryに依存せず4KBと非常に軽量ということもあり気に入ってます。

この「Echo.js」ですが、動画も遅延対象にできるようです。

大量のYuoTubeの動画をまとめたブログがあるのですが、ページを表示する時間がかかり、ちょっとのアクセス量でダウン気味になるといったことがありました。これを機に**YouTubeの埋め込みコードの``**を「Echo.js」で遅延読み込みさせるようにしました。

動画を遅延表示している参考ページ

以下のページに複数のYou-Tube動画を埋め込んで遅延表示させています。

感動して涙が止まらないタイの泣けるCMまとめ

ダウンロードページ

以下の作者のページからEcho.jsをダウンロードできます。

http://toddmotto.com/echo-js-simple-javascript-image-lazy-loading/ http://toddmotto.com/echo-js-simple-javascript-image-lazy-loading/

https://github.com/toddmotto/echo https://github.com/toddmotto/echo

使用するのは、srcの中のecho.jsか、distの中のecho.jsかecho.min.jsでいずれかを適当なディレクトリに保存します。

Echo.jsでYou-Tubeのiframeを遅延表示させるための準備

デフォルトのままのecho.jsは画像のタグしか遅延表示に対応していないので、You-Tubeの埋め込みコードに使用されているも対象に加えるためにはecho.jsに手を加えたないといけません。

echo.jsを開いて75行目あたりに以下のコードがあります。（ちなみにこの記事を書いた時点はv1.7.0なので現在は内容が異なっているかもしれません。）

var nodes = document.querySelectorAll('img[data-echo], [data-echo-background]');

これに,iframe[data-echo]を追加して以下のように修正し上書き保存します。

var nodes = document.querySelectorAll('img[data-echo], [data-echo-background], iframe[data-echo]');

遅延させたいソースを『data-echo』で指定する

画像``を遅延させる場合の

<img src="loading.gif" data-echo="mainImage.jpg" />

とするように、iframeのコード内のsrc="***"をdata-echo="***"にするだけで遅延の対象となります。

<iframe width="420" height="315" src="https://www.youtube.com/embed/_itBsIn_R00" frameborder="0" allowfullscreen></iframe>

//srcをdata-echoに変更するだけ

<iframe width="420" height="315" data-echo="https://www.youtube.com/embed/_itBsIn_R00" frameborder="0" allowfullscreen></iframe>

読み込みを開始するまでにダミーの画像を表示させたい場合はsrc="***"でダミー画像を指定します。ここを省略してダミー画像を表示させないこともできます。

<iframe width="420" height="315" src="loading.gif" data-echo="https://www.youtube.com/embed/_itBsIn_R00" frameborder="0" allowfullscreen></iframe>

基本的なコードの使い方

当然ですが、遅延読み込みするためにはEcho.jsを読み込んでおく必要があります。

<script type="text/javascript" src="echo.js"></script>
<script type="text/javascript">
		echo.init();
</script>

細かいオプション設定

遅延時間の指定や、読み込みを開始するかを指定する場合は以下のようになります。

ここではブラウザの表示部分に対象の画像や動画が50px以上表示されたら250ms遅延させてから表示する設定を例にしています。offsetとthrottleがその部分です。

<script type="text/javascript" src="echo.js"></script>
<script type="text/javascript">
		echo.init({<br>		  offset: '50',<br>		  throttle: '250'<br>   		 });</script>

offsetは遅延する画像の領域に上から50pxまでスクロールしたら表示開始するという表示開始位置設定。0を指定した場合は、表示領域内に入ったらすぐに表示。この設定を省略した場合もデフォルト値の0となります。

その他のオプション例

;<script type="text/javascript">
echo.init({
  offset: 0, //オフセット値(画像にどれくらい近付いたら読み込むか)
  offsetVertical: 0, //上下方向のオフセット値
  offsetHorizontal: 0, //左右方向のオフセット値
  offsetTop: 0, //上方向のオフセット値
  offsetBottom: 0, //下方向のオフセット値
  offsetLeft: 0, //左方向のオフセット値
  offsetRight: 0, //右方向のオフセット値
  throttle: 250, //処理の間隔(スクロールが止まってから画像が読み込まれるまでの時間)
  debounce: true, //throttleを有効にするかどうか
  unload: false, //画像が表示範囲から外れた時に読み込み前に戻すかどうか
  callback: function (element, op) { //コールバック
    console.log(element, 'has been', op + 'ed')
  }
});
;</script>

詳しくは以下の製作者のページを参照してください。ちなみに英文です。

https://github.com/toddmotto/echo/blob/master/README.md https://github.com/toddmotto/echo/blob/master/README.md

Chromium系ならloading=“lazy"追加するだけ

最近のChromium系のブラウザならJavascriptを使うことなく、``にloading="lazy"を追加するだけ遅延表示ができるらいです。

Chromium系のブラウザなら画像・Youtube動画の遅延読み込みができるらしい

レスポンシブ対応できなくなったfacebookのPage Plugin（旧Like Box）

Fri, 17 Apr 2015 15:04:43 +0900

以下のページによると2015/06/23に今までのLike Boxは使えなくなるそうです。（同時にActivity Feed、Facepile、Recommendations Feedも使えなくなるようです。）

https://developers.facebook.com/docs/plugins/like-box-for-pages

2015年4月から既に仕様変更されたPage Pluginが使用できるようになっていますが、幅280～500pxで固定されどうやってもレスポンシブ対応できないようです。

https://developers.facebook.com/docs/plugins/page-plugin https://developers.facebook.com/docs/plugins/page-plugin

今までは以下のようにCSSに幅を100％とするコードを加えればよかったので、試しにPage Pluginのページでコードをゲットしてやってみましたがダメでした。

.fb_iframe_widget, .fb_iframe_widget span,.fb_iframe_widget span iframe[style]{
     width: 100% !important;
}

**data-width=“100%”**にしてみり、data-width自体を消してみたりしましたがびくともしませんでした…残念。

YSlowのUse cookie-free domain対策のメモ

Sat, 11 Apr 2015 13:45:31 +0900

YSlowのUse cookie-free domain対策用として.htaccessに静的コンテンツのCookieを削除する方法を見つけたのでメモ。

<FilesMatch "\.(css|js|jpg|jpeg|png|gif)$"><br>    RequestHeader unset Cookie<br>    Header unset Cookie<br>    Header unset Set-Cookie<br></FilesMatch>

結局、静的コンテンツ用にサブドメインを用意してみましたが、CDNのCloudFlareを使っていると、この設定をしてもサブドメイン経由で表示する画像などにCloudFlareのクッキーが加えられ、完全なクッキーレスにはできないようです。

参考：What does the CloudFlare cfduid cookie do? - CloudFlare Support

GTmetrixの評価の見方と対策が詳しく書いてあるサイトのメモ

Thu, 09 Apr 2015 10:20:15 +0900

サイトを高速化するために評価してくれるサイトGTmetrixで評価の悪いところが何を示していて、どういった対策をすればいいか具体的なことを書いてあるサイトを見つけたのでメモ。Page SpeedとYSlowの対策がよくわかりました。

http://media-pickup.com/column/20150215/page-speed-and-yslow-optimization/ http://media-pickup.com/column/20150215/page-speed-and-yslow-optimization/

現在、MovableTypeを使用しているのですが、上記のサイトを参考にいろいろ対策した結果。あともうちょっとでAA。

PHPのstrtotimeで2099年（2038年1月19日以降）の値が取得できない。

Fri, 23 Jan 2015 13:33:35 +0900

PHPで現在の日付が期限を過ぎていなければ表示しないさいといった判別をするため、わかりやすく2099年12月31日を期限としてみたところ、計算できませんでした。**strtotime(date(“2099/12/31”))**では値を取得できないようです。

<?php
if (strtotime(date("Y/m/d")) <= strtotime(date("2099/12/31"))){
	echo "期限内です。\n";
}else{
	echo "期限を過ぎています。\n";
}
?>

値が取得できていないので期限内なのに**“期限を過ぎています。”と表示されました。では、いつまでなら大丈夫なのかといろいろやってみたところ2038/01/19**までなら値が判別できました。

<?php
if (strtotime(date("Y/m/d")) <= strtotime(date("2038/01/19"))){
	echo "期限内です。\n";
}else{
	echo "期限を過ぎています。\n";
}
?>

なぜこんなことになっているのか検索してみたところ以下のページが参考になりました。

http://php.net/manual/ja/function.strtotime.php http://php.net/manual/ja/function.strtotime.php

これによると32ビット環境のPHPで使える有効なタイムスタンプは1901年12月13日 20:45:54から2038年01月19日 03:14:07までだそうです。

今回の判別は時間は関係なく日付だけで行うので、以下のようにstrtotimeで日付を数値にせず日付のまま判別するようにしました。これは2099年でも大丈夫なようです。

<?php
if (date("Y/m/d") <= date("2099/12/31")){
	echo "期限内です。\n";
}else{
	echo "期限を過ぎています。\n";
}
?>

PHP5.3でnumber_format()がエラーになるときの対処

Mon, 03 Nov 2014 21:32:45 +0900

何気なく会社のホームページを見ていたら以下のエラーが出るページに気づきました。

Warning:number_format() expects parameter 1 to be double, object given in /home/hoge/foo/bar.php on line 99

ここ数か月は特に更新をしていないページなのになんでだろう？と思っていたところ、そういえばレンタルサーバー会社からPHP5.2を終了し、5.3にバージョンアップするといったメールが届いていたの思い出しました。

**number_format()**のエラーを検索したらあっさり対処法が見つかりました。

$chinryo = number_format($alldata->data[$i]->chinryo);

に**(int)**を加えて

$chinryo = number_format((int)$alldata->data[$i]->chinryo);

とするだけでエラーが出なくなりました。

以下のサイトURLのページによると、エラーの原因はPHP5.3からnumber_formatを含むあらゆる関数に対して互換性のない値が渡されるとNULLを返すのが原因のようです。

http://jp2.php.net/manual/ja/migration53.incompatible.php http://jp2.php.net/manual/ja/migration53.incompatible.php

チェックボックスでフォーム送信ボタンを表示/非表示にする-jQuery

Mon, 23 Jun 2014 22:49:21 +0900

友人に教えてもらったスパム対策の方法。お問い合わせフォームのチェックボックスにチェックを入れないと送信ボタンを表示しないスクリプトのメモ。

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <br /><script type="text/javascript"><br />$(function(){<br />	$('#btn').hide();<br />	$("#switch").click(function(){<br />		$("#btn").slideToggle(this.checked);<br />		$("form").attr("action","/apps/mailform/send.cgi");<br />	});<br />});<br /></script><br /><form action="#" method="post"><br />  <label><br />    <input id="switch" type="checkbox" name="ボタン表示(必須)" value="表示" /><br />  ボタンを表示</label><br />  <input id="btn" type="submit" value="送信" /><br /></form>

↓実際にチェック入れたら送信ボタンが右に表示されます。

$(function(){ $(’#btn’).hide(); $("#switch").click(function(){ $("#btn").slideToggle(this.checked); $(“form”).attr(“action”,“lib/send.cgi”); }); });

ボタンを表示

チェックボックスにチェックが入っていないとaction="#"となっていて、チェックを入れるとaction属性がlib/send.cgiに変わるようになっています。自動でフォーム送信するようなボットを使ったスパムに対して有効かもしれません。

参考サイト

http://kachibito.net/snippets/if-checked-show-box http://kachibito.net/snippets/if-checked-show-box

http://www.inurokuon.com/nfd/archives/131023.html http://www.inurokuon.com/nfd/archives/131023.html

jQueryのslideToggleを使ったアコーディオンメニューのメモ

Wed, 04 Jun 2014 15:54:52 +0900

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js" async></script><br><script type="text/javascript">
  $(function(){
    $('.accordion-List').hide();
    //
    $('#accordion-Title').click(function(){
      $('+.accordion-List',this).slideToggle();
    });
  });
</script><br>
<style type="text/css">
  #accordion-Title { cursor:pointer; }
</style><br>
<h3 id="accordion-Title">リストタイトル（サンプル）</h3><br>  <ul class="accordion-List">
    <li>リスト1</li>
    <li>リスト2</li>
  </ul>

コードはこんな感じでjQueryを読み込み**slideToggle()**を指定するだけ、下のサンプルがちゃんと動けばタイトルをクリックするとリストが現れ、もう一度クリックすると閉じるはず…。

$(function(){
	$('.accordion-List').hide();
	//
	$('#accordion-Title').click(function(){		
		$('+.accordion-List',this).slideToggle();
	});
});



#accordion-Title { cursor:pointer;}

リストタイトル（サンプル）

  - リスト1
  - リスト2

隠れているはずのリストが始めから表示されていたり、クリックしても動作しない場合は失敗です…。

独立した複数のアコーディオンがある場合

accordion-List1,accordion-List2など、idやclassを分けないと最初のアコーディオンしか動かないので注意が必要です。

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js" async></script><br><script type="text/javascript">
  $(function(){
    $('.accordion-List1').hide();
    //
    $('#accordion-Title1').click(function(){
      $('+.accordion-List1',this).slideToggle();
    });
  });
  $(function(){
    $('.accordion-List2').hide();
    //
    $('#accordion-Title2').click(function(){
      $('+.accordion-List2',this).slideToggle();
    });
  });
</script><br>
<style type="text/css">
  #accordion-Title1,#accordion-Title2 { cursor:pointer; }
</style><br>
<h3 id="accordion-Title1">リストタイトル（サンプル1）</h3><br>  <ul class="accordion-List1">
    <li>リスト1-1</li>
    <li>リスト1-2</li>
  </ul>
<h3 id="accordion-Title2">リストタイトル（サンプル2）</h3><br>  <ul class="accordion-List2">
    <li>リスト2-1</li>
    <li>リスト2-2</li>
  </ul>

以下がサンプル

$(function(){ $(’.accordion-List1’).hide(); // $(’#accordion-Title1’).click(function(){ $(’+.accordion-List1’,this).slideToggle(); }); }); $(function(){ $(’.accordion-List2’).hide(); // $(’#accordion-Title2’).click(function(){ $(’+.accordion-List2’,this).slideToggle(); }); });

#accordion-Title1,#accordion-Title2 { cursor:pointer; }

リストタイトル（サンプル1）

    - リスト1-1
    - リスト1-2

リストタイトル（サンプル2）

    - リスト2-1
    - リスト2-2

この方法以外にもたくさんやり方はあるみたいなので、グーグルで「jQuery slideToggle」とか「jQuery アコーディオン slideToggle」と検索してみるといいかもしれません。

その他参考

http://jqueryui.com/accordion/ http://jqueryui.com/accordion/

投稿記事内の最初の画像をアクセスランキングに表示-MovableType

Thu, 01 May 2014 09:28:29 +0900

投稿記事内の画像を使って、アクセスランキングにサムネイル画像を表示するためにムーバブルタイプでアクセスランク順に人気記事リストを表示する方法とその他のサンプルのソースをかき集めてどうにかできたのでメモ。

MTに画像を登録していればもっと簡単にできるようなのですが、僕はムーバブルタイプで画像を使うとき、IMGタグを直接書いています。どうもMTのアイテムとして画像を登録するやり方が苦手なんです。画像の遅延表示やLightboxとか使うのに、あとでソースを修正することが多く、最初から手打ち登録するほうが気分的に安心なんです。こんな手間をかけなくてもプラグインとかありそうですが…。

<MTIf tag="BlogEntryCount"><br /><MTEntries sort_by="accessed_count" sort_order="descend" limit="5"><br />  <mt:EntriesHeader><br />    <div class="widget-recent-entries widget-archives widget"><br />      <h3 class="widget-header">アクセスランキング</h3><br />      <div class="widget-content"><br />        <ul id="access-lanking"><br />          </mt:EntriesHeader><br />          <$mt:setvar name="rank" value="1" op="++"$><br />            <MTSetVarBlock name="GetImageURL">
              <MTEntryBody regex_replace="/<[^i].*?>|<i[^m]*?>|<iframe.*?>|<input.*?>|<ins.*?>|<isindex.*?>|\s/g","" regex_replace='/(.*?src=")(.*?)(".*)/g','$2' regex_replace='/^[^\.\/h].*/g','none'>
            </MTSetVarBlock><br />              <li><br />                <MTIf name="GetImageURL" like="none"><br />                    <a href="<$MTEntryPermalink$>"><img src="<$mt:SupportDirectoryURL with_domain="1" encode_html="1"$>theme_static/rainier/img/siteicon-sample.png" width="60" height="60" alt="<$MTEntryTitle$>" /></a><br />                <MTElse><br />                    <a href="<$MTEntryPermalink$>"><img src="<$MTGetVar name="GetImageURL"$>" width="60" height="60" alt="<$MTEntryTitle$>" /></a><br />                </MTIf><br />                <a href="<$MTEntryPermalink$>"><p class="entry-title"><$MTEntryTitle trim_to="43+..."$></p></a><br />              </li><br />            <mt:EntriesFooter><br />        </ul><br />      </div><br />    </div><br />  </mt:EntriesFooter><br /></MTEntries><br /></MTIf>

（ランキング表示にAccess Counterというプラグインを使っていることが前提のソースです。）

まず、正規表現を使ってEntryBody（記事内）のソースからIMGタグのsrcにある画像パスを抜き出してGetImageURLという変数に代入します。もし、画像がなかったらnoneという文字を代入します。

<MTSetVarBlock name="GetImageURL">
   <MTEntryBody regex_replace="/<[^i].*?>|<i[^m]*?>|<iframe.*?>|<input.*?>|<ins.*?>|<isindex.*?>|\s/g","" regex_replace='/(.*?src=")(.*?)(".*)/g','$2' regex_replace='/^[^\.\/h].*/g','none'>
</MTSetVarBlock><br />

アクセスランキング表示の際、画像がなければ代替画像を表示して、あれば GetImageURLに入っている画像パスを使って表示します。

<MTIf name="GetImageURL" like="none"><br />  <a href="<$MTEntryPermalink$>"><img src="<$mt:SupportDirectoryURL with_domain="1" encode_html="1"$>theme_static/rainier/img/siteicon-sample.png" width="60" height="60" alt="<$MTEntryTitle$>" /></a>
<MTElse><br />  <a href="<$MTEntryPermalink$>"><img src="<$MTGetVar name="GetImageURL"$>" width="60" height="60" alt="<$MTEntryTitle$>" /></a><br /></MTIf>

この方法にMTの画像アイテムがあればそれを優先するようなことも加えたいのですが、とりあえず今回はここまで。

参考ページ

http://akamiru.com/2014/02/mt-accesse-counter.html http://akamiru.com/2014/02/mt-accesse-counter.html

ムーバブルタイプでアクセスランク順に人気記事リストを表示する方法

Tue, 22 Apr 2014 21:31:39 +0900

Access Counterというプラグインを使って人気の記事リストを表示する方法を書き留めておきます。アクセスの高い順に表示してくれます。

https://github.com/morimasato/mt-plugin-accesscounter https://github.com/morimasato/mt-plugin-accesscounter

プラグインをmt/pluginsにアップロードしてAccessCounter.cgi のパーミッションを755にしてください。（レンタルサーバーがヘテムルの場合700）

パーミッションの設定が644になっている場合は500エラーとなり正常に機能しません。

プラグインのサイトにも説明がありますが、管理画面にアクセスするとデータベースの再構築を促されますので、指示にしたがって進めてください。

そして、以下のコードで「アクセスランキング」というウィジェットを作成。ちなみに**「limit=“10”」**は上位10件を指定しているところ。

<mt:If tag="BlogEntryCount"><br>    <mt:Entries sort_by="accessed_count" sort_order="descend" limit="10"><br>        <mt:EntriesHeader><br><div class="widget-recent-entries widget-archives widget"><br>    <h3 class="widget-header">アクセスランキング</h3><br>    <div class="widget-content"><br>        <ul class="widget-list"><br>        </mt:EntriesHeader><br>            <$mt:setvar name="rank" value="1" op="++"$><br>            <li class="widget-list-item"><a href="<$mt:EntryPermalink$>">#<$mt:var name="rank"$> <$mt:EntryTitle$></a></li><br>        <mt:EntriesFooter><br>        </ul><br>    </div><br></div><br>        </mt:EntriesFooter><br>    </mt:Entries><br></mt:If>

参考にサムネイル画像付きのリストにしたい場合はこんな感じ。

<mt:If tag="BlogEntryCount"><br>    <mt:Entries sort\_by="accessed\_count" sort\_order="descend" limit="5"><br>        <mt:EntriesHeader><br><div class="widget-recent-entries widget-archives widget"><br>    <h3 class="widget-header">人気記事</h3><br>    <div class="widget-content"><br>        <ul id="access-lanking"><br>        </mt:EntriesHeader><br>            <$mt:setvar name="rank" value="1" op="++"$><br>            <li><a href="<$MTEntryPermalink$>"><br>        <img src="<mt:EntryAssets type="image" limit="1"><$mt:AssetThumbnailURL height="60" square="1" encode_html="1"$><mt:Else><mt:Assets type="image" tag="@SITE_ICON" limit="1"><$mt:AssetThumbnailURL height="60" square="1" encode_html="1"$><mt:Else><$mt:SupportDirectoryURL with_domain="1" encode_html="1"$>theme_static/rainier/img/siteicon-sample.png</mt:Assets></mt:EntryAssets>" width="60" height="60" alt="<$MTEntryTitle$>" /> <br>        </a><br>        <a href="<$MTEntryPermalink$>"><p class="entry-title"><$MTEntryTitle trim_to="43+..."$></p></a></li><br>        <mt:EntriesFooter><br>        </ul><br>    </div><br></div><br>        </mt:EntriesFooter><br>    </mt:Entries><br></mt:If><br>

カテゴリページや月間ページ別のランキング表示もできるようです。（以下ページが参考になります）

http://akamiru.com/2014/02/mt-accesse-counter.html http://akamiru.com/2014/02/mt-accesse-counter.html

その他参考

http://every-rating.com/mt/access-countermovabletype.html http://every-rating.com/mt/access-countermovabletype.html

http://www.h-fj.com/blog/archives/2007/01/14-130509.php http://www.h-fj.com/blog/archives/2007/01/14-130509.php

ムーバブルタイプで関連記事一覧を表示する方法

Tue, 22 Apr 2014 20:31:09 +0900

ムーバブルタイプで関連記事一覧を表示する方法

TagSupplementalsというプラグインを使って関連記事リストを表示する方法を書き留めておきます。このプラグインはOgawa::Memorandaが提供していて、タグに関連する記事を表示することが可能です。

http://code.as-is.net/public/wiki/TagSupplementals_Plugin.ja_JP http://code.as-is.net/public/wiki/TagSupplementals_Plugin.ja_JP

TagSupplementalsをmt/pluginsにアップロードするだけで準備は完了です。

そして、以下のコードで「関連記事」というテンプレートモジュールを作成。ちなみに**「lastn=“5”」**は5件の表示を指定しているところ。

<div class="widget"><br>    <h2 class="widget-header">関連記事</h2><br>    <ul class="widget-list"><br>      <MTRelatedEntries lastn="5"><br>        <li class="widget-list-item"><br>			<a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a><br>        </li><br>      </MTRelatedEntries><br>    </ul><br></div>

あとはテンプレート内で表示したい箇所に以下のMTタグを記載すればOK。

<$mt:Include module="関連記事"$>

参考にサムネイル画像付きのリストにしたい場合はこんな感じ。

<div class="widget"><br>  <h2 class="widget-header">関連記事</h2><br>  <ul class="widget-list"><br>    <MTRelatedEntries lastn="5"><br>      <li class="widget-list-item"><br>        <a href="<$MTEntryPermalink$>"><br>          <img src="<mt:EntryAssets type="image" limit="1"><br>          <$mt:AssetThumbnailURL height="60" square="1" encode_html="1"$><br>          <mt:Else><br>          <mt:Assets type="image" tag="@SITE_ICON" limit="1"><br>          <$mt:AssetThumbnailURL height="60" square="1" encode_html="1"$><br>          <mt:Else><br>          <$mt:SupportDirectoryURL with_domain="1" encode_html="1"$>theme_static/rainier/img/siteicon-sample.png<br>          </mt:Assets><br>          </mt:EntryAssets><br>          " width="60" height="60" alt="<$MTEntryTitle$>" /><br>        </a><br>        <a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a><br>      </li><br>    </MTRelatedEntries><br>  </ul><br></div><br>

文字数を指定してタイトルを表示-MovableType

Tue, 22 Apr 2014 19:20:50 +0900

ムーバブルタイプで投稿記事や関連記事の一覧を表示するときなどで、1行の高さが決まっていて指定文字数文だけ表示したい場合は以下で簡単にできます。

<$MTEntryTitle trim_to="30"$>

30文字だけ表示したい場合**「trim_to=“30”」**を加えればいいだけ。

行末に「…」を付けたい場合

<$MTEntryTitle trim_to="30+..."$>

**「trim_to=“30+…"」**とするだけ。超簡単です。

phpMyAdminでMovableTypeの内容を一括で置換えるSQL文

Wed, 05 Feb 2014 19:54:44 +0900

MovableTypeの投稿に含まれる文字列を一括で置換えたい場合、phpMyAdminで以下のSQL文を実行すれば、すべての投稿で該当する文字列を一括で置換えてくれます。

例えば、「http://qwerty.work/」を「/」にしたい場合、

UPDATE mt_entry SET entry_text=REPLACE(entry_text, "http://qwerty.work/", "/") WHERE entry_text IS NOT NULL;

といった感じで

UPDATE テーブル名 SET セル名=REPLACE(セル名,"置換前の文字列","置換後の文字列");

となるようにすればOK。

文字列中に「"」（ダブルクオーテーション）がある場合は「\」を入れてエスケープを入れます。

UPDATE mt_entry SET entry_text=REPLACE(entry_text, "<img src=\"hoge.jpg\">", "<img src=\"fuga.gif\">") WHERE entry_text IS NOT NULL;

正規表現を使えばもっといろいろな置換ができると思いますが、そこまでのスキルがないのでまた後日…。

PHPで変数が未定義でエラーになってしまうときの対処

Mon, 02 Dec 2013 19:39:46 +0900

ダウンロードしてきたPHPのソースをサーバーに置いてワクワクしながらブラウザでいざ表示ってときにほとんどのケースで**「Notice: Undefined variable～」**というエラー表示になります(T_T)

原因は変数が定義されていないから

初期値は空だからと思って定義しなかったら、PHPは使用する変数にNULLでもいいから情報を予め入れておかないとエラーとなります。

$foo = "";
$foo = null;
$foo = isset($_GET["foo"]) ? $_GET["foo"] : NULL;

沢山の変数にいちいちNULLや"“を定義するのは面倒なので、なにか簡単にエラー回避して解決できないかと検索したら、ありました。

変数に@を付ける

echo @$foo;

php.iniでerror_reportingを設定しておく

error_reporting = E_ALL & ~E_NOTICE

スクリプト内でerror_reporting関数でエラーを制御する

error_reporting(E_ALL ^ E_NOTICE);

参考サイト

自分の環境の場合、Apaatchのレンタルサーバーではエラーが出ないのに、ローカルのIISだと出たりするなど、WEBサーバーが違うからかな？と思うこともありましたが、あんまり関係がなく、エラー処理が丁寧に行われていないスクリプトだと、500エラーが出たりして正常に動きませんでしたが、上記の対策で解決できました。

Dreamweaverでアップロードした日本語のフォルダー名が文字化けする。

Sat, 16 Nov 2013 13:54:28 +0900

SEO対策として効果があるかどうかわかりませんが、検索キーワードの日本語でディレクトリを作ってみました。

例　http://example.com/賃貸/アパート/ ところが、Dreamweaverでアップロードしてリモートビューで見てみると「賃貸」も「アパート」もフォルダー名が文字化けしていました。

文字化けしているだけでアクセスはできるのかな？と思いましたが404エラー…。
UTF-8でURLエンコードした文字で名前を変更してもエラー…。
サーバーの内部エンコードがEUC-JPなので、EUC-JPでURLエンコードした文字で名前を変更してもエラー…

いろいろ調べた結果、Windowsで作成されたフォルダーやファイル名はシフトJISになっているらしく、Windows版のDreamweaverはシフトJISのままアップロードするので文字化けする模様。

UTF-8やEUC-JPでアップロードするためにはFFFTPなど、文字エンコードを指定してアップロードできるFTPソフトを使用しなければならないようです。

実際にFFFTPを使い、UTF-8でアップロードしてみたところ、「http://example.com/賃貸/アパート/」でアクセスできました。

ただ、Dreamweaverのリモートビューでは文字化けしていました…。

DreamweaverのFTP機能をもうちょっと強化して欲しいですね。

日本語を含むURLのRewriteは.htaccessをBOMなしで保存する

Fri, 08 Nov 2013 17:25:54 +0900

mod_rewriteで日本語を含むURLからのアクセスをリダイレクトしようと.htaccessに以下を記述しました。結局は以下の書き方で正しかったのですが、404エラーや500エラーが出て動きませんでした。いろいろなサイトを参考に試行錯誤するものの時間ばかり消費して心が折れそうになりました。

http://qwerty.work/ブログ/にアクセスがあったら、http://qwerty.work/blog/にリダイレクトする

Redirect permanent /ブログ/ http://qwerty.work/blog/<br>
または<br>
RewriteRule ^ブログ/$ /blog/ [R,L]

上記で正しく動くはずが動かなかったのは.htaccessをUTF-8の「BOMあり」で保存していたのが原因でした。BOMがどういうものかわかりませんが、「UTF-8（BOMあり）」で保存すると、例えURL内の文字や.htaccessの文字がちゃんとURLエンコードされていても転送元にエンコード文字や日本語があるとエラーになるようです。

「UTF-8とUTF-8Nの違いによるワナ」を参考に「BOMなし」のUTF-8（UTF-8N）で保存したら、ちゃんとリダイレクトできました。メモ帳でできるかどうかわかりませんが、私の場合、テキストエディターのEmEditorで「BOMなし」保存しました。

ちなみに転送元の「ブログ」はUTF-8でダイレクト（URLエンコードなし）で書かないと動かないようです。

逆に、転送先に日本語が含まれている場合は、URLエンコードしていないとダメです。

http://qwerty.work/blog/にアクセスがあったら、http://qwerty.work/ブログ/にリダイレクトする

RewriteRule ^blog/$ /¥%e3¥%83¥%96¥%e3¥%83¥%ad¥%e3¥%82¥%b0/ [NE,R,L]

また、URLエンコードされた文字列の「%」の前に「\」を付けてエスケーブさせておくのと、「NE」を行末に入れておかないとURLエンコードの文字列のまま出力されたり、「%」なしの文字列が表示されたりします。

WEBメールを既定のメールソフトに設定する「デフォルトWebメーラー」

Sat, 19 Oct 2013 22:46:08 +0900

最近、メインのメーラーをWindowsメールからOutlook.comに乗り換えました。ただ、メールを作成するためにいちいちブラウザを立ち上げたり、メールアドレスを入力しないといけないなどが面倒ですが、「デフォルトWebメーラー」が解決してくれて、使い勝手をよくしてくれます。

ウィンドウズの既定のメールソフトを変更するソフトで、これを使えば「mailto:」が設定されているリンクをクリックすると、ブラウザの起動からOutlook.comのメールフォームの表示までやってくれます。

http://attosoft.info/blog/default-webmailer/#platform http://attosoft.info/blog/default-webmailer/#platform

しかも、GmailやYhahooメールを含め、使えるWEBメールの種類が豊富で、IEかChromeか使うブラウザも指定できます。

Outlook.comを使う場合は「Windows Live Hotmail」を選択します。

Chromeでもちゃんと使えるけど、Outlook.comなんで、なんとなくIEにしてみた。

これでMAILTOプロトコルで使う既定のメールソフトはOutlook.comにできました。

しかし、問題はMAPIMAIL経由でローカルアプリケーションからWEBメールのフォームを呼び出すことができません。結局Windows7やVistaはローカルで使うメールソフトが必要ということなんですね。

WindowsメールからOutlook.comに移行する方法のメモ

Fri, 18 Oct 2013 22:03:03 +0900

メールソフトを使用していて、パソコンが壊れると修復するまで仕事のメールが見れずに困ったことがありました。最近はGmailやYahooメールなどWEBメールがありますが、仕事用としてはOutlook.comが一番使えると思いました。

ただ、ローカルのメーラーにある過去のメールをOutlook.comにアップロードしなければなりません。そのいくつかの方法メモ。

IEで「Mail Migration アドオン」を使用する方法

http://go.microsoft.com/fwlink/p/?linkid=254689 http://go.microsoft.com/fwlink/p/?linkid=254689

「eM Client」というソフトを使う方法

http://www.gworks.jp/2013/05/pop-outlook-com/ http://www.gworks.jp/2013/05/pop-outlook-com/

移行後の参考に

WEBメールを既定のメールソフトに設定する「デフォルトWebメーラー」

URLだけでサイトのスクリーショット（サムネイル）を表示できるAPIまとめ

Sat, 14 Sep 2013 23:33:22 +0900

サイトのサムネイルに『Mozshot』を使っていましたが、使用者が多いせいか最近は画像が重たくてページの表示が最近遅いです。でも、こういったサービスは便利なので、他にないか探してみました。

wordpress.comのAPI

エンコードしたURLを指定します。「w」パラメータで画像の幅を自由に指定できWordpressのプラグインではないので、Wordpressを使用していないサイトでも使えます。

https://s.wordpress.com/mshots/v1/https%3A%2F%2Fja.wordpress.com?w=250

【サンプル】wordpress.com のスクリーンショットを幅250pxで取得してみました。

WordPressのプラグインは以下があり、ショートコードでサムネイル表示できるので便利です。

HeartRails Capture を使う

有名どころ。影や枠線をつけたり、角丸にしたり。サイズも指定できます。

HeartRails Capture | サムネイル画像／PDF ファイル作成サービス

http://capture.heartrails.com/300×225?http://capture.heartrails.com/

【サンプル】HeartRails Capture のスクリーンショットを300x225pxで取得してみました。

SimpleAPI ウェブサイトサムネイル作成API

128×128のサムネイル画像を取得できます。

SimpleAPI – ウェブサイト・サムネイル化ツール

http://img.simpleapi.net/small/http://img.simpleapi.net/

【サンプル】SimpleAPI トップページのサムネイルを取得してみました。

MozShot

64×64 / 128×128 / 256×256 などの大きさが選べます。

Mozshot

https://image.thum.io/get/width/300/crop/200/http://mozshot.nemui.org/

【サンプル】MozShotのスクリーンショットを256×256で取得してみました。

ウェッジ：ウェブサイトのスクリーンショットを自動生成

200×150の大きさで取得されるようです。

ウェブサイトのスクリーンショットを自動生成 – デザインスタジオウェブログ – WEB関連 – ウェッジ

http://www.j-wedg.co.jp/img/?url=http://www.j-wedg.co.jp/

【サンプル】

thumbalizr

海外のサービス。サイズやクオリティなど細かく指定でき、API Keyを登録すれば指定できるパラメータが増えます。「powered by thumbalizr.com」という表示が付きます。

有料プランにすれば書き出す形式を指定したり、ウォーターマークをつけたりできるようです。

thumbalizr – thumb your webpages

https://api.thumbalizr.com/?url=https://www.thumbalizr.com/&width=250

【サンプル】

その他

Thumboo!

Thumboo! Free Website Thumbnails and PHP Script to Generate Web Screenshots

海外のサービス。サイトにアクセスしてスクリーンショットを撮りたいURLを入力し、生成されたPHPコードをコピー＆ペーストすれば自分のブログなどでサムネイル画像を表示できます。API Keyを登録すればウェブサービスなどに組み込んで動的にも使えるようになるみたいです。

はてなスクリーンショット

はてなダイアリーなど、はてなのサービス内でのみ使用できます。

livedoor Screenshot

livedoor Wikiなど、ライブドアのサービス内でのみ使用できます。

mb_encode_mimeheaderで文字化けするときの対処方法

Tue, 02 Jul 2013 17:39:36 +0900

フォームに入力された内容をPHPのmb_send_mailでメールの送信をしようと、以下のようなスクリプトで送信したらmb_encode_mimeheaderで指定した文字が文字化けしました。

<?php
mb_language("Ja") ;
$to = mb_encode_mimeheader("Ａ様","iso-2022-jp")."<a@aaa.com>";
$subject = "◯◯の件について";
$subject = mb_convert_encoding($subject,"iso-2022-jp","auto");
$content = "Ａ様\nこの度はありがとうございました。\nＢより";
$content = mb_convert_encoding($content,"iso-2022-jp","auto");
$from = "From:".mb_encode_mimeheader("差出人Ｂ","iso-2022-jp")."<b@bbb.com>";
mb_send_mail($to,$subject,$content,$from);
?>

これで送信したら、以下のようなメールが届きました。

From: 綏??坂査鐚

To: 鐚≧?

件名: ◯◯の件について

本文:

Ａ様

この度はありがとうございました。

Ｂより

原因

サーバーの内部エンコーディングとmb_encode_mimeheaderで使う文字は同じエンコーディング同士じゃないと文字化けするようです。今回の環境では以下のエンコーディングとなっています。

内部エンコーディング：EUC-JP
フォームの入力値：UTF-8
メール送信：ISO-2022-JP

対処方法

内部エンコーディング：EUC-JP
フォームの入力値：EUC-JP
メール送信：ISO-2022-JP

となるように、mb_encode_mimeheaderに使う文字列を内部エンコーディングに合わせて『EUC-JP』にしてみました。

<?php
mb_language("Ja") ;
$to = mb_convert_encoding("Ａ様","euc-jp","auto");
$to = mb_encode_mimeheader($to,"iso-2022-jp")."<a@aaa.com>";
$subject = "◯◯の件について";
$subject = mb_convert_encoding($subject,"iso-2022-jp","auto");
$content = "Ａ様\nこの度はありがとうございました。\nＢより";
$content = mb_convert_encoding($content,"iso-2022-jp","auto");
$from = mb_convert_encoding("差出人Ｂ","euc-jp","auto");
$from = "From:".mb_encode_mimeheader($from,"iso-2022-jp")."<b@bbb.com>";
mb_send_mail($to,$subject,$content,$from);
?>

すると正常なメールが届きました。

From: 差出人Ｂ

To: Ａ様

件名: ◯◯の件について

本文:

Ａ様

この度はありがとうございました。

Ｂより

PHPでJavascriptを書き出しHTMLから読み込む

Mon, 03 Jun 2013 12:53:45 +0900

ブログの新着記事のリストを表示したいけど、そのページではPHPが使えない。ってときに使えます。また外部のブログのRSSを読み込みたい時に使えます。

まず、PHPで最新の投稿記事をブログのRSSから読み込み、動的な内容に合わせてJavascriptを書き出す。そしてHTMLページからJavascriptで呼出し表示します。

<?php
//読み込みたいXMLのパス
$rssurl = "http://qwerty.work/blog/index.xml?".date( "YmdHis", time() );
$rssdata = simplexml_load_file($rssurl);
//表示件数
$num_of_data = 5;
$outdata = "'<ul>'\n";
	for ($i=0; $i<$num_of_data; $i++){
		$pubDate = $rssdata->channel->item[$i]->pubDate;
		$pubDate = date('Y-m-d',strtotime($pubDate));

		$outdata .= "+'<li>'\n";
		$outdata .= "+'<small>". $pubDate . "</small>&nbsp;";
		$outdata .= "<a href=\"";
		$outdata .= $rssdata->channel->item[$i]->link;
		$outdata .= "\">";
		$outdata .= $rssdata->channel->item[$i]->title;
		$outdata .= "</a>'\n";
		$outdata .= "+'</li>'\n";
	}
		$outdata .= "+'</ul>'";
        
//↓これがないと書き出したスクリプトをJavascriptとして認識してもらえない
header("Content-type: application/x-javascript");
echo "document.write($outdata)";
?>

上記を呼び出すと以下の内容のJavascriptが書き出されます。（サンプル）

<?php
//読み込みたいXMLのパス
$rssurl = "http://qwerty.work/blog/index.xml?".date( "YmdHis", time() );

$rssdata = simplexml_load_file($rssurl);

//表示件数
$num_of_data = 5;

$outdata = "'<ul>'\n";
	for ($i=0; $i<$num_of_data; $i++){

		$pubDate = $rssdata->channel->item[$i]->pubDate;
		$pubDate = date('Y-m-d',strtotime($pubDate));

		$outdata .= "+'<li>'\n";
		$outdata .= "+'<small>". $pubDate . "</small> ";
		$outdata .= "<a href=\"";
		$outdata .= $rssdata->channel->item[$i]->link;
		$outdata .= "\">";
		$outdata .= $rssdata->channel->item[$i]->title;
		$outdata .= "</a>'\n";
		$outdata .= "+'</li>'\n";
	}
		$outdata .= "+'</ul>'"; 

echo "document.write($outdata)";
?>

これをHTMLから以下のように読みこんで表示させます。

<script type="text/javascript" src="newBlogList.php"></script>

すると以下のように表示されます。

IIS8の設定で最低限行なわなければならない事

Mon, 29 Apr 2013 20:28:40 +0900

Windows 2012 ServerでIISを開始したからと言ってもページを表示できない状態で、簡単には動いてくれなかったのでメモ。

WEBサーバー

サイトが保存されているフォルダにアクセス権を設定。 EveryoneとかIIS_IUSRとか。
**[サーバーの役割]-[Webサーバー(IIS)]-[アプリケーション開発]の[CGI]と[ISAPI拡張]**をインストール
[インターネットインフォメーションサービス(IIS)マネージャー]-[ISAPIおよびCGIの制限]-[機能設定の編集]で[特定できないCGIモジュールを許可する]、[特定できないISAPIモジュールを許可する]
**[インターネットインフォメーションサービス(IIS)マネージャー]-[ハンドラーマッピング]-[機能のアクセス許可の編集] **で **[実行]**にチェックを入れる

PHPを使う場合

[インターネットインフォメーションサービス(IIS)マネージャー]-[ハンドラーマッピング]-[機能のアクセス許可の編集] で** [モジュールマップの追加]**する

要求パス：*.php

モジュール：FastCgiModule

実行可能ファイル：c:\php5\php-cgi.exe

名前：PHP FastCGI(任意)

その他関連ページ

IIS8のクラシックASPがインクルードでエラーを出すときの対処方法

Thu, 18 Apr 2013 20:44:39 +0900

結果からいうと**『親パスを有効にする』をTrue（有効）**にすれば解決です。IIS8ではデフォルトでFalse(無効）になっているため、以下のようなエラーが出ました。

An error occurred on the server when processing the URL. Please contact the system administrator.

If you are the system administrator please click here to find out more about this error.

（URLを処理する際のエラーは、サーバー上で発生した。システム管理者に連絡してください。

あなたがいる場合は、システム管理者は、このエラーの詳細を調べるにはここをクリックしてください。）

上記のエラー内容ではなんのことかわからなかったので、ログ（C:\inetpub\logs\LogFilesにあります。）を見て見ました。すると『|2|ASP_0131|許可されていない親パスです』というのがあったので、検索すると以下のページにたどり着きました。

http://technet.microsoft.com/ja-jp/library/ee175738.aspx http://technet.microsoft.com/ja-jp/library/ee175738.aspx

https://docs.microsoft.com/ja-jp/previous-versions/ee175738(v=technet.10)?redirectedfrom=MSDN https://docs.microsoft.com/ja-jp/previous-versions/ee175738(v=technet.10)?redirectedfrom=MSDN

設定方法

『IISマネージャ』を開く。（『コントロールパネル』-『管理』にあります。）
対象のサイトを選択し、『ASP』を開く。
『親パスを有効にする』をTrue（有効）にして『適用』を押す。

これであっさり解決できました。

IIS8で80番ポート以外で作成したWEBサイトが見れないときの解決方法

Tue, 16 Apr 2013 22:46:40 +0900

IISでWEBサーバー起ち上げたのにサイトが表示されない

会社のイントラネットをWindows 2012 Server EssentialのIIS8上に新しく作成したサイトに移行したら、サイトが見れない状況に陥りました。

新しいサイトのポート番号は8080で作成したのですが、

Default Web Siteに仮想ディレクトリに置いたら見れる
新しいサイトを作るとサーバーからは見れるけど、クライアントPCからは見れない

といったトラブル。

原因

通信を許可されていないポートを使っているので、単純にファイアウォールでブロックされているだけでした。ファイアウォールに8080番を許可する登録をしたら解決しました。

設定方法

コントロールパネルのWindowsファイアウォールを開く。
受信側に新しい規則を追加していきます。
今回は通信を許可するポートを追加するので『ポート』を選択。
追加したいポート番号を入力します。今回は8080番ポートなので『8080』と入力。
『接続を許可する』を選択。
該当するネットワークを選択するのですが、とりあえず全部選択しました。
適当に名前と説明を入力して完了。

phpMyAdminでWordPressのドメインを一括で置換えるSQL文

Wed, 27 Mar 2013 14:56:00 +0900

WordPressを使用しているサイトのドメインを変更しました。データベースやMySQLを使用していて、phpMyAdminで旧ドメインと新ドメインを手作業で入れ替える編集をしていましたが、さすがに投稿数が多いと面倒くさいです。でも、以下のSQL分を実行するとサクッと検索・置換ができます。

UPDATE wp_options SET option_value=REPLACE(option_value,"旧ドメイン","新ドメイン");
UPDATE wp_posts SET post_content=REPLACE(post_content,"旧ドメイン","新ドメイン");
UPDATE wp_posts SET guid=REPLACE(guid,"旧ドメイン","新ドメイン");
UPDATE wp_postmeta SET meta_value=REPLACE(meta_value,"旧ドメイン","新ドメイン");

Wordpressの新着情報リストを表示する方法。

Wed, 20 Feb 2013 22:55:49 +0900

ワードプレスに投稿した記事を新しい順にリスト形式で表示する方法のメモ。

<h2>新着情報</h2><br>
<?php<br>
  $posts = get_posts('numberposts=5&category=');<br>
  global $post;<br>
?>
<br>
<?php if($posts): ?><br>
  <ul><br>
    <?php foreach($posts as $post):<br>
      setup_postdata($post); ?><br>
      <li><?php the_time('Y年m月d日');?>&nbsp;<a href="<?php the_permalink();?>"><?php the_title(); ?></a></li><br>
    <?php endforeach; ?><br>
  </ul><br>
<?php endif; ?>

『numberposts』は表示する『件数』

『cat』は表示したい『カテゴリ』の指定しなければ全投稿で、「1,3,5」などカンマで区切れば細かく指定することもできるようです。

初歩的なことですが、Wordpressの固定ページ編集の欄に記述したPHPを動かすには『Exec-PHP』などPHPを有効にするためのプラグインを入れないと、ソースが表示されるだけで動きません。

SQLみたいにFacebookの情報を取得できるFQLについてのメモ。

Tue, 29 Jan 2013 15:32:34 +0900

役にたちそうなので、とりあえずメモ。

Facebook Query Language (FQL) リファレンスで取得できる情報の種類を確認できます。

Graph APIエクスプローラでリクエストに対して、取得できる実際のデータを見ることができます。タブを切り替えればFQL文を実行してみることもできます。

ネットショップ構築用のカートシステム

Mon, 15 Oct 2012 20:55:32 +0900

PHPがベースでオープンソースのインターネットショッピングサイト（ECサイト）構築用のカートシステムを探して見つけたいくつかのサイトをメモ。

EC-CUBE

日本初のECオープンソースかなり高機能。クレジットカード決済各社との連携など、多数のモジュール（プラグイン）があり。

https://www.ec-cube.net/ https://www.ec-cube.net/

CS-Cart

日本製でページや管理画面がシンプルで良さそう。フリー版と有料のプロ版がある。

https://www.cs-cart.jp/ https://www.cs-cart.jp/

Welcart

日本初のWordPress専用ショッピングカート。ブログをショッピングサイトとして利用することができます。

https://www.welcart.com/ https://www.welcart.com/

SOY Shop

無償で使用でき、なおかつカスタマイズ自由なオープンソース型ショッピングカートCMS。

https://www.soyshop.net/ https://www.soyshop.net/

SKELETON CART

MovableTypeとWordPressをECサイトにできるカートプラグイン

https://skeleton.juxtaposition.jp/ https://skeleton.juxtaposition.jp/

Zen Cart（ゼン・カート）

オープンソースで開発が続けられている統合型ECサイト構築システムです。 osCommerceから派生しており、SEO対策、豊富なプロモーション機能、デザインの拡張性など、日々進化しています。

https://zen-cart.jp/ https://zen-cart.jp/

osCommerce

国際的なコミュニティで開発が進められているECオープンソースです。ソース・コードが公開されているため、自由にカスタマイズして利用することができます。

https://www.oscommerce.com/ https://www.oscommerce.com/

Magento（マジェント）

米国Varien社が開発したオープンソースECソリューション。

https://www.magentocommerce.com/ https://www.magentocommerce.com/

Open Cart

https://www.opencart.com/ https://www.opencart.com/

対処方法「このサイトはコンピュータに損害を与える可能性があります。」

Thu, 24 May 2012 21:14:48 +0900

あるサイトをあるキーワードでGoogle検索すると「このサイトはコンピュータに損害を与える可能性があります。」との注意文が検索結果に表示されているのでどうにかして欲しいと僕に相談の連絡が入りました。

検索の結果をクリックすると以下の文章。

警告- このウェブサイトにアクセスすると、コンピュータに損害が生じる可能性があります。

検索のヒント: 前のページに戻って、他の検索結果を選んでください。

別のキーワードで検索してみてください。または、ご自身の責任のもとで http://www.*****.com/ にアクセスできます。

見つかった問題の詳細については、Google が提供するこのサイトのセーフブラウジング診断ページをご覧ください。

不正なオンラインソフトウェアから保護する方法については、StopBadware.org をご覧ください。

サイトの管理者である場合は、Google のウェブマスター ツールを使用して、サイトの再審査を依頼できます。審査プロセスの詳細については、Google のウェブマスター ヘルプ センターをご覧ください。

文章中の「セーフブラウジング診断ページ（http://www.google.com/safebrowsing/diagnostic?site=http://www.*****.com/&hl=ja）をクリックすると以下の文章が現れた。

セーフブラウジング

診断ページ: http://www.*****.com/

http://www.*****.com/ の現在の状況

疑わしいサイトとして認識されています。このウェブサイトにアクセスするとコンピュータに損害を与える可能性があります。

過去 90 日間に、このサイトの一部で不審な動きが 3 回検出されています。

Google がこのサイトを巡回したときの状況

このサイトで過去 90 日間に Google がテストした 6 ページのうち 6 ページで、ユーザーの同意なしに不正なソフトウェアがダウンロードされ、インストールされていたことが判明しました。Google が最後にこのサイトを巡回したのは 2012-05-24 で、このサイトで不審なコンテンツが最後に検出されたのは 2012-05-24 です。このサイトは 1 個のネットワーク（AS2514 (INFOSPHERE) など）でホストされていたことが判明しました。

不正なソフトの感染を広げる媒介をしていたかどうか

過去 90 日間に http://www.*****.com/ が他サイトへの感染媒体となっていた形跡はありません。

サイトで不正なソフトウェアをホストしていたかどうか

いいえ、このサイトでは過去 90 日間に不正なソフトウェアのホスティングは検出されていません。

原因

第三者が正当なサイトに不正なコードを追加したことが原因で、警告メッセージが表示される可能性があります。

次のステップ:

前のページに戻ってください。
このウェブサイトの所有者の場合は、Google ウェブマスターツールを使用してサイトの審査をリクエストできます。審査手続きの詳細については、Google ウェブマスター   ヘルプセンターをご覧ください。

いろいろ検索してみると、原因は「ウィルス感染」によるサイトの改ざんでした！

どうやらパソコンの脆弱性をついて、ウィルスに感染したパソコンからサイトのFTPアカウントとパスワードを盗み出したり、サイトに攻撃をしかけたりして、不正なコードを書き込んでいくようです。

調査方法

サイトがウィルスに感染していたり、不正なコードが書き込まれていないか「gredでチェック」で検査したいURLを入力すると調べることができます。

実際に検索すると以下のように、改ざん（感染）しまくっていました。

対処方法

まず、FTPのパスワードが漏洩している可能性があるので、ウィルスに感染していないパソコンでパスワードを変更。

ウィルス感染で改ざんされた疑いのある該当のファイルを開いてみると、なんかおかしなコードがありました。（おかしなコードのみを抜粋して掲載しています。）

この部分を削除して再検査をしてみると「安全です」になりました。

ただ、検索結果には依然と「このサイトはコンピュータに損害を与える可能性があります。」と警告が出たままになっているので、Google ウェブマスターツールに審査リクエストをする必要があります。

Facebookで「いいね！」「シェア」されたときのサムネイル画像を指定する方法

Fri, 16 Mar 2012 01:20:02 +0900

自分のブログをシェアしたり、されたときにあまり表示されて欲しくない画像がサムネイルで表示されたりすることがありますが、その画像を意図的に指定する方法があるようです。

OGP （Open Graph Protocol）といわれるものを、～に追加することでできるようで、以下の一行を加えるだけでできます。

<meta property="og:image" content="http://指定したい画像のパス" />

今回、指定した画像はこれ↓

でも、上記だけでは内部的に情報不足で、Facebookにおいては下記６つが必須なようです。

og:title
og:type
og:image
og:url
og:site_name
fb:admins or fb:app_id

<meta property="og:title" content="その記事のタイトル" />
<meta property="og:type" content="blog" />
<meta property="og:image" content="http://指定したい画像のパス" />
<meta property="og:url" content="http://シェアするURL" />
<meta property="og:site_name" content="サイト名" />
<meta property="fb:admins" content="1234567890"/>

最後のfb:adminsの設定でfacebookのユーザID

以下のサイトでは、シェアした際にFacebookが取得する情報をあらかじめ確認をすることや、足らない情報などを表示することができます。

OGP （Open Graph Protocol）については以下のサイトが参考になります。

.htaccessによるURL書き換え「Rewrite（リライト）」で転送する方法

Sun, 26 Feb 2012 21:06:38 +0900

ドメインやURLの変更による転送

.htaccessに記述することにより、外部から要求されたリクエストURLを書き換えてリダイレクトすることができます。

サイト移転、ファイル名の変更、ディレクトリ変更、更にはアクセス拒否まで絶大な効果を発揮します。

具体的には、外部から要求されたリクエストURLをApacheのmod_rewrite拡張モジュール（URL書き換えエンジン）を使用し、正規表現を使って書き換えます。Redirectと異なり、リクエストの URL が実在しなくても転送が可能です。

注意：サーバーの環境 Apache1.2 以降で使用可能。 Apache のhttpd.confで、mod_rewriteモジュールが利用可能になっている必要があります。

.htaccess ファイルにおける Rewrite の記述方法

一般的な書式

RewriteEngine on
RewriteBase /

#WWWありで統一
RewriteCond %{HTTP_HOST} ^(example\.com)(:80)? [NC]
RewriteRule ^(.*)$ http://www.example.com/$1 [R=301,L]

#WWWなしで統一
RewriteCond %{HTTP_HOST} ^www\.(.*)$ [NC]
RewriteRule ^(.*)$ https://%1/$1 [R=301,L]

#HTTPSを強制
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

#ディレクトリの移転
RewriteRule ^old_dir(.*)$ /new_dir$1 [R=301,L]

#ファイルの移転
RewriteRule ^old_dir/index\.html$ /new_dir/index.html [R=301,L]

#クローラのアクセス禁止
RewriteCond %{HTTP_USER_AGENT} Badbot-1 [NC, OR]
RewriteCond %{HTTP_USER_AGENT} Badbot-2 [NC]
RewriteRule !^robots\.txt$ - [F]

RewriteEngine off

注意すること

書き換え対象に正規表現の特殊文字が含まれている場合は、\（日本語環境では円マーク）でエスケープします。
書き換え対象old_dirが、/から始まっていないことに注意してください。
書き換え後/new_dirが、/から始まっていることに注意してください。

よく使うHTTPSとWWWなしにリダイレクトするルール

以下の2つはどちらも同じ動作をします。

それぞれ書く方法

RewriteEngine On

# httpをhttpsにリダイレクト
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

# wwwありをwwwなしにリダイレクト
RewriteCond %{HTTP_HOST} ^www\.(.*)$ [NC]
RewriteRule ^(.*)$ https://%1/$1 [L,R=301]

同時に書く方法

RewriteEngine On

# httpとwwwありの両方をhttpsとwwwなしにリダイレクト
RewriteCond %{HTTPS} off [OR]
RewriteCond %{HTTP_HOST} ^www\.(.*)$ [NC]
RewriteRule ^(.*)$ https://%1%{REQUEST_URI} [L,R=301]

HTTPとWWWありで同時にアクセスがあった場合、複数のリダイレクト条件が連続して適用されることになり、サーバーからリダイレクト回数が多いという理由でで404エラーが返される場合があります。対処方法は今のところ不明です。

ファイルの移転

ファイル名や階層を変更したとき、古いURLにアクセスがあったら新しいURLに転送します。

RewriteRule ^old_dir/index\.html$ /new_dir/index.html [R=301,L]

解説

old_dir/index.htmlのアクセスを/new_dir/index.htmlにリダイレクトし、ここではファイルが永久に移転したことを通知しています。書き換えが行われたら処理終了。301は恒久的なリダイレクトで、一時的なリダイレクトは302を指定します。

ディレクトリの移転・転送

リクエストに対して、ディレクトリ全体が移転したことを知らせます。http://～から記述することにより、外部ドメインへのリダイレクトも可能です。サイトの引っ越しなど、旧ドメインから新ドメインに転送に使います。

内部移転

階層を変更したときなどに使います。

RewriteRule ^old_dir(.*)$ /new_dir$1 [R=301,L]

外部移転

ドメイン変更した際、旧ドメインにアクセスがあった場合、新しいドメインのサイトに転送したいときに使います。工事中など、一時的な転送の場合は302を使用します。

書式

RewriteRule ^old_dir(.*)$ https://www.example.com/new_dir$1 [R=301,L]

使用例

RewriteRule ^(.*)$ https://www.example.com/$1 [R=301,L]
RewriteRule (.*)$ https://www.example.com [R=301,L]

解説 .*は任意の1文字0回以上の繰り返しを意味しています。(.*)に該当する文字列が、後方参照$1に入ります。

拡張子の変更

リクエストに対して、ファイルの拡張子を書き換えてリダイレクトします。

# 拡張子が .html のファイルを、全て .phpl に変更する
RewriteRule ^(.*)\.html$ /$1.php [R=301,L]

# 特定のディレクトリに対して、ファイルの拡張子を変更する
RewriteCond %{REQUEST_URI} ^/example/ [NC]
RewriteRule ^(.*)\.html$ /$1.php [R=301,L]

# 特定のディレクトリを除いて、ファイルの拡張子を変更する
RewriteCond %{REQUEST_URI} !^/example/ [NC]
RewriteRule ^(.*)\.html$ /$1.php [R=301,L]

解説特定のディレクトリに関しては、（行頭から）/example/の大小を問わない文字を含む（もしくは含まない）アクセスに対して、拡張子.htmlを.phpに書き換えてリダイレクトしています。ここではファイルが永久に移転したことを通知しています。書き換えが行われたら処理終了。

サーバ移転（サイトの引越し）

リクエスト全体を、新しいドメインへリダイレクトします。

RewriteRule ^(.*)$ http://www.new-example.com/$1 [R=301,L]

解説 HTTPステータスコードR=301(Moved Permanently) を付加することにより、URLが永久に移動したことを検索サイトのクローラに通知します。

この処理で、旧サイトのページランクを自動的にほぼ引き継ぐことができます。検索サイトへの反映は、クローラにもよりますが、1週間から1ヶ月ほどかかります。

ドメインの統一

サーバーは1つのドメイン、例えばexample.comに対して、www.example.comでもリクエストを受け付けます。

host.comがサブドメインを使用している場合は、更にexample.host.comとwww.example.host.comでも閲覧可能になり、合計4つのサイトにアクセスが分散することになります。これは、 SEO 対策上あまり好ましいことではありません。ここでは、Rewriteを使って、www.example.comに統一する場合を記述します。

サブドメインを使用していない場合

RewriteCond %{HTTP_HOST} ^(example\.com)(:80)? [NC]
RewriteRule ^(.*)$ http://www.example.com/$1 [R=301,L]

サブドメインを使用している場合

RewriteCond %{HTTP_HOST} ^(example\.com)(:80)? [NC,OR]
RewriteCond %{HTTP_HOST} ^(example\.host\.com)(:80)? [NC,OR]
RewriteCond %{HTTP_HOST} ^(www\.example\.host\.com)(:80)? [NC]
RewriteRule ^(.*)$ http://www.example.com/$1 [R=301,L]

アクセス制限

サーバ変数を取得して、アクセス制限を掛けます。

アクセス制限は、サーバに思わぬ負荷をかけることがあります。
不必要なアクセス制限はできるだけ掛けないようにしてください。十分にアクセス情報を解析してから設定してください。設定によっては正当な訪問者もアクセスできなくなる可能性があります。

[F]は、「Forbidden（アクセス禁止）」を意味します。
特殊文字の前に\（日本語環境では円マーク）を付加する事に注意してください。
REMOTE_HOSTは、サーバーによっては取得できない場合があります。

特定のホストからのアクセスを全て禁止する

RewriteCond %{REMOTE_HOST} ^example\.com$ [NC, OR]
RewriteCond %{REMOTE_ADDR} ^192\.168\.1\.
RewriteRule ^.* - [F]

解説 REMOTE_HOSTが取得できない場合は、REMOTE_ADDRを使用してアクセス制限をかけます。

特定のブラウザからのアクセスを全て禁止する

RewriteCond %{HTTP_USER_AGENT} ^Mozilla/4\.0 \(compatible; MSIE 6\.0\)$ [NC]

RewriteRule ^.* - [F]

特定の Referer からのアクセスを全て禁止する

RewriteCond %{HTTP_REFERER} ^http://www\.example\.com/bad\.html$ [NC]
RewriteRule ^.* - [F]

特定の Referer 以外からのアクセスを全て禁止する（=特定の Referer からのみアクセスを全て許可する）

RewriteCond %{HTTP_REFERER} !^http://www\.example\.com/good\.html$ [NC]
RewriteRule ^.* - [F]

直リンクを全て禁止する

RewriteCond %{HTTP_REFERER} !example\.com [NC]
RewriteRule ^.* - [F]

解説 Referer がexample.comを含まないリクエストに対して、全てのアクセスを禁止します。

画像の直リンクを禁止する

RewriteCond %{HTTP_REFERER} !example\.com [NC]
RewriteRule \.(jpg|png|gif)$ - [F]

解説 Referer がexample.comを含まないリクエストに対して、拡張子が.jpgまたは.pngまたは.gifへのアクセスを禁止します。

特定のホスト & 特定のブラウザからのアクセスを禁止する

RewriteCond %{REMOTE_ADDR} ^192\.168\.1\.
RewriteCond %{HTTP_USER_AGENT} ^Mozilla/4\.0 \(compatible; MSIE 6\.0\)$

RewriteRule ^.* - [F]

特定の検索ロボット（クローラ）に対して、robots.txt以外のアクセスを禁止する

クローラのアクセス禁止は、サーバの負荷を伴います。そこで先に、ここに記述する全てのクローラをrobots.txtで拒否しておきます。それを無視した悪質クローラだけを、最終的にここでアクセス禁止にします。

RewriteCond %{HTTP_USER_AGENT} Badbot-1 [NC, OR]
RewriteCond %{HTTP_USER_AGENT} Badbot-2 [NC, OR]
RewriteCond %{HTTP_USER_AGENT} Badbot-3 [NC, OR]
RewriteCond %{HTTP_USER_AGENT} Badbot-n [NC]

RewriteRule !^robots\.txt$ - [F]

解説 HTTP_USER_AGENTが、Badbot-1, からBadbot-nの文字（文字の大小を区別しない）を含むクローラに対して、robots.txt以外のアクセスを禁止します。

※悪質クローラに対する対策の詳細は：検索ロボット対策をご覧ください。

説明

ディレクティブ

  ディレクティブと書式
  初期値
  説明




  RewriteEngine on/off
  off
  書き換えの可否を設定。


  RewriteOptions inherit
  -
   inherit : 現在の設定値を親ディレクトリの設定値から強制的に継承する。 


  RewriteBase /
  /
   書き換えのベースとなるパス（ベースが明白な場合は不要）。 


  RewriteCond テスト文字列 条件 パターン。
  -
  条件によるテスト文字列とパターンの比較。


  RewriteRule パターン 置換対象。
  -
  パターンを置換対象で置き換える。

オプション

  [R]
   強制的にリダイレクト (Redirect) する。

    [R=301] : 永久的に移動。HTTP レスポンスの「301 : Moved Permanently」を返します。

    [R=302] : 一時的な移動。HTTP レスポンスの「302 : Moved Temporarily」を返します、デフォルト。 


  [F]
   強制的にアクセス禁止 (Forbidden) にする。

    HTTP レスポンスの「403 : Forbidden」を返します。 


  [G]
   強制的に消去済み (Gone) にする。

    HTTP レスポンスの「410 : Gone」を返します。
    
    もはや存在しないページを消去済みとしてマークします。 


  [L]
   書き換えが行われたら終了 (Last) にする。

    現在の書き換え後の URL が後続のルール によってそれ以上書き換えられることを防止します。 


  [NC]
   パターンについて、文字の大小を区別しない(No Case)。
    
    つまり、"A-Z" と "a-z" は区別されません。 


  [OR]
  または。

正規表現

  文字
  説明




  !
  否定。


  .
  任意の1文字。


  [ ]
  括弧内のいずれかの文字。


  [^ ]
  括弧内のいずれかの文字以外。


  |
  または。


  ?
  直前の文字の0回または1回の繰り返し


  *
  直前の文字の0回以上の繰り返し。


  +
  直前の文字の1回以上の繰り返し。


  ( )
  選択範囲の境界を明示する、もしくは後方参照を作成する。


  ^
  行頭。


  $
  行末。


  $n
  (0 


  %{ }
  サーバ変数の取得。


  \
  （日本語環境では円マーク）正規表現の特殊文字をエスケープする。

サーバ変数

  変数名
  説明




  HTTP_USER_AGENT
  ブラウザの種類とバージョン。


  HTTP_REFERER
  参照元の URL 。


  HTTP_COOKIE
  設定されているクッキー情報。


  HTTP_FORWARDED
  プロキシサーバ情報。


  HTTP_HOST
  接続要求しているホスト名。


  HTTP_PROXY_CONNECTION
  接続先プロキシサーバとの接続状態。


  HTTP_ACCEPT
  ブラウザが認識可能なデータ形式。


  DOCUMENT_ROOT
  サイトのルートディレクトリ。


  SERVER_ADMIN
  サーバ管理者のメールアドレス情報。


  SERVER_NAME
  サーバのホスト名、ドメイン名、またはIPアドレス情報。


  SERVER_ADDR
  サーバのIPアドレス。


  SERVER_PORT
  送信に使われたサーバのポート番号。


  SERVER_PROTOCOL
  送信に使われたプロトコルの名前とレビジョン情報。


  SERVER_SOFTWARE
  起動したサーバソフトウエアの名前とバージョン情報。


  REMOTE_ADDR
  リモートホストのIPアドレス情報。


  REMOTE_HOST
  リモートホストのドメイン名。


  REMOTE_USER
  ユーザの認証名。


  REMOTE_IDENT
  リモートホストのユーザ名。


  REQUEST_METHOD
  リクエストを送信した方法。


  REQUEST_URI
  リクエストされたURI。


  SCRIPT_FILENAME
  現在実行しているスクリプト名。


  PATH_INFO
  クライアントから送られるパス情報。


  QUERY_STRING
  URL に付加して渡された "?" 以降の文字列。


  AUTH_TYPE
  ユーザを認証するときに使用する認証方法。


  TIME_YEAR
  サーバのシステム日付・年


  TIME_MON
  サーバのシステム日付・月


  TIME_DAY
  サーバのシステム日付・日


  TIME_HOUR
  サーバのシステム日付・時


  TIME_MIN
  サーバのシステム日付・分


  TIME_SEC
  サーバのシステム日付・秒


  TIME_WDAY
  サーバのシステム日付・曜日


  TIME
  サーバのシステム日付・Unix タイムスタンプ。

Google Maps JavaScript API V3で地図を表示してみる。

Mon, 23 Jan 2012 20:32:37 +0900

google.load(‘jquery’, ‘1.3.2’);

$(document).ready(function() {
  var mapdiv = document.getElementById('map_canvas');
  var geocoder = new google.maps.Geocoder();
  var point = new google.maps.LatLng(34.057488,131.808716);
  var myOptions = {
		  zoom: 12,
		  center: point,
		  mapTypeControl: true,
		  navigationControl: true,
		  navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL},
		  mapTypeId: google.maps.MapTypeId.ROADMAP,
		  scaleControl: true
  };

  var map = new google.maps.Map(mapdiv, myOptions);
  var marker = new google.maps.Marker({
	  position: point,
	  map: map,
	  draggable: true
  });
});

グーグルマップのAPIがV3になってから今まで必要だったAPIキーが不要になっているらしい。

地図を表示する機会があったので、会社の所在地でマーカー付のサンプルを作ってみた。

意外に簡単。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>GoogleMapsApiV3で地図を表示</title>

<!--↓↓GoogleMapApiV3↓↓-->
<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type='text/javascript'>google.load('jquery', '1.3.2');</script>
<script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false&language=ja' charset='UTF-8'></script>
<script type="text/javascript">
	$(document).ready(function() {
	  var mapdiv = document.getElementById('map_canvas');
	  var geocoder = new google.maps.Geocoder();
	  var point = new google.maps.LatLng(34.057488,131.808716);
	  var myOptions = {
			  zoom: 12,
			  center: point,
			  mapTypeControl: true,
			  navigationControl: true,
			  navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL},
			  mapTypeId: google.maps.MapTypeId.ROADMAP,
			  scaleControl: true
	  };
	
	  var map = new google.maps.Map(mapdiv, myOptions);
	  var marker = new google.maps.Marker({
		  position: point,
		  map: map,
		  draggable: true
	  });
	});
</script>
<!--↑↑GoogleMapApiV3↑↑-->

</head>
    <body>
        <div id="map_canvas" style="width: 560px; height: 250px;"></div>
    </body>
</html>

こういうコードを簡単に作ってくれるサイトやフォームがあればいいのにね。

FDF Toolkitを使ってASPでPDF出力する

Tue, 29 Nov 2011 22:52:42 +0900

会社のイントラネットに簡単な送付状システムをASPで構築していますが、

印刷用にレイアウトしてあるHTMLで内容を表示して印刷しています。

ところが、HTMLのレイアウトだと会社のロゴや広告などの画像が72dpi程度でしが出力されないため、ガタガタに印刷されます。

そこで、PDFであれば画像もキレイに出力できるはず！？

ということで、PDFで出力できるようにしてみました。

必要なもの

IISが稼働するWindows Webサーバー
FDF Toolkit for Windows　（Adobeのサイトからダウンロード）

http://www.adobe.com/devnet/acrobat/fdftoolkit.html

テンプレートとなるフォームの埋めこまれたPDF

必要な作業

FdfAcx.dllとFdfTk.dllをサーバーのsystem32フォルダにコピー
コマンドプロンプトでレジストリにFdfAcx.dllを登録

C:\winnt\> cd \winnt\system32　　　　　　←コピー先に移動
C:\winnt\system32> regsvr32 FdfAcx.dll　←レジストリーに登録

ASPのソースサンプル

Dim FdfAcx,resFDF

'FDF ActiveX オブジェクトの定義
Set FdfAcx = Server.CreateObject("FdfApp.FdfApp") 

'新しいFDF生成
Set resFDF = FdfAcX.FDFCreate

'PDFフォーム欄と値
resFDF.FDFSetValue "atena","株式会社◯◯御中",False
resFDF.FDFSetValue "naiyo","お世話になります。",False
 
'テンプレートPDFのURL（フルパスが望ましい）
resFDF.FDFSetFile "http://192.168.XX.X/soufujyou/print.pdf" 

'設定結果のFDFをファイル名を付けてクライアントでダウンロード
Response.ContentType = "application/vnd.fdf" 'MIMEタイプ　FDF
Response.BinaryWrite resFDF.FDFSaveToBuf 'FDFデータをバッファーに出力

'クローズ
resFDF.FDFClose
set resFDF = nothing
set FdfAcx = nothing

テンプレートとなるPDFに宛名を表示する「atena」と、送付状の内容を表示する「naiyo」と名前を付けたフォームを埋め込み、上記のソースにアクセスすれば値が入力されたPDFが表示されます。

ここまでできれば、あとはデータベースや入力フォームからの値を表示したりと便利に改造できます。

動的に画像を表示したりするには、また少し違うやり方をしないといけないようです。

参考サイト

Google +1ボタンの設置方法メモ

Fri, 08 Jul 2011 19:29:17 +0900

最近よく見かけるGoogleの『+1』（プラスワン）ボタン。

設置は意外に簡単。

とりあえずメモ。

以下参照

ブログを投稿するたびにTwitter、FacebookなどSNSに一斉自動配信してくれる「dlvr.it」

Wed, 27 Apr 2011 23:01:29 +0900

SNSが増えてミクシィ派のグループもあればTwitterのお付き合いやFacebookの集まりもあり、全部にちまちま投稿するのも面倒になってきましたが、そんな悩みを解決できるウェブサービスを見つけました。「dlvr.it」は一斉配信したブログのRSSを登録しておき、新規投稿があれば自動で配信してくれるサービスです。

https://dlvr.it/ https://dlvr.it/

以下のSNSに自動でブログ記事の更新を投稿してくれます。

Twitter
Facebook
Google Buzz
LinkedIn
MySpace
Status.net
Tumblr
ping.fn

Mixi、GREEはTwitterと連携させておけばいいので、あとはブログの記事を書けばフルオートで投稿ができて完璧！

dlvr.itに登録する方法

http://dlvr.it/にアクセスしてサインアップする。

ブログのRSSフィードのURLを登録する。

とりあえずTwtterを選択し、Twitterのアクセス許可をして終わり。

（事前にTwitterはログイン状態にしておいたほうがいいです。）

あとから他のSNSに登録する方法

ログインする。

「+Add Route」をクリック。

「+add」を押す。

ブログのRSSフィードを選択。

（新規にURLを登録するか、すでに選択済みのフィードを選択）

「+add」を押す。

自動投稿したいSNSを選択。

投稿先のSNSのアクセス許可をする。

（これをしないとエラーになり登録ができない。）

「save」を押して登録完了。

その他の詳しいことは以下のサイトが参考になります。

http://gigazine.net/news/20100523_dlvrit/ http://gigazine.net/news/20100523_dlvrit/

PHP Simple HTML DOM Parserでタイトルタグ内の文字列を取得する：PHP

Sun, 13 Mar 2011 19:24:57 +0900

ライブラリをインクルードしてたった数行で、WEBスクレイピング（HTML内を部分的に取り出し、表示する）ができる恐ろしいPHPライブラリを見つけました。

ライブラリは上記よりダウンロードできます。

<?php

    include_once($_SERVER['DOCUMENT_ROOT']."/lib/simplehtmldom/simple_html_dom.php");
    
    $html = file_get_html('http://qwerty.work');  
       
    foreach($html->find('title') as $row)
    $row = $row->plaintext;
    $row = mb_convert_encoding($row, mb_internal_encoding(), "auto" );  
    echo $row;

?>

たったこれだけで取得できます。

find()で取り出したい条件や要素を記入するだけです。

恐ろしく簡単で便利なのはタグはもちろん、idやclassも指定できるし、そのタグ自体を抽出することもできます。

検索結果の一覧や、リンク集なども楽に抽出ができそうな感じです。

その他の使い方などは「PHP Simple HTML DOM Parserマニュアルページ」を参照してみてください。

参考サイト

htmlSQLを使ってタイトルタグ内の文字列を取得する:PHP

Sun, 13 Mar 2011 18:45:56 +0900

指定したURLのHTMLソースから目的のタグ内の文字列をSQL文で取り出すことができるライブラリを見つけました。

http://www.joNASjohn.de/lab/htmlsql.htm http://www.joNASjohn.de/lab/htmlsql.htm

今までは正規表現を使って文字列を取得していましたが、このライブラリならタグはもちろん、idやclassまで検索対象にできるスグレモノで、SQLの文法と配列が理解できれば、いろいろなことに使えそうです。

このように「HTML内を部分的に取り出し、表示する」ことを「Webスクレイピング」というそうです。

使用準備

- ライブラリをダウンロードして任意のディレクトにアップロード。
- 利用するファイルに「snoopy.class.php」と「htmlsql.class.php」をインクルード。

使用例

<?php

include_once($_SERVER['DOCUMENT_ROOT']."/lib/snoopy.class.php");
include_once($_SERVER['DOCUMENT_ROOT']."/lib/htmlsql.class.php");

function getTitle($url){

	$wsql = new htmlsql();
	
	// connect to a URL
	if (!$wsql->connect('url', $url )){
	print 'Error while connecting: ' . $wsql->error;
	exit;
	}
	
	// execute a query:
	if (!$wsql->query('SELECT * FROM title')){
	print "Query error: " . $wsql->error;
	exit;
	}
	
	// show results:
	foreach($wsql->fetch_array() as $row){
	
	//print_r($row);
	echo $row['text'];
		
	}

}

getTitle("http://qwerty.work");

?>

ちなみに、print_r($row)とすると、$rowに格納されている配列の内容が確認できます。

$rowの中身→　Array ( [tagname] => title [text] => QWERTY.WORK )

例文

その他の例文はまた今度…。

制限

の中のなど、同じタグに囲まれている文字列や要素はダイレクトに取得できず、一度大枠を取得して、再度その中から抜き出さなければならないようです。

取得可能な3文字・3桁ドメインの一覧・リストのサイト

Wed, 16 Feb 2011 13:54:14 +0900

できるだけ短いドメインが欲しいと思ったら「1文字」がベストですが、次へ

2文字ドメインもすべて取得済みなので、新規で登録でできる文字数は「3文字」が一番短いわけですが、

どのドメインが取得可能なのか、いちいち調べるのがメンドクサイし、

やってみたけど、イイナと思うのはすべて取得済み。

ビビっとくる文字列がないか、一括見れるサイトがあればなぁ～と思ったら結構あった。

http://adm.jp/3moji.php http://adm.jp/3moji.php

https://muumuu-domain.com/?mode=order_form&state=3moji_search https://muumuu-domain.com/?mode=order_form&state=3moji_search

http://dbt.jp/domain/list.php?tld=net&max=7&min=7&score=0&title=3%95%B6%8E%9A.net http://dbt.jp/domain/list.php?tld=net&max=7&min=7&score=0&title=3%95%B6%8E%9A.net

でも、ほとんどが「.jp」…。

これ以外のTLD(トップレベルドメイン）も探せたらいいのになぁ～

まぁ、それ以前に必要とされるサイトに仕上げることのほうが重要だな…。

宅急便の荷物追跡・配送状況確認・お問い合わせAPI？

Wed, 02 Feb 2011 16:33:44 +0900

インターネットで買う側も売る側も、

商品の配送状況が簡単にわかるようにしたいけど、

宅急便各社がAPIを用意していないので、

いちいち各社のホームページを調べて開かないといけませんが、

1か所で簡単に調べられるフォームを自力で作られた方のホームページを見つけたのでメモ。

http://thira.plavox.info/transport/api/ http://thira.plavox.info/transport/api/

できればJavascriptで自分のサイトにペタっと貼れるガジェットみたいなのが欲しい…。

クロネコヤマト、佐川急便、日本郵便、ペリカン便、西濃運輸、福山通運、FeDexあたりの大手はAPIを提供してくれればいいのに…。

SyntaxHighlighter3のカスタマイズ

Thu, 16 Dec 2010 21:16:18 +0900

ソースをキレイに表示してくれる「SyntaxHighlighter3」ですが、少々不満あり。カスタマイズ方法を詳しく書いてくれているページ発見！

http://access2genzo.blog6.fc2.com/blog-entry-65.html http://access2genzo.blog6.fc2.com/blog-entry-65.html

http://access2genzo.blog6.fc2.com/blog-entry-67.html http://access2genzo.blog6.fc2.com/blog-entry-67.html

行を折り返す方法（2013/02/27追記）

Ver2.Xではできていた行の折り返しがSyntaxHighlighter3.0.83では標準ではできませんが、shCore.cssの71行目辺りを以下のように変更すればできるようです。

デフォルト

.syntaxhighlighter .line {
  white-space: pre !important;
}

変更後

.syntaxhighlighter .line {
  white-space: pre-wrap !important;
  word-wrap: break-word !important;
}

「pre-wrap」または「nomal」でもいいそうです。

その他のブラウザはわかりませんが、IE10とChromeではできました。以下のサイトを参考にしました。その他、行番号の無効化や奇数行と偶数行の背景色を変更する方法も書かれています。

http://waka8s.com/archives/sh3083-pre-wrap/ http://waka8s.com/archives/sh3083-pre-wrap/

IEの印刷設定をActiveXコントロールとJavascriptで行う方法

Thu, 16 Dec 2010 20:47:21 +0900

イントラネットで表示されているページを印刷しようとすると、A4・縦で印刷したいのに、デフォルトはA4・横になっているため、印刷設定を毎回「縦」に変更しなくてはならない事にガマンの限界が…。

イントラネットはWindowsサーバー上IISでASと一部PHPで作っています。

印刷設定（用紙設定）はASPやJavascriptの関数があるんかな？

といろいろ検索しましたが見つかりませんでした…。

しかし、替わりに見つけたのは**ActtiveXコントロール「ScriptX」**を使った方法！

まず以下のページで「Dowload smsx.cab」ボタンを押してダウンロード

http://www.meadroid.com/scriptx/sxdownload.asp http://www.meadroid.com/scriptx/sxdownload.asp

任意のディレクトリにアップロード

印刷設定を使うページに以下のコードを挿入し、

タグでActiveXコントロール読み込む。

<!-- ScriptX 読み込み -->
<object id=factory style="display:none"
 classid="clsid:1663ed61-23eb-11d2-b92f-008048fdd814"
 codebase="http://**smsx.cabを設置した場所のパス**/smsx.cab#Version=6,5,439,72（←バージョンによって書き換える）">
</object>
<!-- ScriptX 読み込み -->

次にJavascriptファンクションで印刷設定を行う。

<script type="text/javascript">
	function printWindow() {
		factory.printing.header = "ヘッダ名";
		factory.printing.footer = "フッタ名";
		factory.printing.portrait = false; // 用紙方向 true: 縦 false: 横
		factory.printing.leftMargin = 1.0;
		factory.printing.topMargin = 1.0;
		factory.printing.rightMargin = 1.0;
		factory.printing.bottomMargin = 1.0;
		factory.printing.Print(false); // 印刷実行 ture: 印刷ダイアログなし false: 印刷ダイアログあり
}
</script>

あとはファンクションを呼び出すだけでOK!

<input type="button" value="ScriptXで印刷" onclick="printWindow();" />

自分の場合は印刷ページ表示と同時に印刷するので、

<body onload="printWindow();">

としました。

※初回使用時は「ActiveXをインストールしますか？」見たいな警告が出ますが、インストールしてしてください。

その他

ヘッダ・フッタに、現在日・ページ数出力

factory.printing.header = "ヘッダ名 &b 日付: &d";   // 現在日出力
factory.printing.footer = "フッタ名 &b &p/&P ページ";     //   ページ数出力

これでイントラネットとインターネットでヘッダー・フッター印刷を切り分けられそうなのがいいです。

ヘッダーとフッターで使える記号

&w　：　印刷するホームページのタイトル
&u　：　印刷するページのアドレス
&d　：　現在の日付（xxxx/xx/xx 形式）
&D　：　現在の日付（xxxx年xx月xx日形式）
&t　：　現在の時刻（コントロールパネルの「地域」で設定されている形式）
&T　：　現在の時刻（xx：xx：xx 形式）
&p　：　現在のページ番号
&P　：　総ページ数
&b　：　右揃えの文字列（「&b」に続けて文字列を入力）
&b&b　：　中央揃えの文字列（最初の「&b」に続けて文字列を入力）と右揃えの文字列（2 番目の「&b」に続けて文字列を入力）
&&　：　アンパサンド（&）

直接印刷(印刷ダイアログ表示なし）だけを直接使う

factory.printing.Print(true);

プレビュー画面を表示

factory.printing.Preview();

ActiveXコントロールだけにWindowsサーバー上ブラウザがIEじゃないと動かないとは思うのですが、WindowsサーバーであればIISじゃなくてもApatchでも動き、タグで「smsx.cab」さえ読み込めばPHPでも使えるようなことが書かれたページがありました。

有償版もあるようですが、用紙サイズの指定とかもできるみたいです。

PHPのファンクションでMozshotを楽に使う

Tue, 07 Dec 2010 10:23:43 +0900

何かとサイトサムネイルで重宝するMozshotですが、

サムネイル表示のために、毎回URLの指定やソースの調整をすることがだんだん苦になってきました。

簡単にサイトサムネルを表示するファンクションのサンプルがあったので自分なりに改造し、

指定URLのタイトル取得とMozshotのサムネイルにリンクを組み合わせてみました。

<?php
/*---- 指定したURLのソースを取得 ----*/

function getURL( $pURL ) {
   $_data = null;
   if( $_http = @fopen( $pURL, "r" ) ) {
      while( !feof( $_http ) ) {
         $_data .= fgets( $_http, 1024 );
      }
      fclose( $_http );
   }
   return( $_data );
}

/*---- ソース内にある余計な改行コードを取り除く----*/

function cleanString( $pString ) {
   $_data = str_replace( array( chr(10), chr(13), chr(9) ), chr(32), $pString );
      while( strpos( $_data, str_repeat( chr(32), 2 ), 0 ) != false ) {
         $_data = str_replace( str_repeat( chr(32), 2 ), chr(32), $_data );
      }
      return( trim( $_data ) );
}

/*---- 指定した最初タグ内にある文字列を取得 ----*/

function getElement( $pElement, $pSource ) {

   //取得できなかった場合の代替テキスト
   if(empty($pSource)){
		$pSource = chr(60).$pElement.chr(62)."Pages".chr(60)."/".$pElement.chr(62);
   }

   $_data = null;
   $pElement = strtolower( $pElement );
   $_start = strpos( strtolower( $pSource ), chr(60) . $pElement, 0 );
   $_start = strpos( $pSource, chr(62), $_start ) + 1;
   $_stop = strpos( strtolower( $pSource ), "</" . $pElement .    chr(62), $_start );
   if( $_start > strlen( $pElement ) && $_stop > $_start ) {
      $_data = trim( substr( $pSource, $_start, $_stop - $_start ) );
   }
   return( $_data );
}

	
/*---- Mozshot用ファンクション ---*/
	
function mShot($url,$s){

	if ($url) {
	$sData = getURL( $url );	
	$sData = cleanString( $sData );
	$sData = getElement( "title", $sData );
	mb_language( 'Japanese' );
	$title = mb_convert_encoding($sData, "UTF-8", "auto");
	}
	
	$imgSize[0] = '64';
	$imgSize[1] = '128';
	$imgSize[2] = '256';
	
	$thumbUrl[0] = "/small";
	$thumbUrl[1] = "";
	$thumbUrl[2] = "/large";
	
	$a = "<div id=¥"mShot¥"><a href=¥"".$url."¥" target=¥"_blank¥">¥n";
	$a = $a."<strong class=¥"title¥">".$title."</strong><br />¥n";
	$a = $a."<span class=¥"url¥">".$url."</span><br />¥n" ;
	$a = $a."<img src=¥"http://mozshot.nemui.org/shot".$thumbUrl[$s]."?".$url."¥" width=¥"".$imgSize[$s]."¥" height=¥"".$imgSize[$s]."¥" alt=¥"".$title."¥" />¥n";
	$a = $a."</a></div>¥n" ;
	echo $a;

}
?>

上記のfuncｔion.phpをサムネイル表示を使うページindex.phpでインクルードして使う。

<?php include_once $_SERVER['DOCUMENT_ROOT']."/include/function/function.php";?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mozshotファンクションテスト</title>
<style type="text/css">
<!--
	#mShot {
		padding: 0px;
		margin: 0px;
	}
	#mShot .title {
		font-weight: bold;
	}
	#mShot .url {
		font-size: small;
	}
	#mShot img {
		border: none;
	}
-->
</style>
</head>
<body>
	<?php mShot("http://qwerty.work",0);?>
   <?php mShot("http://qwerty.work",1);?>
   <?php mShot("http://qwerty.work",2);?>
</body>
</html>

このサイト用のCSSを適用しているので、

色は違いますが、実際に表示すると

の場合

http://qwerty.work http://qwerty.work

の場合

http://qwerty.work http://qwerty.work

の場合

http://qwerty.work http://qwerty.work

となります。

参考ページ

http://q.hatena.ne.jp/1145454292#a515779 http://q.hatena.ne.jp/1145454292#a515779

http://d.hatena.ne.jp/steel-plate/20080417/1208445174 http://d.hatena.ne.jp/steel-plate/20080417/1208445174

2011/03/01追記

指定したURLのタイトルを取得する簡単な方法が見つかったのメモ。

http://hoshiya.biz/blog/2011/03/phpjavascript.php http://hoshiya.biz/blog/2011/03/phpjavascript.php

PEARのNet_Whoisを使ってドメイン情報を取得する

Mon, 06 Dec 2010 19:35:00 +0900

PHPのライブラリ「PEAR」を使ったら、

Whoisサーバーからドメインの登録情報が取得できるらしい。

http://blog.aidream.jp/?p=175 http://blog.aidream.jp/?p=175

http://pentan.info/php/sample/net_whois.html http://pentan.info/php/sample/net_whois.html

時間があるときにチャレンジしてみる。

WhoisAPIでドメイン情報が受け取れる？

Sun, 05 Dec 2010 20:00:18 +0900

このサイトでドメイン情報をXMLで取得できるっぽい。

ドメインが取得できるかどうかを調べるスクリプトに使えそう…。

http://www.anchor-gr.jp/labo_webapi_domain_search.html http://www.anchor-gr.jp/labo_webapi_domain_search.html

日めくりカレンダー風のアイコン画像

Wed, 01 Dec 2010 17:50:32 +0900

なかなかよさそうな日めくりカレンダー風のアイコンを探してみて

よさそうなものを見つけた。

http://ameblo.jp/dokugakumono/entry-10683753787.html http://ameblo.jp/dokugakumono/entry-10683753787.html

http://tanoshikugazo.blog120.fc2.com/blog-entry-137.html http://tanoshikugazo.blog120.fc2.com/blog-entry-137.html

http://www.iconfinder.com/search/?q=calendar http://www.iconfinder.com/search/?q=calendar

ソースコードをきれいに装飾表示するアレ（SyntaxHighlighter）

Mon, 29 Nov 2010 14:49:12 +0900

ソースコードをハイライトしてくれる『SyntaxHighlighter』

最近のサイトでよく見るソースコードをきれい装飾して見せるJavascript。自分のホームページにも導入したいと思っていろいろ探して**『SyntaxHighlighter』**というのを見つけました。

サンプル

<pre class='brush:php'>
	<?php
		$p = "サンプル";
		echo $p;
	?>

作者のページ

http://alexgorbatchev.com/SyntaxHighlighter/ http://alexgorbatchev.com/SyntaxHighlighter/

https://github.com/syntaxhighlighter https://github.com/syntaxhighlighter

使い方

まずダウンロードして適当な場所に保存して解凍します。現在の最新は「SyntaxHighlighter** 3.0.83**」のようです。

ダウンロードリンク

http://alexgorbatchev.com/SyntaxHighlighter/download/download.php?sh_current

仮に**「ルートディレクトリ/js/SyntaxHighlighter」**に保存した場合。

～内に以下を追加

<!--SyntaxHighlighter-->
<link rel="stylesheet" type="text/css" href="/js/SyntaxHighlighter/styles/shCore.css" />

<!-- 以下は好きなテーマによって変更する -->
<link rel="stylesheet" type="text/css" href="/js/SyntaxHighlighter/styles/shThemeDefault.css" />
<script type="text/javascript" src="/js/SyntaxHighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="/js/SyntaxHighlighter/scripts/shAutoloader.js"></script>

<!-- 以下は装飾したい言語を追加 -->
<script type="text/javascript" src="/js/SyntaxHighlighter/scripts/shBrushCss.js"></script>
<script type="text/javascript" src="/js/SyntaxHighlighter/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="/js/SyntaxHighlighter/scripts/shBrushPhp.js"></script>
<script type="text/javascript" src="/js/SyntaxHighlighter/scripts/shBrushPlain.js"></script>
<script type="text/javascript" src="/js/SyntaxHighlighter/scripts/shBrushSql.js"></script>
<script type="text/javascript" src="/js/SyntaxHighlighter/scripts/shBrushVb.js"></script>
<script type="text/javascript" src="/js/SyntaxHighlighter/scripts/shBrushXml.js"></script>
<script type="text/javascript">// <![CDATA[
   SyntaxHighlighter.all();
   // ]]></script>
<!--SyntaxHighlighter-->

意外にカンタン…。

その他、

を指定できるようです。

英語の説明ページですが、なんとなくでも理解できました。

なんかウレシイ。

SyntaxHighlighter以外の参考ページ

https://qiita.com/ko-he-8/items/b068e431f23b38608fb7 https://qiita.com/ko-he-8/items/b068e431f23b38608fb7

リライトルールでディレクトリと拡張子を変更して転送する（mod_rewrite）

Sun, 28 Nov 2010 12:12:16 +0900

レンタルサーバーはロリポップで、

Movable Type 4をMT5にアップグレードした。

ついでに

ディレクトリ：　ルート　→　ルート/blog
拡張子： .html　→　.php

に変更した。

しかし、前のブログにアクセスがあるため、以下の選択肢を考えた。

古いブログ（MT4）と新しいブログ（MT5）と共存させる。
古いブログ（MT4）にアクセスがあったら、新しいブログ（MT5）に転送させる。

結果、新しいブログに転送させるほうが効率が良いので、

.htaccessに正規表現で以下の事を加えて実現できた。

URLのRewriteというApatchの機能らしい。

http://***.com**/**2010にアクセスがあったら http://***.com**/**2010にアクセスがあったら

拡張子を.htmlから.phpに変更して、

http://***.com**/blog**/2010/*****.php**にリダイレクトする http://***.com**/blog**/2010/*****.php**にリダイレクトする

RewriteEngine On
 RewriteCond %{REQUEST_URI} ^/2010.*$
 RewriteRule ^(.*)\.html$ /$1.php [NC,R]
 RewriteRule ^2010(.*)$ /blog/2010$1 [R,L]

とりあえずできたものの、

正規表現というものを使ったことがなく、

理解するまでには時間がかかりそうです。

フォルダごとにこのルールを設定するのは大変なので、

課題として、複数のフォルダに対して一度にルールを適用できるようしたいと思います。

参考ページ

http://blog.aidream.jp/?p=323 http://blog.aidream.jp/?p=323

http://tech.bayashi.jp/archives/entry/techweb/2007/001981.html http://tech.bayashi.jp/archives/entry/techweb/2007/001981.html

APIを使って短縮URLを取得して表示

Sun, 21 Nov 2010 19:32:06 +0900

APIを使って短縮URLを取得して表示したくて、

PHPで変数に入れたURLを短縮して受け取る方法を探して以下のAPIが候補に上がった。

tinyurl.com　…　特に何かの登録がいるわけではない
bit.ly（j.mp)　…　ユーザー登録をしてAPIキーを取得する必要あり
goo.gl　…　調査中

tinyurl.comを利用した例

“.$url2.“が”.$url4.“に短縮されました。”; ?>

参考サイト Twitter 短縮URL TinyURLのAPI http://memorva.jp/memo/api/twitter_tinyurl.php

bit.ly(j.mp)を利用した例

array( ‘method’ => ‘GET’, ’timeout’ => 5 ) )); $ret = file_get_contents($bitlyurl,false,$context); if($ret !== FALSE){ $json = json_decode($ret, true); if($json[‘statusCode’] == ‘OK’) { $surl = $json[‘results’][urldecode($url)][‘shortUrl’]; return $surl; } } return FALSE; }

$url = “http://qwerty.work”; //短縮したいURL

echo “”.$url.“が”.shorten_url($url).“に短縮されました。”; ?>

参考サイト **twitter/URL短縮する(bit.ly) ** http://hodade.adam.ne.jp/itmemo/index.php?twitter%2FURL%C3%BB%BD%CC%A4%B9%A4%EB(bit.ly)

「タグ」のアイコン参考ページ

Tue, 09 Nov 2010 20:00:51 +0900

ブログなどでワイポイントアイテムとして使えるタグアイコン

http://bunbun.mods.jp/2010/09/sozai/icon/icon_003/ http://bunbun.mods.jp/2010/09/sozai/icon/icon_003/

Javascriptでできた自動見積りフォーム・カートのサンプル

Mon, 18 Oct 2010 14:02:36 +0900

こんな高機能な無料サンプル見つけたのでメモ。

Javascriptだけで動いて、見た目もかっこいいカート

http://simplecartjs.org/ http://simplecartjs.org/

PHPファイル＋jQueryで動くカート

http://conceptlogic.com/jcart/ http://conceptlogic.com/jcart/

PHPファイル1つで動くカート

http://php.lemon-s.com/simpleshop.html http://php.lemon-s.com/simpleshop.html

MovableTypeやWordPressのカートプラグイン（有料）

http://skeleton.juxtaposition.jp/ http://skeleton.juxtaposition.jp/

代替画像の表示でFLASHが表示できないiPhone対策

Sat, 16 Oct 2010 11:32:58 +0900

代替画像の表示でFLASHが表示できないiPhone対策

会社のホームページはパソコン用のサイトで、メイン画像がFLASHでできております。

iPhoneを持っているのですが、FLASHが表示できないため、

なんか替わりの画像が表示できたらなぁ～と方法を検索したら簡単に見つかりました。

早速導入してみようということで実践したら、Javascriptのライブラリの設置がいるものの、ちょ～簡単にできた。

通常のFLASH画像を設置するよりも簡単じゃないですか！？

しかし、またJacascriptが増えてしまった…。

以下を参考にさせていただきました↓

http://www.drk7.jp/MT/archives/001481.html http://www.drk7.jp/MT/archives/001481.html

jQueryとprototype.jsの競合・共存対策について

Wed, 13 Oct 2010 15:30:56 +0900

ホームページの仕様でjQueryとprototypeを同時に使用するサイトをいじくっていたら

あらゆるjavascriptが競合して動いたり動かなかったりするので

ググってみたら共存方法がありました。

以下参考↓

http://www.css-lecture.com/log/javascript/029.html http://www.css-lecture.com/log/javascript/029.html

JavaScriptで自動見積りフォームを作ってみる。（その3）

Tue, 21 Sep 2010 20:43:04 +0900

配列をうまく使えないので、同じような処理を繰り返しており課題はあるものの

なんとかラジオボタンで選択した金額を計算できる自動見積りフォームを作ってみた。

170 ){ document.getElementById(“display_account”).style.top = position_top + “px”; } } window.onload = function() { var isIE = 0

見積金額

合計：0 円

消費税：0 円

税込合計：0 円

見積り

下記項目を選択すると自動計算します。

ソース

170 ){

document.getElementById("display_account").style.top = position_top + "px"; } } window.onload = function() {

var isIE = 0

見積金額

合計：0 円

消費税：0 円

税込合計：0 円

見積り

下記項目を選択すると自動計算します。

商品

グレード5

グレード4

グレード3

グレード2

グレード1

数量

液晶テレビ

エアコン

パソコン

合計

円

消費税

円

税込合計

円

Javascriptで自動見積もりフォームを作ってみる。（その2）

Tue, 21 Sep 2010 16:38:49 +0900

前回は金額が3桁区切りになっていなかったので、今回は3桁区切りを加えてみた。

// // 170 ){ document.getElementById(“display_account”).style.top = position_top + “px”; } } window.onload = function() { var isIE = 0 見積金額合計：0 円消費税：0 円税込合計：0 円

見積り

下記項目を選択すると自動計算します。

商品

数量

果物

選択してくださいリンゴ（3個入り）1,000円バナナ 450円パイナップル　650円

0 1 2 3 4 5 6 7 8 9 10

肉

選択してください牛肉（100g）500円豚肉（100g）400円鶏肉（100g）300円

0 1 2 3 4 5 6 7 8 9 10

魚

選択してくださいさけ　110円さば　120円いわし　130円

0 1 2 3 4 5 6 7 8 9 10

合計円

消費税円

税込合計円

ソース

<div onscroll="display_account()"><br /><script type="text/javascript"><br /><!--
function keisan(){
var tax = 5; // 消費税率
var price1 = eval(document.form1.goods1.value) * document.form1.volume1 .selectedIndex; // 数量×単価<br />var price2 = eval(document.form1.goods2.value) * document.form1.volume2 .selectedIndex;<br />var price3 = eval(document.form1.goods3.value) * document.form1.volume3 .selectedIndex;
var total1 = parseInt(price1)+ parseInt(price2)+ parseInt(price3); // 税抜き合計を計算<br />var tax2 = Math.round((total1 * tax) / 100); //消費税を計算<br />var total2 = total1 + tax2; //税込み合計を計算
//表示用の金額を3桁区切りに変換<br /> var data = new Array(total1,tax2,total2); //金額を配列に格納<br /> var len = data.length; //配列の数を取得
for(cnt=0;cnt<len;cnt++){<br /> <span color="red" style="color: red;">data[cnt] = new String(data[cnt]).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,"); //ここで正規表現で3桁ごとにカンマで区切る</span><br /> }
//フォームのテキストエリアに表示する金額<br />document.form1.field_total1.value = data[0]; // 税抜き合計<br />document.form1.field_tax.value = data[1]; // 消費税<br />document.form1.field_total2.value = data[2]; // 税込合計
//右の窓に表示する金額<br />document.getElementById("display_account_amount").innerHTML = data[0]; // 税抜き合計<br />document.getElementById("display_account_tax").innerHTML = data[1]; // 消費税<br />document.getElementById("display_account_all").innerHTML = data[2]; // 税込合計
}
// --> <br /></script><br /><script type="text/javascript"><br /><!--<br />function display_account() {<br />var position_top = ( document.body.scrollTop || document.documentElement.scrollTop || window.scrollTop ) ; if ( parseInt(position_top) > 170 ){<br />document.getElementById("display_account").style.top = position_top + "px"; } } window.onload = function() {<br />var isIE = 0<=window.navigator.userAgent.indexOf("MSIE");<br />if(isIE && document.compatMode=="BackCompat"){<br />document.body.onscroll = display_account;<br />}else{<br />document.documentElement.onscroll = display_account;<br />}<br />}<br />//--><br /></script><br /><div id="display_account" style="position:absolute;top:170px;right:20px;z-index:100;width:200px;"> 見積金額<br /><br />合計：<span id="display_account_amount">0</span> 円<br /><br />消費税：<span id="display_account_tax">0</span> 円<br /><br />税込合計：<span id="display_account_all">0</span> 円<br /><br /></div><br /><h1>見積り</h1><br /><p>下記項目を選択すると自動計算します。</p><br /><form name="form1" action="" id="form1" method="post"><br /><table><br /><tr><br /><td>商品</td><br /><td>&nbsp;</td><br /><td>数量</td><br /></tr><br /><tr><br /><td>果物</td><br /><td><select name="goods1" onChange="keisan()"><br /><option value="0" selected="selected">選択してください</option><br /><option value="1000">リンゴ（3個入り）1,000円</option><br /><option value="450">バナナ 450円</option><br /><option value="35900">パイナップル　650円</option><br /></select></td><br /><td><select name="volume1" onchange="keisan()"><br /><option>0</option><br /><option>1</option><br /><option>2</option><br /><option>3</option><br /><option>4</option><br /><option>5</option><br /><option>6</option><br /><option>7</option><br /><option>8</option><br /><option>9</option><br /><option>10</option><br /></select></td><br /></tr><br /><tr><br /><td>肉</td><br /><td><select name="goods2" onChange="keisan()"><br /><option value="0" selected="selected">選択してください</option><br /><option value="500">牛肉（100g）500円</option><br /><option value="400">豚肉（100g）400円</option><br /><option value="300">鶏肉（100g）300円</option><br /></select></td><br /><td><select name="volume2" onchange="keisan()"><br /><option>0</option><br /><option>1</option><br /><option>2</option><br /><option>3</option><br /><option>4</option><br /><option>5</option><br /><option>6</option><br /><option>7</option><br /><option>8</option><br /><option>9</option><br /><option>10</option><br /></select></td><br /></tr><br /><tr><br /><td>魚</td><br /><td><select name="goods3" onChange="keisan()"><br /><option value="0" selected="selected">選択してください</option><br /><option value="110">さけ　110円</option><br /><option value="120">さば　120円</option><br /><option value="130">いわし　130円</option><br /></select></td><br /><td><select name="volume3" onchange="keisan()"><br /><option>0</option><br /><option>1</option><br /><option>2</option><br /><option>3</option><br /><option>4</option><br /><option>5</option><br /><option>6</option><br /><option>7</option><br /><option>8</option><br /><option>9</option><br /><option>10</option><br /></select></td><br /></tr><br /><tr><br /><td>&nbsp;</td><br /><td>&nbsp;</td><br /><td>&nbsp;</td><br /></tr><br /><tr><br /><td></td><br /><td></td><br /><td></td><br /></tr><br /><tr><br /><td>合計</td><br /><td><input type="text" name="field_total1" size="8" value="0"><br />円</td><br /><td>&nbsp;</td><br /></tr><br /><tr><br /><td>消費税</td><br /><td><input type="text" name="field_tax" size="8" value="0"><br />円</td><br /><td>&nbsp;</td><br /></tr><br /><tr><br /><td>税込合計</td><br /><td><input type="text" name="field_total2" size="8" value="0"><br />円</td><br /><td>&nbsp;</td><br /></tr><br /></table><br /></form><br /></div>

JavaScriptで数字をカンマで3桁区切りしてみた。

Tue, 21 Sep 2010 10:45:15 +0900

いろいろ探してみて一番よさそうなサンプルを使用して

金額の数値をカンマで3桁に区切り、

表示できるようやってみた。

//3桁カンマ区切り

function addFigure() {

var str = 1000000000;

str = String(str).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, “$1,”);

document.getElementById(“price”).innerHTML = str;

}

これで「1,000,000,000」と表示されるはず

正規表現で数字の間にカンマを置き換えているのですが、

正規表現についてはチンプンカンプンです。

参考サイト：http://www.coppermine.jp/hasunuma/weblog/2010/05/post.html

IISでPOST送信すると405エラーが出るときの対処方法

Mon, 20 Sep 2010 15:19:03 +0900

FormからPOST送信すると405エラーが出る

IIS（Internet Infomation Service）でFormからPOSTでページにパラメーターと変数を飛ばしたら、以下のエラーが出ました。

HTTP 405 - 許可されていないリソースですこのエラーが出る場合。IISでPOST送信が許可されていない場合になるそうです。

ということでネットで調べたら以下の方法が出てきたので試したら解決しました。

解決方法

Windws 2000 Serverの場合

マイコンピュータを右クリックして「管理」を選択
インターネットインフォメーションサービスで該当するサイトを右クリックして「プロパティ」を選択
「ホームディレクトリ」タブの「構成」ボタンをクリック
「アプリケーションのマッピング」タブの「追加」ボタンを押して以下を追加

実行ファイル C:\WINNT\System32\inetsrv\ssinc.dll

拡張子 .html

動詞制限　→　GET,POST

ついでに.htmも追加しておきます。

これで解決できるはずです。

その他参考ページ

http://blog.livedoor.jp/trycode/archives/36203931.html http://blog.livedoor.jp/trycode/archives/36203931.html

MagpieRSSでRSSを読み込んで表示する

Tue, 24 Nov 2009 17:34:43 +0900

MagpieRSSをダウンロードして適当なフォルダに保存し、読み込んだ最新記事一覧を表示するページを作成する。

rss.php

<?php
  require_once('magpierss/rss_fetch.inc');
  define('MAGPIE_OUTPUT_ENCODING', 'UTF-8');
  $count = 5;　//最新記事表示件数
  $length = 60;　//表示する日記記事の最大文字数
  ?>
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
  <title>RSS表示スクリプト</title>
  </head>
  <body>
  <?php
  $url = 'http://qwerty.work/index.xml';
  $rss = fetch_rss($url);
  echo "<ul>";
  array_splice($rss->items, $count);
  foreach ($rss->items as $item) {
  $href = $item['link'];
  $title = mb_convert_encoding($item['title'],"SJIS","auto");<br>
  $date = date('Y/m/d H:i:s',parse_w3cdtf($item['dc']['date']));<br>
  $description = mb_convert_encoding($item['description'],"SJIS","auto");
  if (mb_strlen($description) > $length) {
  $description =
  mb_strcut($description, 0, $length) . "...";
  }
  echo "<li>";
  echo "<FONT color=\"#ff8040\">(" . $date . ")</FONT> ";
  echo "<a href=$href>" . $title . "</a><BR>";
  echo $description . "</li>";
  }
  echo "</ul>";
  ?>
  </body>
  </html>

PHP5以上の場合は、

Warning: gmmktime() expects parameter 3 to be long, string given in /home/*******/public_html/magpierss/rss_utils.inc on line ******

といったエラーが出ます。

そのときは「rss_utils.inc」の35行目　の

$epoch = gmmktime( $hours, $minutes, $seconds, $month, $day, $year);

を

$epoch = gmmktime( $hours, $minutes, substr($seconds,-2,2), $month, $day, $year);

に変更したら正常に表示されました。

参考ページ

携帯電話会社各社の絵文字コード一覧サイトまとめ

Sun, 22 Nov 2009 15:47:54 +0900

モバイルサイト作成のための携帯電話会社各社の絵文字コード一覧サイトをまとめました。

ドコモ（docomo）

※イーモバイルはドコモと共通で使えるようです。

ａｕ by KDDI

http://www.au.kddi.com/ezfactory/tec/spec/pdf/typeD.pdf

ソフトバンク（softbank）

http://creation.mb.softbank.jp/web/web_pic_about.html

ウィルコム（willcom）

http://www.willcom-inc.com/ja/service/contents_service/create/emoji/index.html

Google AJAX Feed APIでRSSフィードを読込み最新の記事一覧を表示する。

Wed, 23 Sep 2009 14:50:10 +0900

前回の「Google AJAX Feed APIを使ってアメーバブログの「PR:」を除くで記事一覧を表示するJavascript 」ですが、アメーバブログを更新して、最新のRSSをGoogle AJAX Feed APIで読み込んでいるのに、最新の記事一覧をスクリプトで表示することができないということが多々ありました。

それは、Googleのキャッシュにあるフィードを読み込んでいるからだそうです。

キャッシュをクリアまたはリセットする方法があるのかもしれませんが、読み込むフィードのURLにユニークな値を付加させることで、ページを開くたびに最新の記事一覧を表示することができます。

前回のスクリプトにユニークな値として現在日時をURLに付加させてみました。

<script type="text/javascript" src="http://www.google.com/jsapi?key=●●あなたのAPIキー●●"></script>
  <script type="text/javascript">
  google.load("feeds", "1"); 
  
    function initialize()
    { 
  
    // 現在の日付と時間を取得
    var date = new Date();
    var year = date.getYear();
    var mon = date.getMonth() + 1;
    var day = date.getDate();
    var hour = date.getHours();
    var min = date.getMinutes();
    var sec = date.getSeconds();
    var query = year + mon + day + hour + min + sec;
  
    //現在の最新RSSフィードの取得
    var feed = new google.feeds.Feed("http://example.com/blog/rss20.xml?" query); 
    
    //取得するフィード数
    feed.setNumEntries(6) 
    
    //実際に読む込む
    feed.load(function(result) 
    { 
    
    //読み込めたか判別
    if (!result.error) 
    {
    //表示部分を選択
    var container = document.getElementById("feed");
    
    //変数の初期化
    var list = "";
    
    //Feedの処理
    list = '<ul>';
    for (var i = 0; i < result.feed.entries.length; i++) 
    { 
    //Feedを一つ抽出
    var entry = result.feed.entries[i]; 
    if(entry.title.match(/^PR:/)) {
    //「PR:」から始まるものがあれば何もしない
    }
    else{
    list += '<li>';
    list += '<a href="' + entry.link + '" target="_blank" title="' + entry.title + '">' + entry.title + '</a>';
    var strdate = createDateString(entry.publishedDate);
    list += '&nbsp;(' + strdate + ')';
    list += '</li>';
    }
    } 
    list += '</ul>';
    container.innerHTML = list;
    } 
    }); 
    }
  
  //日付の表示方法を変更
    function createDateString(publishedDate)
    {
    var pdate = new Date(publishedDate);
    var pday = pdate.getDate();
    var pmonth = pdate.getMonth() + 1;
    var pyear = pdate.getFullYear();
    var phour = pdate.getHours();
    var pminute = pdate.getMinutes();
    var psecond = pdate.getSeconds(); 
    //var strdate = pyear + "年" + pmonth + "月" + pday + "日" + phour + "時" + pminute + "分" + psecond + "秒";
    var strdate = pyear + "-" + pmonth + "-" + pday ;
    return strdate;
    }
  
  google.setOnLoadCallback(initialize); 
  </script> 
  <div id="feed">Loading...</div>

ちょっと難点なのは、ページを開く度に最新のフィードを読み込むので、表示がもたつきます。

なので、「分」のminと「秒」のsecは省いて1時間以内の表示はキャッシュを読み込むくらいにした方がいいかもしれません。

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で宅配便各社の荷物追跡結果ページを表示するフォームを作ってみる。

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

Sat, 12 Sep 2009 11:35:01 +0900

伝票番号から追跡結果のページを簡単に開くフォームを作る

宅配便会社の荷物追跡サービスを利用するために、各会社のホームページを開いてから検索するのは面倒くさいので、イントラネット用に運送会社の選択と伝票番号の入力で、各宅配業者の検索結果ページを表示できるようにブログパーツのようなフォームを作ることにしました。

テキストエリアに伝票番号を入力
会社を選択して「検索」を押す

これで各会社の検索結果ページが表示が新規ウィンドウで表示されるという物を作ります。とりあえず、ヤマト運輸、佐川急便、日本郵便（ゆうパック・エクスパック）の検索ができるようにしてみました。

PHPファイル一つで作るときのソース

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

<?php<br>//エラー処理<br>$kaisha = (!isset($_POST['kaisha'])) ? null : $kaisha = $_POST['kaisha'];<br>$denpyou = (!isset($_POST['denpyou'])) ? null : $denpyou = $_POST['denpyou'];<br>$submit = (!isset($_POST['submit'])) ? null : $submit = $_POST['submit'];<br>//URL設定<br>//クロネコヤマト<br>$url['1'] = "http://jizen.kuronekoyamato.co.jp/jizen/servlet/crjz.b.NQ0010?id=".$denpyou;<br>//佐川急便<br>$url['2'] = "http://k2k.sagawa-exp.co.jp/p/web/okurijosearch.do?okurijoNo=".$denpyou;<br>//日本郵便　ゆうパック・EXPACK・ポスパケット<br>$url['3'] = "http://tracking.post.japanpost.jp/service/singleSearch.do?org.apache.struts.taglib.html.TOKEN=&searchKind=S002&locale=ja&SVID=&reqCodeNo1=".$denpyou;<br>//伝票番号が入力されていれば検索ページを表示<br>if (isset($denpyou)){<br>	header("Location: ".$url["$kaisha"]); <br>	}<br>else {<br>?><br><!DOCTYPE HTML><br><html><br><head><br><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br><title>荷物追跡</title><br></head><br><body><br><form id="form1" name="form1" method="post" action="search.php" target="_blank"><br>  <label for="denpyou">伝票番号</label><br><br>  <input name="denpyou" type="text" id="denpyou" /><br><br>  <label for="kaisha">会社選択</label><br><br>  <input name="kaisha" type="radio" id="kaisha" value="1" checked /><br>  ヤマト運輸<br><br>  <input name="kaisha" type="radio" id="kaisha" value="2" /><br>  佐川急便<br><br>  <input name="kaisha" type="radio" id="kaisha" value="3" /><br>  ゆうパック･EXPACK<br><br>  <input name="submit" type="submit" id="submit" value="検索" /><br></form><br></body><br></html><br><?php<br>	}<br>?>

HTMLフォームとPHPの検索ページ表示の2ファイルに分けて作る場合

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

フォーム部分のHTMLファイル

<!DOCTYPE HTML><br><html><br><head><br><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br><title>荷物追跡サービス検索</title><br></head><br><body><br><form id="form1" name="form1" method="post" action="search.php" target="_blank"><br>  <label for="denpyou">伝票番号</label><br><br>  <input name="denpyou" type="text" id="denpyou" /><br><br>  <label for="kaisha">会社選択</label><br><br>  <input name="kaisha" type="radio" id="kaisha" value="1" checked /><br>  ヤマト運輸<br><br>  <input name="kaisha" type="radio" id="kaisha" value="2" /><br>  佐川急便<br><br>  <input name="kaisha" type="radio" id="kaisha" value="3" /><br>  ゆうパック･EXPACK<br><br>  <input name="submit" type="submit" id="submit" value="検索" /><br></form><br></body><br></html>

検索実行するPHPファイル

<?php<br>//エラー処理<br>$kaisha = (!isset($_POST['kaisha'])) ? null : $kaisha = $_POST['kaisha'];<br>$denpyou = (!isset($_POST['denpyou'])) ? null : $denpyou = $_POST['denpyou'];<br>$submit = (!isset($_POST['submit'])) ? null : $submit = $_POST['submit'];<br>//URL設定<br>$url['1'] = "http://jizen.kuronekoyamato.co.jp/jizen/servlet/crjz.b.NQ0010?id=".$denpyou;<br>$url['2'] = "http://k2k.sagawa-exp.co.jp/p/web/okurijosearch.do?okurijoNo=".$denpyou;<br>$url['3'] = "http://tracking.post.japanpost.jp/service/singleSearch.do?org.apache.struts.taglib.html.TOKEN=&searchKind=S002&locale=ja&SVID=&reqCodeNo1=".$denpyou;
if (empty($denpyou)){<br>	echo "Error! is empty denpyou number";<br>	}<br>else {<br>	header("Location: ".$url["$kaisha"]); <br>	}<br>?><br>

ページ内での実行テスト

上記のソースを使用してこのページにフォームを埋め込んでみました。実際に使えます。

伝票番号

会社選択ヤマト運輸佐川急便ゆうパック･EXPACK

Javascript版も作ってみました。

同じように使えるJavascript版も作成してみました。以下をご参照ください。

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

Yahoo、Google、bingのスタッフブログ

Sat, 05 Sep 2009 12:32:20 +0900

Yahoo!検索スタッフブログ 日々成長を続けるYahoo!検索。その戦略、サービスの詳細、Tipsなどを開発の現場から発信。 http://searchblog.yahoo.co.jp/

Google Japan Blog 日々成長を続けるYahoo!検索。その戦略、サービスの詳細、Tipsなどを開発の現場から発信。 http://googlejapan.blogspot.com/

日々是検索 検索窓からこんにちは! Microsoftの検索サービス・Bing(日本語読み：ビング）担当スタッフのブログです。タイトルと紹介文を編集する前に、[保存] をクリックして、デザインに対する変更内容を保存します。 http://searcheveryday.spaces.live.com/

MovableTypeの検索で「検索結果の作成に失敗しました。」というエラー

Tue, 18 Aug 2009 15:00:58 +0900

会社で使用しているMovable Type version 4.1なのですが、標準の検索窓に検索語を入れて検索ボタンを押すと**「検索結果の作成に失敗しました。」**と表示されました。

これを何とか解決したちところですが、原因がわからず、いろいろ検索したところ有力情報が見つかりました。

http://do-gugan.com/~furuta/archives/2008/02/movabletype341.html http://do-gugan.com/~furuta/archives/2008/02/movabletype341.html

上記のページを見ると原因は検索結果を表示するテンプレート「検索結果」にインクルードされている以下のモジュールが見当たらず、ちゃんとリンクしていないことが原因でした。

ヘッダー
ブログ記事の概要
フッター

管理している会社のホームページ（ブログ）の場合、このモジュールがすべて名前の変更がされており、削除されていること同然の状態になっておりました。

モジュール名を変更したところ正常に動作しました。

Google AJAX Feed APIで外部のRSSを読み込み一覧を表示するJavascriptを改造

Wed, 29 Jul 2009 13:45:09 +0900

前回のページ「」で紹介したスクリプトを一部変更してみた。

変更の主な内容は、

表示するリストを作成する際に、HTMLタグを変数に入れるように改造しました。（赤文字部分）

前回はXMLの要素を操作してリストを作成するようにしていましたが、

XMLの操作は苦手なのでHTMLのソースを変数に格納するようにしました。

google.load(“feeds”, “1”);

function initialize()

{

//RSSフィードの取得

var feed = new google.feeds.Feed("●●読み込みたいフィードのURL●●");

//取得するフィード数

feed.setNumEntries(5)

//実際に読む込む

feed.load(function(result)

{

//読み込めたか判別

if (!result.error)

{

//表示部分を選択

var container = document.getElementById(“feed”);

//変数の初期化

var list = “”;

//Feedの処理

list = ‘’;

for (var i = 0; i list += ‘- ‘;

list += ‘’ + entry.title + ‘’;

var strdate = createDateString(entry.publishedDate);

list += ‘（’ + strdate + ‘）’;

list += ‘’;**

}

**list += ' ‘;

container.innerHTML = list;**

}

});

}

//日付の表示方法を変更

function createDateString(publishedDate){

var pdate = new Date(publishedDate);

var pday = pdate.getDate();

var pmonth = pdate.getMonth() + 1;

var pyear = pdate.getFullYear();

var phour = pdate.getHours();

var pminute = pdate.getMinutes();

var psecond = pdate.getSeconds();

//var strdate = pyear + “年” + pmonth + “月” + pday + “日” + phour + “時” + pminute + “分” + psecond + “秒”;

var strdate = pyear + “-” + pmonth + “-” + pday ;

return strdate;

}

google.setOnLoadCallback(initialize);

↓↓実際にうちの社長のアメブロのフィードを読み込んで表示した例↓↓

google.load(“feeds”, “1”);
function initialize() {
//RSSフィードの取得 var feed = new google.feeds.Feed(“http://feedblog.ameba.jp/rss/ameblo/5603blog/rss20.xml");

//取得するフィード数 feed.setNumEntries(5)

//実際に読む込む feed.load(function(result) {

//読み込めたか判別 if (!result.error) { //表示部分を選択 var container = document.getElementById(“feed”);

//変数の初期化 var list = “”;

//Feedの処理 list = ‘’; for (var i = 0; i

前回同様に

RSSに「PR:」が含まれていなければ新着5件を表示しますが、

新着5件中1件に「PR:」が含まれていた場合は

フィード自体から削除して消すのではなく、省略というか、スキップしているだけなので

表示が4件になります。

この辺りは改善が必要ですが、また今度にします。

参考にしたサイト

http://www.ajaxtower.jp/googleajaxfeed/feed/index5.html http://www.ajaxtower.jp/googleajaxfeed/feed/index5.html

2009/09/23追記

上記を更に改造↓

http://qwerty.work/blog/2009/09/google-ajax-feed-api-1.php http://qwerty.work/blog/2009/09/google-ajax-feed-api-1.php

イントラネットでGoogle Maps APIが使える？

Wed, 27 May 2009 11:42:05 +0900

不動産会社に勤務している訳ですが、

中古住宅やマンション、売り土地の販売に

Google Mapsが使用できないかなと調べていますが、出来そうにない。

地図はGoogle Maps APIを利用すればできる訳ですが、

規約に違反しそうな感じです。

・地図に誰でもアクセスできること

・地図そのものを無償で提供すること

と、あるページを見ました。

あるページ↓

**Googleヘルプグループ **http://groups.google.co.jp/group/Google-Maps-JP-For-Business-Owners/browse_thread/thread/1a3cac9a78bb6713

そもそも、イントラネットなので、誰でも地図にアクセスできない。

この時点でアウト。

なぜ、イントラネットで利用したいか？ですが、

他社物件等を無断で公開出来ないなからです。

商談での社内利用で有れば問題ないので、

イントラネットで地図の利用ができればな～と思った訳なんです。

お金を払っても使用できないの？

と思い探したところ。ありました。

**『Google Maps API Premier』日本でも提供開始、イントラネット内利用も | ネット | マイコミジャーナル **http://journal.mycom.co.jp/news/2009/05/18/018/index.html

きっと高いんだろうな～

**Google Maps API Premier **http://www.google.co.jp/intl/ja/enterprise/maps/index.html

yahoo!地図もイントラネット利用はできないようです。

**Yahoo!デベロッパーネットワーク - 地図 **地図Web APIの利用方法 http://developer.yahoo.co.jp/webapi/map/

Google Chart API で QRコードを作成

Sat, 25 Oct 2008 12:06:41 +0900

http://chart.apis.google.com/chart?cht=qr&choe=UTF8&chld=l|0&chs=140x140&chl=https://qwerty.work

のように chl の後ろに指定した文字列をQRコードにしてくれる優れものです。

例えば、上記のURL（https://qwerty.work/）のQRコードを表示すると

と表示されます。

使い方

http://chart.apis.google.com/chart?

の後ろにいろいろパラメータを入れていきます。

Google Chart API での使用したいチャートの種類を指定（必須）

例：cht=qr

今回はQRコードでしようするためqrを指定していますが、その他グラフや地図などのチャートを指定できるようです。

出力する文字エンコードを指定（省略可）

例：choe=UTF8

  書式
  choe=文字エンコード


  値
  UTF-8、Shift_Jis　他

    （省略したときはUTF-8がデフォルト）

表示するQRコードのEC（回復）レベルとマージン（余白）の指定（省略可）

例：chld=l|0**　または　**chld=l%7C0

  書式
  chld=|


  の値
  l,m,q,h

     （回復できるレベル L=7%,M=15%,Q=25%,H=30%）


  の値
  任意の数字を入れる。

出力するQRコードのサイズを指定（必須）

例：chs=140x140

  書式
  chs=ピクセル値×ピクセル値


  値
  適当

QRコード化したい文字列やURL（必須）

例：chl=https%3A%2F%2Fqwerty.work

  書式
  chl=テキスト


  値
  任意の文字列

    （特殊な文字を含む場合はURLエンコードした文字列を使用する）

リファレンス

詳細については英語のページですが、以下のページをご参照ください。

https://developers.google.com/chart/image/docs/gallery/chart_gall https://developers.google.com/chart/image/docs/gallery/chart_gall

https://developers.google.com/chart/infographics/docs/qr_codes https://developers.google.com/chart/infographics/docs/qr_codes

文字化けするとき

携帯電話でQRコードを読み込ませると文字化けしてうまく認識されない場合や、ブラウザにURLを送信してもページが表示できずエラーになる場合はURLエンコードされたURL内の文字列の中にある%を%25に置き換えることで回避できます。

例えば、**「日本」をURLエンコードすると「%e6%97%a5%e6%9c%ac」**となるのでURLは以下のようになります。

http://chart.apis.google.com/chart?cht=qr&choe=UTF8&chld=l|0&chs=140x140&chl=%e6%97%a5%e6%9c%ac

とするところですが、携帯電話で読み取ると文字化けしてしまいますが、%を%25に置き換ます。

http://chart.apis.google.com/chart?cht=qr&choe=UTF8&chld=l|0&chs=140x140&chl=%25e6%2597%25a5%25e6%259c%25ac

これを携帯電話で読み込むと%e6%97%a5%e6%9c%acと認識されます。

ファイルメーカーで使うとき

ファイルメーカー内でQRコードを表示するためURLをブラウザに送る場合は

Substitute ( GetAsURLEncoded (URL) ; "%" ; "%25" )

でURLエンコードされたURLフィールド内の%を%25に置き換えるとうまくいきます。

その他のQRコードAPI

QR code generator

https://goqr.me/api/ https://goqr.me/api/

http://api.qrserver.com/v1/create-qr-code/?data=https%3A%2F%2Fqwerty.work&size=100x100

QRコード作成API

https://link-style.info/ https://link-style.info/

https://link-style.info/qrcode/https%3A%2F%2Fqwerty.work

その他のチャート関連ツール

QRコードの作成はできませんが、グラフなどのチャートで使えます。

https://www.chartjs.org/ https://www.chartjs.org/

自動サイトサムネイルMozshot

Tue, 02 Sep 2008 23:30:20 +0900

指定のURLのサムネイルをリアルタイムに表示するツール。

以下のタグを例に「？」以降にURLを指定してやるだけ！

こんなツール待ってました。

http://mozshot.nemui.org/ http://mozshot.nemui.org/

サムネイルの表示の方法もいくつかあるようです。

説明のページ↓

http://mozshot.nemui.org/shot/ http://mozshot.nemui.org/shot/

上記ページの内容を参照

**- Simple: ** https://image.thum.io/get/width/300/crop/200/http://www.google.com/ 　

** - Get small (64x64) image: ** http://mozshot.nemui.org/shot/small?http://www.google.com/

** - Get large (256x256) image: ** http://mozshot.nemui.org/shot/large?http://www.google.com/

** - Get 800x600 image: ** http://mozshot.nemui.org/shot/800x600?http://www.google.com/

**- Set browser window size to 300x300: ** http://mozshot.nemui.org/shot/-300x300?http://www.google.com/

- Specify window & image size: http://mozshot.nemui.org/shot/800x800-800x800?http://www.google.com/

更に詳細設定も可能。

http://mozshot.nemui.org/ui/advanced http://mozshot.nemui.org/ui/advanced

https://image.thum.io/get/width/300/crop/200/uri=http%3A%2F%2Fwww.mozilla.org%2F;noresize=true;win_x=1000;win_y=1000;effect=false;keepratio=true

uri　対象のURL
noresize
win_x
win_y
effect　影の有無　true:あり　false：なし
keepratio

Movable Type Pro と BiND for WebLiFE * の組み合わせに挑戦

Thu, 28 Aug 2008 23:36:36 +0900

Movable Type Pro とBiND for WebLiFE *組み合わせた個人ブログサイトに挑戦。

挫折せずに合体できるだろうか…。

Movable Type Pro

http://www.sixapart.jp/ http://www.sixapart.jp/

BiND for WebLiFE *

http://www.digitalstage.jp/bind/ http://www.digitalstage.jp/bind/