2014-07-01から1ヶ月間の記事一覧
Apacheからnodejsで起動したサーバーポート3000にマッピングさせます。 Apacheの設定ファイルの編集 設定ファイルを編集します。 emacs /etc/httpd/conf/httpd.conf 下記項目を追記します。 NameVirtualHost *:80 <VirtualHost *:80> ServerName example.com #←利用ドメインの</virtualhost>…
WindowsのPhpStormでLessを使用する方法です。 nodejsのインストール まずは、nodejsをダウンロードしてインストールを行います。 node.js ※インストールすると使えるnodeやnpmコマンドは結構使用しますので、環境変数pathに追加しておくと、コマンドプロン…
SVGをレスポンシブ化させます。サンプルはこちら http://moeten.info/js/20140722_svgResponsive/ 適当にウィンドウ幅を変えてみてください。 作り方 SVGのレスポンシブ化は簡単で、SVG画像を作成する際、イラストレーターでレイヤーの名前にIDを指定します…
Raspberry Piと温度湿度センサーを使って数値をグラフ化します。サンプルはこちら http://moeten.info/js/20140720_tempHumGraph/graph.html 必要なアイテム Raspberry Pi Type B 512MBと温度湿度センサー 温度湿度センサーのインストール 温度湿度センサー…
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…
画像から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>
指定された緯度経度とキーワードを元に、グーグルプレイスで検索し、近い順に表示します。サンプルはこちら 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>
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>
バーコードから商品を検索します。サンプルはこちら 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>
ちょいと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>
javascriptでの顔認識を行います。速度も結構早い感じで、スマートフォンのchromeでも結構認識してくれます。サンプルはこちら http://moeten.info/js/20140714_faceDetectTest/認識精度はいまいちですので、適当に顔写真をアップしてみてください。AKBの集…
カメラ画像に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>
javascriptでのARをしてみたのでちょっとメモ。サンプルはこちら http://moeten.info/js/20140713_arTest/上記ページをスマートフォンのChromeなどで表示して、下のマーカーを写すと認識されます。 ソースコードはこちら index.html（ほとんどjs-aruco - Jav…
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>
スマフォのブラウザで音声再生します。 今回は 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検索を行います。サンプルはこちら 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に雨雲を表示します。サンプルはこちら http://moeten.info/js/20140710_cloudMap/rainmap.htmlポイントとなるのは、GoogleMapにズームや移動に対応したオーバーレイを表示する場合は、ｘｙ何番目のタイルかと、ズーム値に対応した画像（縦横２５６…
PHPでArduinoなどのシリアルポートを読みとります。PHPでArduinoなどのシリアルポートを読むには、SerialPortライブラリを使用すると簡単にできます。 準備 まずは、SerialPortライブラリのダウンロードします。 oasynnoum/phpmake_serialport · GitHubこち…
スマートフォンの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のソケットサーバー、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>
