Windows 用 curl で、Googls Photo API を呼び出して画像の baseUrl を取得する

現実的に言って、Googls Photo API はまだ使わないほうがいいですが、今後の為に Google の API を使う上で oauth の扱いのサンプルと考えてテストしています。

Google からの情報で順に文字列を作成する必要があり、とても煩雑になるので、このブログで実行可能な簡単な curl のコマンドライン作成プログラムを用意しました。


Windows 用の curl をダウンロードする

https://curl.haxx.se/download.html






この時点では、curl-7.63.0-win64-mingw.zip 解凍して bin\curl.exe を実行しています


Google API Console でプロジェクトを作成し、認証情報より クライアント ID と クライアント シークレット を取得します。
※ curl で実行するので、OAuth 2.0 クライアント ID はその他で作成します


この作業は、こちらを参照して下さい。既にプロジェクト等がある人は以降の手順で access_token を取得します。


アプリケーション 用のコード を取得する URL の作成

クライアント ID : 




accss_token を取得するコマンドラインの作成

コード : 
クライアント シークレット : 




accss_token でアクセスするコマンドライン1

※ アルバム一覧を取得します
※ ここで取得した access_token は１時間しか有効ではありません。

access_token : 



accss_token でアクセスするコマンドライン2

アルバム id : 



このコマンドラインで、指定したアルバムの中にある画像の情報を取得できます。

但しこれで取得した baseUrl は、一応アドレスバーに入力すると画像が表示されますが、異常に長い URL であるのと、Content-Type を返さないという問題があります。(Content-Type を返したい場合は最後に =w幅 を追加します)

※ なので、その他いろいろな状況も鑑みて、現状この URL で img 要素を作成して運用するにはとてもリスクがあります。




▼ 補足
OAuth 2.0 Flow: Installed apps / urn:ietf:wg:oauth:2.0:oob について

WordPress の リダイレクト用のコードを作成する PHP / パーマリンクが数字だけだったので、投稿名を追加してから

記事数が40記事程度で少なかったので、パーマリンク設定を

/%year%%monthnum%%day%-%post_id%.html

から

/%postname%-%year%%monthnum%%day%-%post_id%.html

に変更して、タイトルを Google で翻訳してパーマリンクを編集してから以下のコードで .htaccess 用のリダイレクトコードを作成しました

参考 : How to Get a List of All WordPress Post URLs

<?php

include "wp-load.php";

// posts_per_page=-1 は全件
//$query_result = new WP_Query('post_type=any&posts_per_page=-1&post_status=publish');

// 通常記事のみ
$query_result = new WP_Query('post_type=post&posts_per_page=-1&post_status=publish');
$all_posts = $query_result->posts;

header('Content-type:text/plain');

foreach($all_posts as $post) {

	switch ($post->post_type) {

		// 関係の無いエントリ
		case 'revision':
		case 'nav_menu_item':
			break;

		// 固定ページ
		case 'page':
			$permalink = get_page_link($post->ID);
			break;

		// 通常記事
		case 'post':
			$permalink = get_permalink($post->ID);
			break;

		// 添付ファイル
		case 'attachment':
			$permalink = get_attachment_link($post->ID);
			break;

		// 独自投稿タイプ / その他
		default:
			$permalink = get_post_permalink($post->ID);
			break;
	}

	$pattern = '/https:\/\/.+-(\d+)-(\d+).html/';

	$replacement = 'Redirect 301 /lightbox/$1-$2.html';

	print "\n" . preg_replace($pattern, $replacement, $permalink) . " " . $permalink;
}
?>

無料SSL(Let's Encrypt) : [さくらインターネット]SSLサーバ証明書発行のお知らせ

https://winofsql.jp/info.php


さくらインターネットやその他のレンタルサーバで、無料SSL が使用可能である事を知り、インストールしました。インストール後、[さくらインターネット]SSLサーバ証明書発行のお知らせ というメールが来ましたが、手順はほぼボタンをクリックするだけです。

【無料SSL】サーバコントロールパネルからの導入手順

最初に、さくらインターネットで取得・管理しているドメインを利用するか他社で取得・管理しているドメインを利用する かを確認します。

自分は、さくらインターネットで取得・管理しているドメインを利用しています。

▼ 確認事項

さくらインターネットにて2004年7月15日以降に取得・移管された独自ドメインに限る。
( 会員メニューの契約情報の下のほうにある サービス利用期間 で確認できます )

さくらインターネットのネームサーバを利用する事
プライマリネームサーバ：ns1.dns.ne.jp
セカンダリネームサーバ：ns2.dns.ne.jp
対象となるドメインのAレコードの値がさくらのレンタルサーバに向いている必要がある。

以上の情報は、会員メニュー > ドメインメニュー > ゾーン編集 で確認できます。
( エントリ名 が @ の部分で確認ができます / ドメインで ping を実行して取得できた IP が A レコードに対応 )

おそらく、たいていの場合は問題無く、そのまま SSL の設定手順に基づいてクリックしていくだけです。

設定・お申し込み手順

1) SSL設定を有効にする

2) 確認

2) の確認は要するにまず、http:// ではなく https:// で表示されるかどうかです。

▼ ページの編集

問題は、そのページから読み込んでいる、.css .js 及び 画像が https:// でアクセスされていないと、Google Chrome の場合 URL の左に『保護された通信』と表示されません。

css 内に記述されている URL や、js 内より動的に作成されるものも全て変更する必要があります。特に、画像類も全て対象になるので細かくチェックします( ファイル名や画像名は、F12 のデベロッパーツールのコンソールで確認できます )

▼ 変更が不十分だとこうなります


▼ 証明書の更新について

メールの中に以下のように書かれています
今回お申し込みいただいた無料SSLについては証明書は有効期間が90日となりますが、サーバで自動更新いたしますので今後更新作業を行う必要はございません。ご利用を停止したい場合は「秘密鍵を含む設定の削除」から証明書を削除してください。

※ レンタルサーバ側で自動更新してくれるので、特別な配慮は不必要のようです。

http から https へのリダイレクトについて

暗号化(SSL)を有効としている場合、暗号化しているページへ誘導したい に以下のような .htaccess 用の記述が書かれています。
SetEnvIf REDIRECT_HTTPS (.*) HTTPS=$1 
<IfModule mod_rewrite.c>
RewriteEngine on 
RewriteCond %{ENV:HTTPS} !on 
RewriteRule .* https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L] 
</IfModule>

ですが、自分はすでに .htaccess を配置していろいろやっているので、該当するフォルダ内の .htaccess の最後に以下を追加しました。
RewriteEngine on 
RewriteCond %{ENV:HTTPS} !on 
RewriteRule .* https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L] 

※ もう少しきちんと記述方法を調べれば、もっと限定した処理も書けると思います

▼ 昔設置した、小文字から大文字のリダイレクト
RewriteEngine On
RewriteBase /
RewriteRule va003334/(.*) VA003334/$1 [R,L]

イメージユニット作成サービス / window.open と Lightbox2 と Shadowbox

大きい画像を表示する為の選択肢として、

1) window.open
2) Lightbox2
3) Shadowbox

のいずれかを選択して貼り付けコードを作成します。試してみたい場合、lightbox や shadowbox のライブラリを意識する必要はありません。ご自分でホスティングする方法は、以下のリンク先を参考にして下さい。

Lightbox2 ライブラリの今時の使い方

このユニットは以下のコードで設置できます

<script type="text/javascript" src="http://lightbox.on.coocan.jp/js/createImageUnit.js" charset="utf-8"></script>

関連する記事

JavaScript : 入力文字列を htmlentity に変換する
( Lightbox2 では、タイトル部分に htmlentity で HTML を設定できます )

フリーフォントでボタン素材作成のバリエーションサンプル / ノーマル・文字なし・太枠・フォント

たくさんのフリーフォント(約260種類)を使用していろいろなボタンを簡単に作成できます。

▼ 以下は jQuery で実際に動作するコンテンツです

utf8 文字ツール の 文字参照リンクの作成方法

http://lightbox.on.coocan.jp/html/utf8tool.php?hex=26C4&col=FFC0CB&target=26C4,26C5,26D4,26F3,26F5,26FD,2709

この URL で utf8 文字ツール を表示すると、先頭が 0x26C4 の文字になり、26C4,26C5,26D4,26F3,26F5,26FD,2709 で指定された文字の背景を col で指定した背景色にする事ができます。(hex=26C4 は、num=9924 でも動作します)

また、この URL で表示されたページにあるボタンで表示位置を変更しても、範囲内に選択した文字があれば、背景色は変更されたまま表示されます。元の位置に戻したい場合は、F5 で再表示して下さい。



1) 右上の ● をクリックするとその文字が先頭になります 

2) 文字の下の &#nnnnn; は、HTML 上で有効な文字そのものです 

3) その下は、nnnnn を 16進数に変換したものです 

4) 一番下は、文字そのもののコードを16進数であらわしています


3種類のコード部分はクリックすると選択されるので、CTRL+C でコピーして利用しやすくなっています。

本体の文字が連続して欲しい場合は、先頭にしたい文字の右上の ● をクリックしてから、文字一覧取得ボタンをクリックしてウインドウを表示させると、その中のテキストエリアに320文字を連続して表示しています。