ゆとり日記

心にゆとりを持って生きたいプログラマーの雑記です。気が向いたら書きます。

jQueryでdocument.getElementByIdしたいです

どうも、jQuery初心者です。

今更仰々しく書くような事でもないんですが、知らなかったことなので一応・・。

jQueryでdocument.getElementByIdするにはどうするか?

JavaScriptであれば、下記のように書けば指定したIDのエレメントが取得出来ます。

var element = document.getElementById('hoge');

jQueryで同じようにエレメントを取得しようとして書いたのが下記のコード。

$('#hoge');

しかし、想定した動きをしてくれません。それは何故か?
上記のjQueryのコードは生のエレメントではなく、jQueryのオブジェクトを取得してしまっているためです。
jQueryでエレメントを取得するためには、以下のように記述する必要があります。

// 書き方は二通り
$('#hoge').get(0);

$("#hoge")[0];

これまでの事を踏まえて、簡単なサンプルコードを書いてみます。

画面表示後に2秒待ってから、動画を再生する処理

index.html

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <title>動画再生画面</title>
</head>
<body>

    <video id="demo" controls width="800" height="480">
        <source src="sample.mp4">
        <source src="sample.ogv">
        <source src="sample.webm">
        <p>ご利用のブラウザでは再生することが出来ません</p>
    </video>

    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/index.js"></script>
</body>
</html>

index.js

$(document).ready(function(){

    // 2秒後に動画再生開始
    setTimeout(function(){
        // JavaScriptの場合
        //document.getElementById('demo').play();

        // jQueryの場合
        $('#demo').get(0).play();
    }, 2000);

});

説明は面倒なので省きますが・・、動画再生を行う部分でjQueryによるエレメント取得を行なっています。

※videoタグにはautoplayという自動再生のオプションがついているのですが、
今回は画面表示後に少し待ってから動画再生を行いたかったため、 こんな処理を書いてます。

おしまい

夏なので、WebGL始めました

突然ですが、今週からWebGLの勉強を始めてみました。

WebGLというのは「ブラウザ上で3DCGを表現できるグラフィックス技術」のことで、イメージとしては
OpenGLをWeb上で使う」という表現が近いのかなと勝手に思っています。

今までWebGLはあまり興味が無かったのですが、先日の天下一altJS勉強会で
同じDart枠で発表されていた方のデモを拝見してからモチベーション急上昇中です。

実際に動いてるモノを見ると心に響く物もある。ということで早速やってみました。

今回は、three.jsという「WebGLを複雑な手順なしで直感的に操作することができるライブラリ」を使って 立方体のアニメーションを作ってみます。

まずはthree.jsのHP

three.js - JavaScript 3D library

からライブラリ本体をダウンロード。ダウンロードしたものを解凍したら、
buildフォルダの中から「three.js」「three.min.js」を持ってきて任意の場所にコピーします。

必要なモノを用意できたら、コードを書いていきましょう。
今回自分が本家HPを見ながら書いたコードは以下の通りです。

main.html

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <title>Hello three.js</title>
</head>
<body>
    
    <script src="js/three.min.js"></script>
    <script type="text/javascript">
   var main = function() {

       // シーン作成
       var scene = new THREE.Scene();

       // カメラ作成
       var width = window.innerWidth;
       var height = window.innerHeight;
       var fov = 60;
       var aspect = width / height;
       var near = 1;
       var far = 1000;
       var camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
       // カメラの位置調整
       camera.position.set(0, 0, 50);

       // レンダラーの配置
       var renderer = new THREE.WebGLRenderer();
       renderer.setSize(width, height);
       document.body.appendChild( renderer.domElement );

       // 光源追加
       var directionalLight = new THREE.DirectionalLight( 0xffffff );
       directionalLight.position.set(0, 0.7, 0.7);
       scene.add( directionalLight );

       // 表示する物体を追加する
       var geometry = new THREE.BoxGeometry(20, 20, 20);
       // 赤、緑、青で三色で構成された素材を使用
       var material = new THREE.MeshNormalMaterial();
       var mesh = new THREE.Mesh( geometry, material );
       scene.add( mesh );

       // 少しづつ動かすアニメーション
       function rendering() {
           mesh.rotation.x += 0.01;
           mesh.rotation.y += 0.01;
           renderer.render( scene, camera );
           requestAnimationFrame(rendering);
       }
       rendering();

   };

   window.addEventListener('DOMContentLoaded', main, false);
   </script>

</body>
</html>
  • 物体を表示する場所
  • 物体を写すカメラ、カメラを置く位置
  • 物体を照らす光源
  • 物体のアニメーション処理

等をJSで1つ1つ定義していきます。この40行くらいのJSを書くと、
アニメーションで動く立方体をブラウザ上で表現することが出来ます。
結果が気になる方は是非お試しください。

自分でも理解し切れていない部分が多々あるので、それはこれからの学習で補っていきたいと思います。

目先の目標はプラネタリウムっぽいものを自作すること・・

7月前半くらいには何とか作りあげたいですね。

おしまい

JavaScript(jQuery)でHTMLをincludeする

最近流行りのWebデザインテンプレートを見ると大体ついてる「navbar」や「footer」。

テンプレートをDLして、「さあ使うか!」ってなってソースを見てみると
各HTMLにほぼ同じ内容の処理がズラっと書いてあります。

書いてある内容は殆ど変わらないけど、一箇所でも細かい修正があると、
全部のファイルを手動で直さないといけません。

面倒くさい&馬鹿らしい&ケアレスミスが発生する原因になる

ということで「HTMLをincludeして使う方法」を調べた際のメモを記録しておきます。

コードは以下の通りです。

include.html

<p>includeされて使いまわされる部分です/p>

index.html

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <title>includeする側</title>
   <link rel="stylesheet" href="">
</head>
<body>
    <p>下にinclude.htmlからloadされた部分が出る</p>
    <div id="target"></div>
        
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
           $('#target').load('include.html');
        });
    </script>
</body>
</html>

include.htmlに書かれた内容がincludeされた内容。
index.htmlから参照を行い、divタグ内にloadします。

本番ではincludeされた内容がnavbarだったり、footerだったりするわけですが、
コードが長くなって見づらくなるのでここでは簡単に書いています。

以上。今日は進捗が全然だったので明日頑張らないと・・。

追記その1:  

以前似たような事をPHPでやったのですが、今回はJSで実装してみたかったので調べました。
もっと良いやり方があれば、是非ご教授くださいまし(ペコリ。

追記その2:

JSをbodyの手前で読み込む必要が無かったので直した & 言い回しがおかしかった部分を直しました。

追記その3:

Google Chromeではローカルファイルへのアクセスが出来ないようになっているので、
Chromeで上記のコードの動作を確認したい場合はサーバー上で行うようにしてください。

天下一altJS武闘会に参加してきました

天下一altJS武闘会(http://connpass.com/event/6402/)というイベントで発表してきました。

最初は見るだけ枠で行こうかなと思ってたんですが、
主催者のvvakameさんの後押しも頂けたので発表枠で参加してみることにしました。

発表言語はDart(https://www.dartlang.org/)を選択。
発表資料はこちら(https://speakerdeck.com/rukiadia/dartnichi-tuteiruxi-wang)です。

まず、参加してよかったと思った点。

  • 事前に一生懸命勉強しなればならなくて必死になる(自分を追い詰められて良い)。
  • 人前で話す経験が積めた。
  • Dartの本の著者の方とお話出来た。

今までは勉強会で発表する側に立ったことが殆ど無かったので、本当に新鮮でした。
Dart本の著者の方や、もう一人のDart枠発表者の方とお話出来たことで
「もっとDartの事を勉強して、盛り上げていきたい!」と心から思えました。

次に反省点。

  • 発表ネタを考えることにばかり気をとられ、「喋る」練習が全然出来ていなかった。
  • 前日の夜から緊張していて、当日の午前4時くらいまで寝れなかった。

発表直前まで喋る内容を吟味していたのですが、リハーサルの練習不足もあり
途中で時間切れになってしまいました(´・ω・`)。
資料は短めに作っていたので、80%くらいは喋れたのは不幸中の幸い。

次からは「実際に口に出す」練習をしておくようにします。

最後に感想。

  • 天下一武闘会じゃなくて、どう見てもセルゲームでした。本当に(ry
  • Haskell全然わからない。つらい。

LTタイムの随所で関数言語の話題で会場が盛り上がっていたのが印象的でした。
まあ、2年前にHaskell挫折した僕には全然分からなかったんですけどね/(^o^)\。

勉強します・・(ヽ´ω`)。

疲労困憊で懇親会に出る体力が残っていなかったのが心残りでしたが、
参加して本当に良かったと思っています。

そんな感じです。おわり。

JavaScriptでメーラーを起動してメール送信したい時

「自動でメールを送るよりも、ボタンを押したらメーラーが立ち上がるようにして欲しい」

ある日のクライアントの鶴の一声・・。

これまではCakePHPのCakeEmailを使ってメールを自動送信するようにしていたんですが、そうもいかなくなりました。

ということで、今回JavaScriptで作った処理をメモしておきます。(地味に苦戦したのは内緒です)

書いた処理としては以下の通り。

# index.html
<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <title>メール送信テスト画面</title>
   <link rel="stylesheet" href="">
   <script src="javascript/index.js" type="text/javascript" charset="utf-8" ></script>
</head>
<body>
    <input type='hidden' id='hidden_data' value='送信したい情報をここに記載'>
    <button id='mail'>メール送信</button>
</body>
</html>
# index.js
/**
 * メーラーを起動してメールを送信する
 */

window.onload = function() {

    /**
   * メールに記載する情報を格納する変数
   */
    var address, subject, body, hiddenData;
    var sendmail = document.getElementById('mail');

    sendmail.onclick = function() {

        // メールに記載したい情報をhiddenタグから取得
        hiddenData = document.getElementById('hidden_data').value;
        address = '~@co.jp';
        subject = '件名';
        body = '本文' + hiddenData;

        location.href = 'mailto:' + address + '?subject=' + subject + '&body=' + body;
    };

};

画面上の「メール送信」ボタンを押下すると、メーラーが立ち上がる動きをします。 JS内でhiddenタグのvalueを拾って、メールの本文に載るようにしています。

ちなみに 「宛先にCCを追加」「メール内で改行を行う」という2つの処理を追加した場合は以下のようになります。

# index.js
/**
 * メーラーを起動してメールを送信する
 */

window.onload = function() {

    /**
   * メールに記載する情報を格納する変数
   */
    var address, ccAddress, subject, body, hiddenData;
    var sendmail = document.getElementById('mail');

    sendmail.onclick = function() {

        // メールに記載したい情報をhiddenタグから取得
        hiddenData = document.getElementById('hidden_data').value;
        address = '~@co.jp';
        ccAddress = 'sub@co.jp';
        subject = '件名';
        body = '本文' + '%0D%0A' + hiddenData; // 「'%0D%0A'」を入れて改行

        // 「'?cc='」部分でCC追加
        location.href = 'mailto:' + address + '?cc=' + ccAddress + '&subject=' + subject + '&body=' + body;
    };

};

こんな感じでメーラー起動処理を実装できました。

同じ事で悩んでいる人の参考になれば幸いです。

UNIXコマンド、ディレクトリごとzip圧縮したい時

大したことじゃないんだけど、毎回忘れて調べ直してる気がするのでメモる。

1.圧縮したいディレクトリ(今回は圧縮対象ディレクトリを『test』とします)に移動する。

2.下記のコマンドを実行。

zip -r test.zip ./test/

3.test.zipファイルが生成される。

※逆に展開したい場合はこう。

unzip test.zip

といった感じで出来る。