ゆとり日記

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

夏なので、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

といった感じで出来る。

HTML5ビギナーズ

初めに

10/23(金)に『HTML5ビギナーズ』というイベントに参加してきました。 このイベントは「これからHTML5を始める・始めたばかりの方々のための勉強会」というテーマを掲げた開催されているイベントで、 今回で三回目の開催になるそうです。ちなみにイベントの開催自体はTwitter経由で知りました。
僕自身はWeb屋さんの仕事はしてないのですが、Web系のお仕事も出来るようにしていきたいと考え、初心に帰って本格的に勉強しようと思った次第です。

会場は株式会社サイバーエージェントさん。渋谷マークシティの17階のセミナールームにて開催されました。 （会場の前に案内版とかが無かったので、入り口で中の様子を伺いながら立ち往生してたのはここだけの話・・(´；ω；｀)） なんとか無事に会場入りをし、端っこの席でMBAを展開して準備完了。

当日のセッション

本イベントのセッションは以下の3つ

吉川さん、ひろみつさんのセッションはCSSメインのお話。
泉水さんのセッションはHTML、CSS、JavaScriptを書く上で重要となるソースコードのブラッシュアップについてのお話でした。

各セッションを聞いての感想

「いまさら聞けないCSSレイアウト入門」

CSSの基本であるボックスモデル（margin、padding、border）の概要、float、positionのお話でした。
自分の中で基礎の部分は固めてるつもりでいたのですが、「垂直マージンの相殺」を普通>に知らなくて詰めの甘さを実感。固められてないじゃん／(^o^)＼。

基礎に不安がある方は一度目を通されることをオススメいたします。
知識の再確認も出来て、精神的安定にも繋がりますので是非！

「新しいCSSレイアウトの仕様をいろいろ調べてみた（CSS Flexible box、Regions、Shapes、etc…）」

CSS3で追加された新しい仕様をデモを交えつつ説明してくださいました。 今回のイベントのは全てのセッションでデモがあったので、個人的には大変有り難かったです。

floatで要素を配置する時に必要になる面倒な手間を省いてくれる『Flexbox』も勿論興味深い内容だったのですが、 中でも個人的に一番関心を惹かれたのが『Shapes』でした。 シェイプの外側にテキストを流し込めると聞き、思わず声が出そうになる程の衝撃・・！
四角形で構成された世界から脱却することも夢ではありません。
すご〜くワクワクしますね(∩´∀｀)∩。

このセッションで紹介された新仕様は「これまでのレイアウトをより簡単に実現」「複雑のレイアウトをCSSで実装出来る」というロマンに満ちたモノです。
しかし、これらの仕様は現在仕様策定中。 仕様がコロコロ変わる可能性もありますし、ブラウザで動かす上ではまだベンダープレフィックスが必須です。
実用段階にはもう少し時間が必要でしょう・・とのことですので、辛抱強く待ちましょう！

「Brush up your Coding」

本セッションはCSSで見た目をグリグリ動かすことから離れ、コードの質向上やパフォーマンスのお話がメインでした。

  • メンテナンス性の維持
  • パフォーマンスの向上

これらの目的として、コードのブラッシュアップは必要不可欠。
また、フロントエンド側の役割は大きくなりつつあるとのこと。

  • 可読性の維持
  • バクの回避
  • パフォーマンスの維持

やる事が山積みです（汗）。役割を果たすためにはコードの質を高める事が必須であり、そのためには何をすればいいのか？ ⇒『lint』を使おう！

lintツール各種

  • HTMLInspector
  • CSSLINT
  • JSHINT

上からHTML、CSS、JavaScriptに対応したLintです。
実行の度に不具合や、不具合を発生される可能性のある曖昧な記述部分をチェックして警告してくれます。

セッション内では『grunt』を用いたLintの自動化にも触れてくださいました。 普段からJSの自動テストをやっている身としてはとっつきやすい内容だったのですが、 『npm』をよく知らない人にとっては、結構敷居の高い内容だった気がしてます・・。

※gruntについてはこちらのスライドを参考にするとわかりやすいと思います。

振り返り

ボリュームたっぷりのセッションでしたが、あっという間に2時間過ぎた気がします。
イベント後の懇親会ではビールをたくさん飲んで、たくさん他の参加者の方と話せたので大満足でした！

次回があれば、是非また参加させて頂きたいです。