2015-01-01

新年あけまして、おめでとうございます。

未分類

新年あけまして、おめでとうございます。

■A Happy New Year

http://ok2nd.me/tool/newyear/

■賀正

http://ok2nd.me/tool/gashou/

2014-11-16

Ver.7.03：「カレンダー」に印刷用ページを追加

カレンダー

MyHome Portal Ver.7.03をリリースしました。

http://ok2nd.web.fc2.com/download.html

「カレンダー」に、印刷用ページを追加しました。余分なヘッダー等を無くしたシンプルな月間スケジュールを印刷します。1か月～12か月分をまとめて印刷できます。

「学習」に、英文の発音機能を追加しました。「High Quality Text-to-Speech API」を使っています。

http://tts-api.com/

2014-11-08

「2nd 英語」に英文の発音機能追加

英会話

「2nd 英語」に、英文の発音機能を追加しました。

【2nd 英語：スマホ用】

http://ok2nd.me/eigo/mobile/

【2nd 英語：PC用】

http://ok2nd.me/eigo/pc/

「High Quality Text-to-Speech API」を使っています。

http://tts-api.com/

以下のサイトで紹介されている方法を使いました。

http://hello-apis.blogspot.jp/2013/02/tts-apicom-text-to-speech-api.html

<button onclick="(new Audio('http://tts-api.com/tts.mp3?q=hello%20world.')).play();return false;">
    <img src="../icon/speaker.png"></button>

テストでは、以下の２つの方法も試しましたが、上記方法が一番レスポンスが良かったようです。

１つは、次のサイトで紹介されている「jquery.say.js」を使う方法です。

http://stabucky.com/wp/archives/4576

<button onclick="sayEnglish('hello%20world.');return false;">
    <img src="../icon/speaker.png"></button>
<script src="../scripts/jquery.say.js"></script>
<script>
function sayEnglish(text) {
    $.say(text.replace(/’/g, "'"));
}
</script>

もう１つは、Ajaxを使って、audioタグを返す方法です。

<button onclick="speechEnglish('hello%20world.');return false;">
    <img src="../icon/speaker.png"></button>
<script>
function speechEnglish(text) {
    $.ajax({
        type: "GET",
        url: "text-to-speech.php?q="+text,
        async: true,
        success: function(res){
            $("#mp3").html(res);
            var myAudio=document.getElementById("english");
            myAudio.play();
        }
    })
}
</script>
<span id="mp3"></span>

≪text-to-speech.php≫
<?php
    echo '<audio id="english" src="http://tts-api.com/tts.mp3?q='.$_GET['q'].'>" controls></audio>';
?>

2014-11-02

Ver.7.02：MySQL関数をmysqliに変更

MySQL

MyHome Portal Ver.7.02をリリースしました。

http://ok2nd.web.fc2.com/download.html

MySQL関数をmysqliに変更。(mysql拡張モジュールが、PHP5.5から非推奨になっているため。)

$link = mysql_connect('localhost', 'my_user', 'my_password');
$db_selected = mysql_select_db('database_name', $link);
　↓↓↓
$link = mysqli_connect('localhost', 'my_user', 'my_password', 'database_name');

ただし、モバイル用モジュール「_mobile/以下」は、mysqli非対応のままです。

ツール「Google Maps API V3版」で、ストリートビューをオフにした時に、人形マークを元に戻すようにしました。

ツール「Google Maps API V3版」で、ストリートビュー状態では、現在地情報ウインドウを表示しないようにしました。

2014-10-14

Google Maps APIによる複数スポット表示

地図・Google Map

HTMLファイルに、スポット名、緯度、経度を指定するだけで、Google Maps API V3を使った複数地点表示が出来るJavaScriptを公開します。

※ Firefoxでは、マーカーが表示されないなど、正常動作しません。

CGI等サーバーサイドの処理はありませんので、静的サイトに、HTML、JavaScript、CSS、画像ファイル一式を置くだけで使えます。

HTML、JavaScript、CSSファイル一式を以下からダウンロードできます。

https://sourceforge.jp/projects/map-spots/releases/

HTMLファイル(sample.html)内に、JavaScript配列変数「points」で、緯度、経度、スポット名(ビル名、店名等)を、以下の形式で指定してください。

「points」に指定する地点名が8地点までであれば、ルート表示もできます。

配列変数「others」に、その他の地点を指定すると、小さなマーカーで地点表示します。4番目に'r'を指定すると、マーカーと地点名の色が変わります。

「現在地」ボタンを押すと、現在地を人間マーカーで表示します。スマホで、現在地をマーカー表示させながら、スポットめぐりが出来ます。

マーカーをクリックすると、情報ウインドウが開きます。情報ウインドウのスポット名をクリックすると、Google検索画面が開きます。情報ウインドウの「→Googleマップ」をクリックすると、Googleマップで、地点表示をします。

<script>
var points = [];
points[0] = [緯度, 緯度, 'スポット名'];
points[1] = [緯度, 緯度, 'スポット名'];
points[2] = [緯度, 緯度, 'スポット名'];
...
var others = [];
others[0] =  [緯度, 緯度, 'スポット名', ''];
others[1] =  [緯度, 緯度, 'スポット名', 'r']; // 別色
others[2] =  [緯度, 緯度, 'スポット名', ''];
...
</script>

以下で、サンプルの動作確認ができます。

http://ok2nd.me/map/spots/?key=1980065740541e6f846e138