スマフォのブラウザで音声再生

スマフォのブラウザで音声再生します。 今回は audiojs というライブラリを使用しています。サンプルはこちら http://moeten.info/js/20140713_audiojsTest/ ※Chromeを使用してください。ソースコードはこちら index.html <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" /> </meta></head></html>

入力文字を英語に翻訳して読み上げる

入力した文字を英語に翻訳して読み上げます。サンプルはこちら http://moeten.info/js/20140712_transWord/ソースコードはこちら index.html <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" /> </meta></head></html>

ブラウザで音声入力をしてGoogle検索

ブラウザで音声入力をして、Google検索を行います。サンプルはこちら http://moeten.info/js/20140712_speachApi/ ※スマートフォンのChromeで試してみてください。ソースコードはこちら index.html <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" /> </meta></head></html>

グーグルマップで現在位置からクリックした場所の徒歩ルートとカロリーを表示

グーグルマップで現在位置からクリックした場所の徒歩ルートとカロリーを表示します。サンプルはこちら http://moeten.info/js/20140711_calMap/ソースはこちら index.html <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" /> </meta></head></html>

GoogleMapに雨雲を表示

GoogleMapに雨雲を表示します。サンプルはこちら http://moeten.info/js/20140710_cloudMap/rainmap.htmlポイントとなるのは、GoogleMapにズームや移動に対応したオーバーレイを表示する場合は、xy何番目のタイルかと、ズーム値に対応した画像(縦横256…

PHPでArduinoのシリアル通信を読み取る

PHPでArduinoなどのシリアルポートを読みとります。PHPでArduinoなどのシリアルポートを読むには、SerialPortライブラリを使用すると簡単にできます。 準備 まずは、SerialPortライブラリのダウンロードします。 oasynnoum/phpmake_serialport · GitHubこち…

Javascriptのみでカメラ撮影

スマートフォンのChromeでカメラ撮影ができます。ブラウザからのテストはこちらから行えます。 http://moeten.info/js/20140708_cameraTestJs/ ソースコード index.html <html> <head> <title>Self Camera</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <…</meta></head></html>

PHPのWebSocketを使用してリアルタイムにグラフを描画

PHPのWebSocketを使用して、リアルタイムにグラフを描画します。 必要となる機能は、PHPのソケットサーバー、GoogleChart、ChromeなどのWebSocketが利用できるブラウザになります。 ブラウザ側のソース index.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="https://www.google.com/jsapi"></script> </meta></head></html>

Android Studioで最速開発

ちょいとAndroid Studioで簡単開発をしてみました。 その際のインストールなどをメモ。 1.Android Studioのインストール 公式サイトより、Android Studioをダウンロードして、インストールを行う。 Getting Started with Android Studio | Android Develop…

Windows8 64bit 、ruby 64bit において、mysql2をインストールする

Windows8 64bit 、ruby 64bit において、mysql2をインストールする際にエラーが出たのでメモ 結論としては、64bit の ruby ではなく 32bit で統一すればOK インストール方法 mysql2 をインストールするには mysqlコネクタの32bit版 が必要なので、ダウンロー…

Windows8(64bit)にruby on rails をインストールする

Windows8(64bit)にruby on rails をインストールするにはいくつかファイルとコマンドが必要 Ruby 2.0.0-p353 (x64) を公式サイトからダウンロードし、インストールする ※インストールする際は、pathの追加にチェックを入れると、コマンドプロンプトのどこか…

FileAPIを使って画像をアップする際はバイナリチェックも

JS

FileAPIを使って画像をアップする際は、ファイルの拡張子を偽装してもアップできるので、バイナリチェックを行うほうがよりしっかりします。 JPEG画像をFileAPIを使ってアップすると、下記のようなbase64文字列を取得することができます。 data:image/jpeg;b…

SVGアニメーション

Adobeさんより、SVGライブラリが出ましたので、ちょっと試してみました♪ サンプルはこちら ※更新ボタンクリックでランダムに円が配置されます。 スマフォのChromeでも普通に再生されるからいいのかなあっと。 あとはCanvasと比べて、負荷がどうなるのかも気…

twitteroauthを使ってつぶやく+緯度経度情報付き

PHP

twitteroauthを使ってつぶやいてみました。 ソースコードはこちら

郵便番号から住所検索

JS

なにやら便利なjQueryプラグインが出ていたので使ってみました。 tkengo/jquery.ajaxzip2 · GitHub 住所データーのjsonファイルをダウンロードして、dataの場所を指定すればとりあえず、動くみたいです。 ソースコードはこちら <html> <head> </head></html>

MySQLのgeometry型を使い、距離を出す

最近のMySQLは緯度経度が扱えるgeometry型がありますので、そちらを使い、2点間の距離を出してみました。 テーブル mygis の作成 気をつける点としては、ENGINEはMyISAM型がよいのと、最新のバージョンのMySQLでないとgeometry型は扱えないようです。 CREAT…

Googleマップの中心の緯度経度を表示する

JS

ちょっと、古めの内容ですが、Googleマップの中心の緯度経度を表示してみました。 こんな感じで、ドラッグしても、センターの場所を教えてくれます。 ソースコードはこちらっ <html xmlns="http//www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title></title> </meta></head></html>

画像選択後に自動でサーバーに画像をアップ

JS

フォームにて、画像選択後に自動でサーバーに画像をアップすることができます。 ちなみにAndroidではカメラ画像でも撮影→サーバーアップが可能となっています。 ファイル送信側ソース <html> <head> <script> window.addEventListener("load", function(){ if (!window.File){ re</head></html>…

ffmpegで数秒ごとに画像を切り抜いてGIFアニメーション化

ffmpegで数秒ごとに画像を切り抜いてGIFアニメーション化します。 &1 "; exec( $cmd_2 , $output); //出力結果を調査(Duration=秒数) foreach( $output as $value ){ $tmp = split( ":" , $value ); if( trim( $tmp[0] ) == "Duration" ){ …

PHP_DOMを使ってページにあるZIPファイルなどをダウンロードする

PHP

なにやらPHPでHTMLの要素選択をjQueryのように扱えるライブラリがあったので、遊んでみました。 PHP_DOMを使ってページにあるZIPファイルなどをダウンロードすることができます。

MySQL5.6インストールメモ

なにやらMySQL5.6からmemcachedが扱えるようになり、速度が9倍になったとのことで、インストールだけしてみました。 手順は、下記になります。 MySQL5.6のインストールをします。 yum install http://ftp.jaist.ac.jp/pub/mysql/Downloads/MySQL-5.6/MySQL-…

htmlspecialchars の置換

PHP

なにやら、PHP5.4からhtmlspecialcharsの動作が変わったので、SJISな方は下記の用に修正しないと、空白が返ってくるみたいでっす。 PHPStormを用いて、正規表現における htmlspecialchars の置換 htmlspecialchars\((.*?)\) ↓ htmlspecialchars\($1,ENT_QUOT…

CentOS6.4 64bit にswfmillをインストールする

自分的メモ CentOS6.4 64bit にswfmillをインストールする wget http://rpms.famillecollet.com/enterprise/remi-release-6.rpm; rpm --import http://rpms.famillecollet.com/RPM-GPG-KEY-remi; rpm -ivh remi-release-*.rpm; yum -y --enablerepo=remi ins…

MySQL5.6でのsqlインポートの際にエラーが出る場合

古いMySQLから、MySQL5.6へとSQLを移行しようとした際にエラーがでたのでメモ なにやらSQL構文の変更がされているみたいなので、sed コマンドなどで、下記のように置換してあげると通るようになります。 $ sed -e "s/TYPE=/ENGINE=/g" target.sql > target2.…

横からひょいって出てくるメニュー

Sidr - A jQuery plugin for creating side menus Facebookのような、横からメニューがでるものでっす。 ソースはこちらっ <html> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1" /> </meta></meta></head></html>

誕生日アプリを更新

ちょっとだけ誕生日アプリを更新しましたー こちらからダウンロードできまーっす♪ https://play.google.com/store/apps/details?id=air.happyBirthDayApp あと、ソースコードはこちらっ ※DPIの設定とかよく分からんち

簡単にJSONPなプログラム

JS

簡単にJSONPなプログラムを書いてみましたー サンプルはこちらっ(Chromeで見てねっ☆(ゝω・)vキャピ) http://moeten.info/js/20130322_jsonpTest/ ソースは右クリックから見てねっ なんでかスマフォで動かないのでその辺はそのうち(^^ゞポリポリ 萌店APIの出…

EdgeAnimationで簡単に作ってみましたー

EdgeAnimationで簡単に作ってみましたー サンプルはこちらっ http://moeten.info/js/20130321_edgeAnimationTest/publish/web/ なにやらマックユーザーはダッシュボードのウィジェットとしても使えるみたいです。 下記をクリックしてダウンロードしたらウィ…

メモ

TypeScript npm install -g typescriptあとはWebStromなどで、新規→typescript で自動でJSを吐き出してくれるようになる。 compassのマルチコア処理 npm install grunt-compass-multiple

ハピバあぷり

簡単にハピバアプリを作ってみましたー スピナーで名前を選んで、それぞれの誕生日メッセージを再生させることができまっす。 ※明日くらいにはAndroidMarketにはhappyBirthDayAppで検索すれば出るかと思います。 ってことっでソースコードでーっすっ