ゆとり日記

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

第16回Androidデ部で発表してきた

表題の通り、第16回Androidデ部で15分くらい発表をしてきました。今回は!Androidなテーマでやるということで、最近興味が湧いている「フォーム」の話でもしようかと思ってスピーカー枠に申し込んでみました。

発表テーマは「フォームについて考えてみた」で喋りました。
資料はこちら。使いづらいフォームについての考察や改善案をつらつらと語っています。


資料に書いてあることをくどくどと書いても仕方ないので、ここでは質問タイムで上がっていた話題について書きます。

質問内容:「使いやすいと感じたフォームってありました?

ありました

あったのですが、僕が発表資料に画像を載せ損ねたせいでその場でお見せすることが出来なかったため、ここで紹介することにします。


一休

f:id:rukiadia0401:20141005001312p:plain

ホテルやレストランを予約出来るサービスを展開しているサイトなのですが、ここのレストラン予約フォームが良い感じだなーと思いました。実際の画面は以下になります。

f:id:rukiadia0401:20141005002049p:plain

使いやすいと感じた点

  • 画面に余計な要素(関係の無いページヘのリンク、バナー等)が無いので入力に集中できる。
  • お店に行く人数の内訳を入力すると、合計金額をリアルタイムで表示してくれる。幾らかかるか予約の段階で教えてもらえると安心できますよね。
  • このサービスに登録した氏名を「代表者お名前」に自動で入れておいてくれる。
  • 「次へ」ボタンが「戻る」ボタンよりも大きめになっていて、色も分けられている(押し間違えの防止)。

画面を無駄なく使ってて、よく考えられてるページだなと思える良いフォームだと思います。

ちなみにレストラン予約サービスを使うには会員登録が必要なんですが、その会員登録中もイラッとさせられることも無かったです。


以上。勉強会への参加レポと、発表の質問に対する回答でした。 ではまた。

IE7でoverflow:hiddenが効かなかった話

ここのところ、ずっとIE7と戦いつづけています。
その結果、色々な別に知りたくなかったノウハウがたまる今日この頃・・。

2014年の9月にもなってIE7ネタを書くのも気がひけたんですが、同じ症状で詰まっている人が2,3人はいるだろう・・と思ったので書いてみました。

今回取り上げるネタ

「overflow:hiddenを指定した親要素内にposition:relativeを指定した子要素を配置すると、IE7ではoverflow:hiddenが機能せずに子要素がはみ出る」というものです。

対処法

この現象は「 親要素にposition:relativeを指定する 」で解決できます。

サンプル

現象を再現可能な簡単なHTMLを書くと、以下のようになります。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>doesn't work overflow hidden</title>
    <link rel="stylesheet" href="overflow.css">
</head>
<body>
    <div id="container">
        <p class="normal"></p>
        <p class="hidden"></p>
    </div>
</body>
</html>
#container {
    width: 400px;
    height: 400px;
    background: #eeeeee;
    overflow: hidden;
}

p {
    height: 100px;
    position: relative;
}

.normal {
    width: 100px;
    background: #aaaaaa;
}

.hidden {
    width: 600px;
    background: #aaaaaa;
}

比較的新しいIE、モダンブラウザだと何の問題もないのですが、IE7で上記のHTMLを表示すると子要素の2つ目のpタグが盛大に飛び出してしまいます。興味がある人はmodern.IEあたりで確認してみるといいかもしれません。

余談

なんでこれで上手くいくのかを調べてみたんですが、結局よくわからず(さじ投げ)。
SMACSSの作者の方が7年前に書かれていた記事のコメントを一通りみたところ「バグじゃね??」みたいな流れになっていたので、この辺りで調べるのを諦めました。

教えてくれ五飛・・俺はいつまでIE7対応を続ければいいんだ・・。

お し ま い

checkboxの値でbuttonの状態を切り替える

フォーム内のチェックボックスにチェックを入れると、ボタンが押せるようになる

Webページのフォームではありがちな画面の動きですね。仕事をしていると、度々この動作を実装する機会があるのですが・・その度にやり方を忘れて時間を無駄にしているので、簡単にメモしておきます。

実装は以下の通りです。

checkbox.html

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <title>チェックボックスとボタンの連動</title>
   <link rel="stylesheet" href="">
</head>
<body>

    <label>
        <input id="check" type="checkbox" onclick="checkValue(this)">
        同意しますか?
    </label>

    <!-- 初期状態では押せないbutton -->
    <input id="btn" type="button" value="押せない" disabled="disabled">

    <script src="js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">

       /* buttonのdisable属性を書き換える */
       function checkValue(check){
           var btn = document.getElementById('btn');

           if (check.checked) {
               btn.value = '押せる';
               btn.removeAttribute('disabled');
           } else {
               btn.value = '押せない';
               btn.setAttribute('disabled', 'disabled');
           }
       }
   </script>
</body>
</html>

これでチェックボックスでボタンの状態を切り替える事が出来るようになりました。
動きを試したい方は、JSFIDDLEあたりでやってみてください。

thisって便利だなー(棒)

『Web製作者のためのGit入門』を読みました

『Web製作者のためのGit入門』の献本を頂いたので、土日で読んだ感想を書いてみます。

Web制作者のためのGit入門 (Mynavi Advanced Library)

Web制作者のためのGit入門 (Mynavi Advanced Library)

読んでみた感想ですが、「Gitを使ったことがない人」や「普段Gitをなんとなく使ってる」って人は読んで損はしない内容だと思いました。僕自身、よく分かってなかった部分も多くあったので読んで良かったです。

本の簡単な説明ですが、まず内容構成は前半が「Git入門編」、後半が「Git実践編」となっています。

入門編はGitの概要の説明から始まり、

等が説明されています。それらの説明に加え、Gitを使い始めたばかりの人がハマりがちな落とし穴の詳しい説明、それに対する対処等も記載されているので、初心者に優しい構成だと感じました。
Gitコワイ」って先入観を持っている人も、この辺りの説明を繰り返し読めば安心してGitと向き合うことが出来るかもしれません。

後半の実践編はGit中級者を対象にした内容で、

  • 適切なコミット履歴の作り方、良いコメントの書き方
  • コミット履歴の操作(checkout、reset、reflog、revert)
  • ブランチの操作、統合(rebase)
  • ローカルとリモートの連携

といった、より実践的な内容が説明されています。
後半部分で触れている内容は普通に難しくて、僕自身「知らなかった・・( ゚д゚)」と思いながら読んでました。reflogとrevertの違いとか説明できない・・って感じでしたし。

とても勉強になりましたm(__)m。

ただ1つ注意点として、この本はあくまでGit入門のための本みたいなので、GitHubの詳細な説明(pull requestの話とか)は無いです。会社でGitHubを使うための知識やノウハウを求めている方は別の本を買いましょう。

Gitの勉強をしたいという人にはオススメな本なので、気になる方は是非。

僕の感想はこんな感じです。

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で上記のコードの動作を確認したい場合はサーバー上で行うようにしてください。