ちょっとWindowsのphpでmongodbを扱う際に手間取ったのでメモ
ちょっとWindowsのphpでmongodbを扱う際に手間取ったのでメモ
ソフト | Ver. |
---|---|
Windows8 | 64bit |
Xampp | - |
PHP | 5.6 |
での環境
まずは、ネットで調べた通りmongodbのドライバをこちらよりダウンロードして解凍したものを 「C:\xampp\php\ext\」に放り込む。
次に「C:\xampp\php\php.ini」ファイルにmongoを有効にする文字「extension=php_mongo-1.6.4-5.6-vc11.dll」をDynamic Extensionsあたりに記述する。
xamppコントロールパネルよりApacheの起動
ここで「libsasl.dllが無い」とエラーがでる。
調べて見ると、「C:\xampp\php」にある「libsasl.dll」を「C:\xampp\apache\bin」にコピーすればいいとのこと。
ローディング画面で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"> <path fill-opacity="0" stroke-width="0.5" stroke="#f4f4f4" d="M81.495,13.923c-11.368-5.261-26.234-0.311-31.489,11.032C44.74,13.612,29.879,8.657,18.511,13.923 C6.402,19.539,0.613,33.883,10.175,50.804c6.792,12.04,18.826,21.111,39.831,37.379c20.993-16.268,33.033-25.344,39.819-37.379 C99.387,33.883,93.598,19.539,81.495,13.923z"/> <path id="heart-path" fill-opacity="0" stroke-width="0.6" stroke="#555" d="M81.495,13.923c-11.368-5.261-26.234-0.311-31.489,11.032C44.74,13.612,29.879,8.657,18.511,13.923 C6.402,19.539,0.613,33.883,10.175,50.804c6.792,12.04,18.826,21.111,39.831,37.379c20.993-16.268,33.033-25.344,39.819-37.379 C99.387,33.883,93.598,19.539,81.495,13.923z"/> </svg> <script> //パスの読み込み var svgPath = document.getElementById("heart-path"); var path = new ProgressBar.Path(svgPath, { duration: 300 }); //パスアニメーション var cnt = 0; var doPath = function(){ if( cnt >= 1 ){ return false; } path.animate( cnt , { duration: 600 }, function () { console.log('Animation has finished'); }); cnt += 0.1; setTimeout( doPath , Math.random() * 1000 ); }; doPath(); </script> </body> </html>
イラスト系でもできるのかなあって思ったら、pathを指定された箇所のみってことみたいです。
jQueryライクに3D空間を作れるライブラリtQuery
jQueryライクに3D空間を作れるライブラリtQuery
tQuery API - extensions for three.jsで簡単に3D空間を作ってみました。
<!doctype html> <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"></script> <body> <script> var world = tQuery.createWorld().boilerplate().start(); tQuery.createCheckerboard({ segmentsW : 100, // number of segment in width segmentsH : 100 // number of segment in Height }).addTo(world).scaleBy(100); shape = tQuery.createHeartShape(); shape.extrude().toMesh().id('obj').addTo(world); tQuery('#obj') .geometry().computeAll().normalize().center().rotateZ(Math.PI).back(); tQuery.world.hook(function(delta){ tQuery('#obj').rotateY(90 * delta * Math.PI / 180); }); </script> </body>
ライト関係もあるらしい・・・
Canvasにランダムな点
Canvasにランダムな点を描く方法
canvasをjQueryライクに扱えるjCanvas | jQuery meets the HTML5 canvasを使ってcanvasにランダムな色の点を書いてみました。
var canvas = $("canvas"); var width = canvas.width(); var height = canvas.height(); for( var i = 0 ; i < 100 ; i ++ ){ canvas.drawArc({ draggable: true, fillStyle: "#" + Math.floor(Math.random() * 0xFFFFFF).toString(16), x: width*Math.random(), y: height*Math.random(), radius: 10 }); }
分かりやすくて便利っすねえ
CSS3とjQueryでアコーディオン
CSS3アニメーションを使って、アコーディオンを実現します。
jQueryのslideDownよりも幾分、なめらかに動作するかと思います。
サンプルはこちら
http://moeten.info/js/20140908_cssSlide/
メインのソースはこちら
css
dd{ overflow-y: hidden; opacity: 0; max-height: 0; transition-property: all; transition-duration: 1s; transition-timing-function: cubic-bezier(0, 1, 0.5, 1); } dd.open{ opacity: 1; max-height: 200px; }
javascript
$(function() { $("dl dt").click(function(){ $("dd").removeClass("open"); $("+dd",this).addClass("open"); }); });
html
<dl> <dt>タイトル</dt> <dd>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</dd> <dt>タイトル</dt> <dd>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</dd> <dt>タイトル</dt> <dd>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</dd> <dt>タイトル</dt> <dd>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</dd> </dl>