SQLの窓

2016年05月14日

Google Chrome の Web Speech API はまだまだ試験的な段階だとは思います。

文字が長い(80くらい)と Google Chrome レベルでクラッシュして動かなくなる。そうなると、Google Chrome の再起動。

Voice の一覧を取得して適宜正しい言語設定する必要あるのですが、最初の取得で取り出せない。

まあ、そのへんを納得して作れば子供の絵本の朗読くらいならできるかもです。


多くすると高い声 多くすると早く

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<textarea id="target_text" style='width:300px;height:60px;'>ある日の事でございます。御釈迦様は極楽の
蓮池のふちを、独りでぶらぶら御歩きになっ
ていらっしゃいました。</textarea><br>
<input type="button" id="speech_button" value="実行">
<select id="voice"></select>
<br>
多くすると高い声 <input id="vh" type="number" value="1" step="0.1" min="0.5" max="2">
多くすると早く <input id="vs" type="number" value="1" step="0.1" min="0.5" max="2">

<script>
var voice_types;

$(function(){

	if ( typeof SpeechSynthesisUtterance === 'undefined' ) {
		$('#target_text').val("Web Speech API は使えません");
	}

	// 何故か初回が取れない
	voice_types = speechSynthesis.getVoices();
	if ( voice_types.length == 0 || $('#voice').children().length == 0 ) {
		// 無かった場合、もう一度
		get_voice_type ()
	}

	$("#speech_button").on("click", function() {
		// 念のために取り出す
		voice_types = speechSynthesis.getVoices();
		if ( voice_types.length == 0 ) {
			// 再取得で無かった場合、もう一度
			get_voice_type ();
			return;
		}

		var speech = new SpeechSynthesisUtterance($("#target_text").val());

		speech.pitch = $("#vh").val();
		speech.rate = $("#vs").val();
		// 選択した言語を使う
		speech.voice = voice_types[ $('#voice > option:selected').val() ];

		speechSynthesis.speak(speech);

	});


});

function get_voice_type () {
		setTimeout(function(){
			voice_types = speechSynthesis.getVoices();
			$('#voice > option').remove();
			for( i = 0; i < voice_types.length; i++) {
				$('#voice').append(function(){
					var option = $('<option>');
					option
						.text(voice_types[i].name)
						.val(i);
					return option;
				});
			}
			$('#voice').prop("value",11);
		},1);
}

</script>



posted by at 2016-05-14 17:59 | Comment(0) | API | このブログの読者になる | 更新情報をチェックする

2013年09月26日

アマゾン・アソシエイトの 『linkCode=as1』は、はたして最新の正しい仕様なのかどうか

Amazon アソシエイト・プログラム アソシエイトリンク作成方法

▼ ASIN(個別商品)へのリンクフォーマット
http://www.amazon.co.jp/dp/[ASIN]?tag=[ASSOCIATE_TAG]&linkCode=as1&creative=6339
更新日:2009年11月17日 というページが確かに今も存在はするのですが、このページへのリンクはアマゾン内のどこからも見つける事ができていません。以前この仕様に従ってリンクを全て修正した事があるのですが、Google で探しても情報が無く、そもそも『アマゾン・アソシエイト』内で得られる情報類は、何かはっきりしないものが多く解りにくいです。 システムを作る人間から言うと、どうも日本で一般的に構築されているサービスから比べると、かなりアバウトな印象を受けます。ですが、顧客から見ればアマゾンは巨大で利便性の大きなサービスなんで、誰も文句は言わないんでしょうけれど。 商品リンクにしても、アマゾン・アソシエイト内で得られるもので使用されている画像は小さいもので、API を使うと大きい画像のリンクを得る事ができます。ただ、これに関しても実は解らない事が多すぎます。 でも、世の中にある『アマゾン・アソシエイト』にあるサービスが提供する商品リンクってみんな違うような気がするんですが・・・・どれがどうなんだかさっぱりです。 例えば、ブログ用の写真検索さんというサービスで取得できる URL は、以下のようになっています http://www.amazon.co.jp/exec/obidos/ASIN/486127642X/argusobnurd-22/ しかし、これは自分が linkCode=as1 に変更する前に使っていたコードなんですよね。でも、トリミングの方法は知らなかったので新しいかもしれないし。とにかく、Amazon アソシエイト用の API は調べてもあまり個人では役に立たないのではっきり解らないんですが、『使えるのは間違い無い』です。 トリミングは、どうやら 画像URL に含めるみたいで、誰でも 画像URL を書き換えれば使えるみたいです。
posted by at 2013-09-26 02:34 | API | このブログの読者になる | 更新情報をチェックする

2013年07月19日

Google の API を使用する為の OAuth 2.0 ログイン

Using OAuth 2.0 for Login( Google のドキュメント )

上のドキュメントではログインする為の URL のサンプルがありますが、一般アプリケーションでブロウザコントロールを使う上において、以下が最低限必要なものです( 見やすいように改行を付加しています )
https://accounts.google.com/o/oauth2/auth?
client_id=424911365001.apps.googleusercontent.com&
response_type=code&
scope=openid%20email&
redirect_uri=https://oa2cb.example.com/
ベースは『https://accounts.google.com/o/oauth2/auth』ですが、必要なものの詳細は以下のようになります。
➀ client_id : Google Developer Console より取得
➁ response_type : code で固定
➂ scope : 使用する API によって違います
➃ redirect_uri : client_id と供に登録されている URL

scope は、例えば Google Drive であれば https://www.googleapis.com/auth/drive.file+https://www.googleapis.com/auth/drive+https://www.googleapis.com/auth/drive.appdata となります。
また、カレンダーなら https://www.googleapis.com/auth/calendar+https://www.googleapis.com/auth/calendar.readonly+https://www.googleapis.com/auth/plus.me です。

❷ URL 内の code の取得

『リダイレクトURL?code=必要なデータ』という単純な内容なので、『必要なデータ』を取り出して、それを使って正式なアクセストークンを POST で取得します。( Exchange Code for Access Token and ID Token )

❸ https://accounts.google.com/o/oauth2/token へPOST

※ 見やすいように改行を付加しています
※ grant_type=authorization_code は固定です
POST /o/oauth2/token HTTP/1.1
Host: accounts.google.com
Content-Type: application/x-www-form-urlencoded

code=必要なデータ&
client_id=Client ID&
client_secret=Client secret&
redirect_uri=Redirect URIs&
grant_type=authorization_code


❹ JSON で返されるアクセストークン

token_type は、Bearer で固定のようですが、このアクセストークンを使う時に必要なので、保存して使用します。( Authorization ヘッダで、アクセストークンの前にセットする / 区切りはスペース )
{
  "access_token" : "アクセストークン",
  "token_type" : "Bearer",
  "expires_in" : 3599
}
関連する記事(実装)VS2010(C#) Form : Google API でログインして Google ドライブにアップロードWindows8(C#) で Google にログインしてカレンダーの情報を扱う


posted by at 2013-07-19 13:00 | API | このブログの読者になる | 更新情報をチェックする

Twitter API 1.1 : POST statuses/update_with_media / 画像付き投稿 -- の注意事項

要するに、boundary を使った、multipart/form-data による投稿です。

Twitter の API 詳細ページ
( Resource URL : https://api.twitter.com/1.1/statuses/update_with_media.json )

上記ページで、サンプルの生データが書かれていますが、正確なものを以下に書きます。
POST /1.1/statuses/update_with_media.json HTTP/1.1
Host: api.twitter.com
Content-Length: 15532
Authorization: OAuth oauth_consumer_key="...", oauth_nonce="...", oauth_signature="...", oauth_signature_method="HMAC-SHA1", oauth_timestamp="1347058301", oauth_token="...", oauth_version="1.0"
Content-Type: multipart/form-data;boundary=cce6735153bf14e47e999e68bb183e70a1fa7fc89722fc1efdf03a917340
 
--cce6735153bf14e47e999e68bb183e70a1fa7fc89722fc1efdf03a917340\r\n
Content-Disposition: form-data; name="status"\r\n
\r\n
UTF-8 での日本語\r\n
--cce6735153bf14e47e999e68bb183e70a1fa7fc89722fc1efdf03a917340\r\n
Content-Type: application/octet-stream\r\n
Content-Disposition: form-data; name="media[]"; filename="media.png"\r\n
\r\n
生の画像データ
\r\n--cce6735153bf14e47e999e68bb183e70a1fa7fc89722fc1efdf03a917340--\r\n
ヘッダ部分はたいていメソッド等が出力してくれますが、本体は自分で書く場合改行コードは \r\n です。
( \n でも動作するかもしれませんが、VS2010 で \r\n を使って動作確認しています )

画像データ部分はバイナリそのままで、バイナリデータの後ろにも、\r\n が必要です。また、画像データの前に一行空の行が必要です。( base64でエンコードされた画像は、現在サポートされていません。)

API 側の注意事項としては、認証用のデータは oauth_* のみで作成するようになっており、通常投稿で使用される『status』は使用されません。

ファイル名を格納する name 部分に media[] がセットされており、配列としての利用を想定しているようですが、実際は画像はひとつしかアップロードできません。

対応画像フォーマットはPNG、JPGとGIFです。アニメーションGIFはサポートされていません

古いエントリポイントである、『upload.twitter.com』はもう使えません。

日本語を投稿する場合、URLエンコードは必要ありません。UTF-8 で投稿します。
▼ 例
content = Encoding.GetEncoding("UTF-8").GetBytes(text + "\r\n");
sw.Write(content, 0, content.Length);
Twitter の場合、ファイル名( サンプルは、media.png ) は実際はなんでも良いような気がします。 関連する記事(実装) VS2010(C#) Form : POST statuses/update_with_media で画像を伴った Twitter 投稿
posted by at 2013-07-19 11:47 | API | このブログの読者になる | 更新情報をチェックする

2011年11月13日

Amazon アソシエイトの個別商品へのリンク作成方法

画像の URL やその他の商品の詳細情報は、API から取得しますが、アマゾンのページへのリンクは、Amazon アソシエイトで取得できるもの以外は自分で作る必要があるのですが・・・・
http://www.amazon.co.jp/dp/[ASIN]?tag=[ASSOCIATE_TAG]&linkCode=as1&creative=6339


Amazon アソシエイト(アフィリエイト) - ヘルプ

公式とは言うものの、更新日:2009年2月17日 でかなり古く Amazon で取得できるものとは少し違っています。ま、でも世の中を探しても無いのでこれを使うしかありません

以下は、タイトルや画像部分を API から取得してこの仕様で貼り付けコードを作成する WEB サービスです。



IE 拡張で Amazon ページから自動的に展開する事もできます。

Amazon 専用レビュージャンプ : IE拡張メニュー



posted by at 2011-11-13 20:26 | Comment(0) | API | このブログの読者になる | 更新情報をチェックする

2010年05月23日

自分が作ったWEBアプリから画像データを登録する手段

API で外部サービス

画像はデータ量がかさばるので、さすがに自分の WEB スペースでは一時的にしか保存する 事はできません。しかし、最近では無料で画像を保存させてくれるサービスがあるので、 API を使って利用する為にサンプルを作成しました。
Twitpic
このサービスの存在は最近まで知らなかったのですが、Twitter を眺めていて、車が盗難 されたうんぬん・・・という文章が流れて来て、見てみるとリンク先が Twitpic で、トラ ックの画像が掲載されていました。 「へえ・・・こんなのがあるのか。しかも API あるし」 と、言う事でテスト。API には v1 と v2 があったのですが、v1 はすぐ動きました。v2  は、仕様の文章があいまいな部分があったので、実装するのに結構時間がかかりましたが、 おかげで、本家 Twitter の API の内容もあわせて良く理解する事ができました。 しかし、いくら英語だからと言っても、少なくとも「仕様」というにはあまりに説明不足 な文書が多いと思います。自分自身も技術者だから良く解るのですが、「自分は解ってる」 とう前提で書くと、他人には伝わらない事が多いですね :-) ほんと、その上言語の壁があると、どんどん遅れて行くのでとてもつらいです。 ま、グチはさておいて。
PHP + Twitpic API v2 で、ファイルをアップロード
当然、ある程度の知識が無いと意味は解りづらいものではありますが、4つのデータを用意 すればだれでも使えるはずです。
必要なもの
1) Twitpic のAPIキー 2) Twitter の Consumer key 3) Twitter の Consumer secret 4) Twitter の Access Token 5) Twitter の Access Token Secret アクセストークンは アプリケーションに割り当てられた My Access Token を参照して取得して下さい Twitter_mytoken4 この API の v2 では、Twitpic には、2〜5を直接は渡しません。 Twitpicでアカウントが存在するかどうかをチェックする為の Twitter の API を使う のに必要な最低限のデータを渡します。 とても安心です。API の v1 は直接渡すのでおすすめできませんね。
Picasa
これは、言わずと知れた Google のサービスです。いろいろな言語でライブラリが 存在するので、それらを使う事が推奨されます。Twitter のような元となるデータ の引き渡し方の仕様はいろいろ探したのですが、明確なものを見つけられませんで したので、素直にライブラリまたはフレームワークを使うべし、という結論です。 自分は、PHP で処理したかったので、Zend Framework を使いましたが、例によって クラス化されているわりにドキュメントが貧弱なのでサンプルコードを元に手順が 理解しやすいようにしました。それにしてもこのサンプル(Photos.php)作った人、 そうとうやっつけ仕事をやってます。きっと相当忙しい人なんでしょうね でも、何故かオンラインマニュアルは丁寧です。 Zend Framework: Documentation: Picasa Web Albums の使用法
PHP : Zend Gdata による Picasa アップロード
posted by at 2010-05-23 12:33 | API | このブログの読者になる | 更新情報をチェックする

2009年08月23日

AmazonのAWSECommerceServiceの署名認証をPerlかPHPで今後利用する人の為に

今回殆ど他人様が作ったコードを利用させていただきましたが、既に利用して来た
場合はなんとか頑張ってできるものですが( もう期限はこえましたし )、今後使おう
と言う人にとって、どうなんでしょう。

で、あまり手を入れないで済む方法を使いましたので紹介しておきます。


【PHP用】Amazon アソシエイト Web サービスの名称変更および署名認証の期限が近づいて来たので



【Perl用】Amazon 署名認証をPerlでやる必要のある人向けの簡単なサンプルと配置方法


my %pkv;
$pkv{'Service'} = 'AWSECommerceService';
$pkv{'SubscriptionId'} = $SubscriptionId;
$pkv{'Operation'} = 'ItemLookup';
$pkv{'ResponseGroup'} = 'Large';
$pkv{'ItemId'} = $_POST{'ISBN'};
$pkv{"Timestamp"} = strftime("%Y-%m-%dT%H:%M:%SZ", gmtime);

my $pstr = join('&', map {"$_=".uri_escape($pkv{$_})} (sort keys %pkv));
my $data = "GET\nwebservices.amazon.co.jp\n/onca/xml\n$pstr";
my $key = "秘密のキー";
my $signature = hmac_sha256_base64($data, $key);
$signature .= '=' while length($signature) % 4;
$signature = URI::Escape::uri_escape($signature);

my $aurl = qq(http://webservices.amazon.co.jp/onca/xml?)
	.qq($pstr&Signature=$signature);



関連する記事

Amazon の署名認証ってのがありまして・・・




posted by at 2009-08-23 20:22 | API | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します


Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX