2014年3月30日日曜日

Javascriptで動くページを作ろう第二回:とりあえずCSSだけでアニメーション

どうもJP3BGYです。
随分と間が開いてしまいました、すいません。
では早速やっていきましょう。

今回はまずJavascriptを使わないCSSだけのアニメーションの方法からやっていきたいと思います。
実はこれは最近になって出来るようになった機能です。
とりあえず以下のようなコードを書いてみてください

<!DOCTYPE html>
<html>
<head>
 <title>テストtransition</title>
 <style> <!--
  #sample1{
   display:block;
   position:relative;
   width:300px;
   height:32px;
   text-align:center;
   color:#ffffff;
   background-color:#fda352;
   transition:background-color 1s linear 0s;
  }
  #sample:hover{
   background-color:#ffffff;
  }-->
</style>
</head>
<body>
 <div id="sample1">カーソルを合わせてみてください</div>
</body>
<html>

まあよく見るHTMLコードですね。
しかし、HTML5はいいですね。
少し前のは煩わしい物がたくさんあってコードも見にくかったものです。
それはさておき、スタイル要素の中身を見てください。
ほとんど今までのCSSでもよくお世話になったものが並んでいるかと思います。
:hover擬似要素でマウスカーソルが上に来た時に色がなくなるということは見ればわかるかと思います。

しかし、実際に試してみるとあら不思議ゆっくり時間をかけて変わっていくではありませんか
これは一体どういうことでしょう、実はこれは#sample1のスタイルシートの最後の行をてください、transitionとあるでしょう。
これがこのアニメーションを作り出している正体です。
このスタイルの中身を詳しく見て行きましょう。

transitionのパラメータは4つの要素からなっています。
それらはすべて半角の空白で区切られていて、1番最初は値が変化した時に適応するスタイルの指定をしています。
今回の場合は背景の色がかわった時にアニメーションが適応されるようになっています。
実はこれ、要素指定できるものが限られていて基本数値で書かれているものだけみたいです。
なので top color opacityなど数値指定されるものはできますが displayとか文字列で指定しているものはだめみたいです。
なお、指定できるものすべてを指定する場合は「all」と書きます。

次のパラメーターは変化する時間を指定するものです。
単位はs(セカンド、秒ですね)でこれを付けないとブラウザによっては誤動作を起こすみたいです。
0.1秒単位で指定できるみたいです。

その次は変化の方法を指定するものです。
ずっと一邸の割合で変えていくのがlinearです。
他には ease ease-in ease-out ease-in-out cubic-bezier(数値, 数値, 数値, 数値)です。
最後以外は決まった動きをします、どんな動きは自分で確かめてみるといいですよ。
最後のものは3次ベジェ曲線というものでアニメーションの変化を指定するようです。
詳しいところは以下のリンクへ
http://www.htmq.com/css3/transition-timing-function.shtml

最後は実行を延滞させる時間です。
これに1sと入れるとアニメーションが1秒だけずれます。
これも0.1秒単位で指定できます。

また、このtransitionは複数指定できるみたいです。
複数指定する場合は
transition:width 2s ease 0s,opacity 2s linear 0s;
のようにコンマで区切って別の指定をしてください。

またこの要素を:hoverの中などに再度別のパラメーターを指定したり、延滞時間をずらしてあたかも連続したアニメーションのように振る舞うことも可能です。
ただ、CSSだけでは決まった指定しかできないのでここにJavascriptを入れると更に面白い動きができます。
次回はこれをやっていきましょう、とりあえず今回はここまで。
ほな、さいなら。

2014年3月18日火曜日

Javascriptで動くページを作ろう第一回:アニメーションとJavascriptについて

どうも、JP3BGYです。
今回からはなんと同好会の公式サイトを作るのでそれに関連してWeb開発の初歩的なところを書いていきたいと思います。
実は我々が作ったチームYYTはraorを除いてみんなWeb制作は得意としてないんです。
なので今回のページ制作を期に読者とともにスキルアップしようという寸法です。
それでは早速やってみましょう。

なお、今回からやるものはHTML・CSSをある程度理解している前提で話をしていきますのでわかりにくいところがあったら自分で調べてみてください。

まずアニメーションについてですがWeb開発においてアニメーションと普段皆さんが思うアニメーションは少し違うところがあります。
アニメーションと言ってほとんどの人が想像するのはTVでやっているOne PieceとかNARUTOとかそっちの方を思い浮かべるでしょう。
しかし、Web開発においてはオブジェクト(文字とか写真の総称です)に見た目の変化を与えることを指します。
例えば、大きさを変えたり座標を変えたり。
最近では少しずつ値を変えていくことによってあたかも動いているように見せるのが主流みたいです。

さて、それを文字で表すにはどうすればいいでしょうか、方法は以下の3通りあります。
1,CSS3の新しい要素を使う
2,JavascriptでCSSの値を操作する
3,1番と2番を組み合わせる
実はCSSでやる方法は最近になって出てきた方法です。
Javascriptで書くことの利点として自由に何でもできるというものがあるのですがプログラムが結構ややこしくてしかもあまりこったものがやりにくいなどかなり面倒でした。
ところが、最近開発されているCSS3ではある程度CSSだけでこったアニメーションができるようになっています。
ちょっと前まではそんなことなかったんですがね。
まあ細かいことは今後説明しながら書きます。
でもCSSだけだと自由がきかないところがあるのでやっぱりCSS3の新機能とJavascriptを両方使うことが一番ベストだと思います。

では今回は最後にJavascriptについて軽く書いて終わりにしたいと思います。
Javascriptはクライアント側(サーバー側ではなく自分たちのパソコン上で動くということです)で動くスクリプト言語というものです。
サーバー側で動くPHPやPerlは自分のパソコンでは動かないため一度HTMLデータを生成したらあとは改変することはありません。
なのでアクセスする人によって違うページを生成することはできますがアニメーションを作ることはできません。
それと比べてクライアントで動くJavascriptは今その人が見ているHTMLデータを直接変更できるのでそのようなアニメーションやあとは数式の計算結果の算出等に向いてます。
スクリプト言語の説明は以下のページを見るといいでしょう。
http://e-words.jp/w/E382B9E382AFE383AAE38397E38388E8A880E8AA9E.html
で、まあこの言語はC言語みたいに関数と変数とちょっとした命令があってそれでHTMLトCSSを操作する言語なのですが、Cと大きく違うのがCのmain関数に当たる関数がない(ただし最初に読み込まれる場所は存在する)こと、関数を作るときは関数用の宣言がいること、変数の型がないことです。
main関数がない代わりに関数の外に書かれた文章はファイルが読み込まれた時に勝手に実行されることとイベントが細かくあってそのイベントが発生するごとに自分で決めた関数を動かすことによってHTMLとCSSの制御をします。

何言っているかわからない人は今後少しずつ実例を上げていくのでゆっくりやっていきましょう。
今回はここまで、ほな、さいなら

2014年3月17日月曜日

HDMIとeMMCに使われているピンをgpioとして使おう

どうも、JP3BGYです。
今回は前回の続きとしてピンの設定の変更のやり方について話したいと思います。
前回の記事を見ていない人は見てください↓↓
http://koyomachineclub.blogspot.jp/2014/03/beaglebone-black.html

というわけで、ピンの設定の変更についてですがその前に以下のコマンドをBeagleBone Blackでやってみてください。

# cat /sys/devices/bone_capemgr.*/slots

*のところはシステムによって違うようなので自分で調べてください。
僕は9でした。
見えたものは何だと思いますか?
 0: 54:PF--- 
 1: 55:PF--- 
 2: 56:PF--- 
 3: 57:PF--- 
 4: ff:P-O-L Bone-LT-eMMC-2G,00A0,Texas Instrument,BB-BONE-EMMC-2G
 5: ff:P-O-L Bone-Black-HDMI,00A0,Texas Instrument,BB-BONELT-HDMI

これは、実はデバイスツリーというgpioなどのピンを最初に初期化させるものです。
これが読み込まれることでHDMIとeMMCは扱えるようになります。
ということで初期設定でこれを読み込ませないようにすればいいのですが・・・。
システムの奥の設定をいじることになるので失敗すると大変な事になります。
前もそんなことありましたけどやっぱり責任は回避したいんで今回のことを真似する場合は自己責任でおねがいします。
まあそんな危険な橋をわたんないと栄光も知識も手にはいらないので先進めます。

実は作業は至って簡単、以下の通りにやるだけです。
なお今回はSDでブートさせているUbuntuで動作確認しました

mkdir /mnt/boot
mount /dev/mmcblk0p1 /mnt/boot
vim /mnt/boot/uEnv.txt

 ここまでやるとテキストファイルの中身が出ますが、数行下にこんなものが
##BeagleBone Black:
##Disable HDMI/eMMC
#optargs=capemgr.disable_partno=BB-BONELT-HDMI,BB-BONELT-HDMIN,BB-BONE-EMMC-2G

とっても親切設計、optargsの左の#を消すだけというもの
これで保存してreboot
もう一度起動してうまく行っているか確認
# cat /sys/devices/bone_capemgr.*/slots
 0: 54:PF--- 
 1: 55:PF--- 
 2: 56:PF--- 
 3: 57:PF--- 
 4: ff:P-O-- Bone-LT-eMMC-2G,00A0,Texas Instrument,BB-BONE-EMMC-2G
 5: ff:P-O-- Bone-Black-HDMI,00A0,Texas Instrument,BB-BONELT-HDMI
 6: ff:P-O-- Bone-Black-HDMIN,00A0,Texas Instrument,BB-BONELT-HDMIN
最初あったLがなくなっていれば成功です。
一応ピンの設定も見ておきましょう
ピンの設定の見方は
# cat /sys/kernel/debug/pinctrl/44e10800.pinmux/pins
で現れる一覧を見ればいいです、見方は例えば
pin 4 (44e10810) 00000027 pinctrl-single 
とあるこれは実はP8_23の設定なのだが pin xとある隣のカッコになっている数字、これの下三桁は
(下のコマンドはみんなの手持ちのパソコンでしてね)
git clone git://github.com/derekmolloy/boneDeviceTree.git
上のコマンドでホームディレクトリにダウンロードされるファイル一式のうちDocフォルダにあるpdfファイルの一覧のADDRと対応している。
つまりこの段取りとは逆に探したいgpioのADDRをpdfファイルから見つけてそれに対応する設定を見ることでそのピンの設定を見ることができる。
設定自体は()で囲まれた数字の次にある数字を見ればわかる。
これの場合は27だがこれは16進数なので実際は0x27、そしてこれを2進数にして0b0100111。
この2進数の左から3桁はピンのモードを表しこのモードはさっきのpdfファイルのModeXというものと対応している。
今回の場合はP8_23の0b111=7なのでMode7のgpioということがわかる。
残りは4桁目がプルアップ・プルダウンの無効有効、5桁目が0だとプルダウン 1だとプルアップ、6桁目がRXの無効有効、7桁目が立ち上がりの速さを表していて0でfast 1でslowとなる。
基本設定の見方はこれだけである。
で、実はこのピンはemmcに使われていたピンなのだがgpioの設定になっているので成功です。
またもしこれのとおりになっていないピンがあっても今度やるデバイスツリーオーバーレイの作成によって変えることができます。

わかりにくいところあったらコメントで質問ください、まだまだ素人ですが答えられる範囲で出来る限り答えます。
そんな訳で今回はここまで、次回から少しBBBから離れます。
数回で戻ってくるとは思いますがね。
それでは、また次回。

2014年3月1日土曜日

BeagleBone Blackピンアサインについて





どーも、JP3BGYです。
ちょっと今回はBeagleBone Blackのピンアサインについて話があります。
まず下図のピンアサインを見てください。
まあ手持ちにあるものを見ながら下の話を聞いてくれるとうれしいです。
見ての通りBeagleBone BlackにはたくさんのGPIOがある・・・ように見えます。
最近この大量のGPIOを使いたいなと思ったので色々調べていたのですが、どうもこのうちにあらかじめシステムに使われているものがあるみたいです。
それはHDMIと内部フラッシュです。
実は下のように結構たくさんのピンが使われています(多分LCDとあるものがHDMIでMMCが内部フラッシュです)。

なぜこのようになっているかというとBeagleBone BlackはもともとBeagleBoneというものの上位互換として作られています。
そしてBeagleBoneにはHDMIと内部フラッシュというものは存在しません。
ない代わりにCapeというGPIOにつける外付けデバイスとしてフラッシュとHDMIがありました。
まあここまでの話でわかった人も多いでしょうがBeagleBone BlackはBeagleBoneに
HDMI CapeとeMMC Capeを基板に内蔵させたものなんですね。
なぜそうしたかというと内部フラッシュにあらかじめOSと設定を入れておき、あとは電源をつけてHDMIをディスプレイにつなげるだけでプログラミングができる状態にさせるためです。
買った時に中に紙が入っていたでしょう、Fast Startとか何とか。
要はそれをさせるために新しくBeagleBone Blackを作ったわけです。

しかし一部の人にとって入らないものでもあります(例えば僕とか僕など)。
そんな人はそんなことも知らずに買うときに一緒にMicroDSも買って既存のPCにつなげて既存のPCでSSHログインしてvimとかでプログラミングをしますから(涙。
はっきり言って無駄に専有されては邪魔です。
ただこれ、ちょっと難しいことしないと変えることができないんですね。
そこで今回ではなく次回、そのことについて書きたいと思います。

てな訳で今回はここまで、ほな、さいなら。