ローディング画面でSVGアニメーション

ローディングライブラリが出てましたので、SVGアニメーションのサンプルを動かしてみました。サンプルはこちら http://moeten.info/js/20141015_loadingSvgAnimation/ ソースコードはこちら <html> <head> <script src="progressbar.min.js"></script> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 100 100"> </svg></body></html>

2014-09-23

jQueryライクに３D空間を作れるライブラリtQuery

jQueryライクに３D空間を作れるライブラリtQuery tQuery API - extensions for three.jsで簡単に３D空間を作ってみました。 <title>Minimal tQuery Page</title> <script src="tquery-bundle.js"></script> <script src='tquery.checkerboard.js'></script> <script src="tquery.shape.js"></script> <script src="tquery.shape.create.js">…

2014-09-23

Canvasにランダムな点

Canvasにランダムな点を描く方法 canvasをjQueryライクに扱えるjCanvas | jQuery meets the HTML5 canvasを使ってcanvasにランダムな色の点を書いてみました。 var canvas = $("canvas"); var width = canvas.width(); var height = canvas.height(); for( v…

2014-09-08

CSS3とjQueryでアコーディオン

CSS3アニメーションを使って、アコーディオンを実現します。jQueryのslideDownよりも幾分、なめらかに動作するかと思います。サンプルはこちらhttp://moeten.info/js/20140908_cssSlide/メインのソースはこちら css dd{ overflow-y: hidden; opacity: 0; max…

2014-07-23

Apacheからnodejsのリッスンサーバーポートにマッピングさせる

Apacheからnodejsで起動したサーバーポート3000にマッピングさせます。 Apacheの設定ファイルの編集設定ファイルを編集します。 emacs /etc/httpd/conf/httpd.conf 下記項目を追記します。 NameVirtualHost *:80 <VirtualHost *:80> ServerName example.com #←利用ドメインの</virtualhost>…

2014-07-23

WindowsのPhpStormでLess

WindowsのPhpStormでLessを使用する方法です。 nodejsのインストールまずは、nodejsをダウンロードしてインストールを行います。 node.js ※インストールすると使えるnodeやnpmコマンドは結構使用しますので、環境変数pathに追加しておくと、コマンドプロン…

2014-07-22

SVGをレスポンシブ化

SVGをレスポンシブ化させます。サンプルはこちら http://moeten.info/js/20140722_svgResponsive/ 適当にウィンドウ幅を変えてみてください。作り方 SVGのレスポンシブ化は簡単で、SVG画像を作成する際、イラストレーターでレイヤーの名前にIDを指定します…

2014-07-20

Raspberry Piと温度湿度センサーを使って数値をグラフ化

Raspberry Piと温度湿度センサーを使って数値をグラフ化します。サンプルはこちら http://moeten.info/js/20140720_tempHumGraph/graph.html 必要なアイテム Raspberry Pi Type B 512MBと温度湿度センサー温度湿度センサーのインストール温度湿度センサー…

2014-07-19

Linuxが動くRaspberry Piを買ったのでUnixBenchを走らせてみた

Linuxが動くRaspberry Piを買ったのでUnixBenchを走らせてみました。 Benchmark Run: 土 7月 19 2014 02:43:42 - 03:12:04 1 CPU in system; running 1 parallel copy of tests Dhrystone 2 using register variables 1656457.1 lps (10.0 s, 7 samples) Dou…

2014-07-18

画像からSVGアニメーションを作成

画像からSVGアニメーションを作成します。指定する画像はアニメ系のほうが、見てて楽しいと思います。サンプルはこちら http://moeten.info/js/20140718_imageToSVGAnimation/ソースコードはこちら index.html <html lang="ja"> <head> <meta charset="UTF-8"> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> </meta></head></html>

2014-07-18

グーグルプレイスで検索

指定された緯度経度とキーワードを元に、グーグルプレイスで検索し、近い順に表示します。サンプルはこちら http://moeten.info/js/20140718_googlePlaceTest/ソースコードはこちら 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>

2014-07-17

javascriptでQRコードを認識

javascriptでQRコードを認識します。http://moeten.info/js/20140717_qrcodeDetectTest/ソースコードはこちら <html> <head> <title>QRCODE</title> <script type="text/javascript" src="lib/grid.js"></script> <script type="text/javascript" src="lib/version.js"></script> <script type="text/javascript" src="lib/detector.js"></head></html>

2014-07-15

バーコードから商品を検索

バーコードから商品を検索します。サンプルはこちら http://moeten.info/js/20140715_barcodeDetectTest/ソースはこちら 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>

2014-07-14

three.jsで地球儀

ちょいとthree.jsで地球儀を作ってみたのでメモCSS3フィルターも普通にかけられるっぽいです。サンプルはこちら http://moeten.info/js/20140714_threejsSphereTest/index3dTest.htmlソースコードはこちら <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" /> </meta></head></html>

2014-07-14

javascriptでの顔認識

javascriptでの顔認識を行います。速度も結構早い感じで、スマートフォンのchromeでも結構認識してくれます。サンプルはこちら http://moeten.info/js/20140714_faceDetectTest/認識精度はいまいちですので、適当に顔写真をアップしてみてください。AKBの集…

2014-07-13

カメラ画像にCSS3でエフェクトをつける

カメラ画像にCSS3でエフェクトをつけます。サンプルはこちら http://moeten.info/js/20140713_cssEffectTest/index.html ※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>

2014-07-13

javascriptでのAR

javascriptでのARをしてみたのでちょっとメモ。サンプルはこちら http://moeten.info/js/20140713_arTest/上記ページをスマートフォンのChromeなどで表示して、下のマーカーを写すと認識されます。ソースコードはこちら index.html（ほとんどjs-aruco - Jav…

2014-07-13

javascriptで内カメラと外カメラの切り替え

javascriptでスマートフォンの内カメラと外カメラの切り替えを行います。サンプルはこちら http://moeten.info/js/20140713_backCameraTest/ ※スマートフォンの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>

2014-07-13

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

スマフォのブラウザで音声再生します。今回は 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>

2014-07-12

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

入力した文字を英語に翻訳して読み上げます。サンプルはこちら 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>

2014-07-12

ブラウザで音声入力をして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>

2014-07-11

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

グーグルマップで現在位置からクリックした場所の徒歩ルートとカロリーを表示します。サンプルはこちら 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>

2014-07-10

GoogleMapに雨雲を表示

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

2014-07-08

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

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

2014-07-08

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>

2014-07-08

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>

2014-05-07

Android Studioで最速開発

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

2014-03-10

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

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