9/23は文化祭の日！！

来週のの火曜日9/23は甲陽学院高等学校の文化祭「音楽と展覧の会」の日です。
もちろんのことながら我々機械同好会も展示を出しています。
場所は北校舎入った靴箱のすぐ上の1階の3-Dの階段側です。
また、この同好会の長であるモアイくんは同じく3-Dの反対側で写真部の展示も行っているのでぜひ両方共来てください。
アクセスは以下のページ下またはGoogleMapを御覧ください。
http://www.koyo.ac.jp/main_menu2.html



さて今回展示をするのですが・・・皆様に一度謝らなければならないことがあります。

それは、ホームページでの作品公開が後日になってしまうということです。
我々はこの同好会だけではなく普段の部活や係の仕事を個々でしているので作品で手一杯になってしまってページを作ることを怠っていました。
なので後日、詳しい紹介解説動画付きでページを公開しますので楽しみに待ってくれると嬉しいです。
なお以下のページがホームページです。
kymc.info

皆様と文化祭当日会えることを楽しみにしています。

ヘッポコ変ジニア奮闘記:維持費0のWebサーバーを構築しよう サーバ組み立て後編

というわけで早速後編
前編見てない人はそっち先に見てください。

とりあえず電源固定から
電源固定なのですが形がATXではなく不思議な形で普通に固定することができなかったので・・・

こんなかんじにATXサイズのケース使ってMicroATXを貼っつけたので余った穴があったのでそこに無理やり固定しました

なお2つ固定箇所があったのですが片方しかついてません。
ですがその割に安定するのでこのまま先に進んじゃいたいと思います。







ピンヘッダの配線

見ての通りです。

ケースの電源・リセットボタンとMBのヘッダとの連結です。
ピンヘッダについてはMBの説明書にどこにどれをつければいいか書いてあります。
これはMBによって配置が違うらしいので
配線するときは十分に気をつけてください。

MBに電源ピンの配線

裏面にケーブルを出して

とりあえず配線

こんなかんじに配線をちゃっちゃと終わらせてしまいます。

配線はケースによって違うのでしっかり説明書を読みましょう(さっきから説明書ばっかりだ)

今回はファンコン用の電源とファンの電源だけでした。

ファンの電源はMB上のピンかケースのファンコンのピンに、ファンコン電源は60W電源のものに配線しました。

ついでに今回の電源はACアダプタを使うので水冷用の窓からピンの顔を出すことにしました。
お次はHDDです

うーん、素晴らしい。
やはりHDDはうつくしいですね
SSDハウスさと早さが魅力ですがHDDもまだまだ負けてませんね

とりあえずケースに付属していた固定器具をつけます。
最近はネジ止めしアクテもいいような設計になっているから楽でいいですね。
これをケースの中に差し込みます

画像右下のように差し込みます。
すると反対側にHDDの端子が行くと思うので裏面にてHDDに電源とSATAケーブルをつなげます

 

向かって右がSATA端子、MB上にコネクタがあるのでそことHDDとをつなげます
左がSATA電源端子、形は似ていますがこっちのほうが横に長いです。
電源についていますのでそことHDDとをつなげます。
でもって後は側板で蓋をして機械は完成です。

・・・全体写真ありません、すいません。

とりあえず画面出力させてみましょう。
一番緊張する時です、配線を失敗してなかったらいいのですが・・・

つきましたー、いやーよかった。

この後は・・・

BIOSの設定です。
UEFIじゃないのがちょっときつい・・・
まあ仕方ないか
細かい設定は知りたい人だけコメントください
これでハードは終了











続きましてはソフトウェアを入れるのですが。

・・・残念なことにCentOS入りませんでした。
どうも下のようなバグが有るみたいです。
http://bugs.centos.org/print_bug_page.php?bug_id=7390
とりあえずCentOSは諦めたほうが良さそうですね・・・
古いやつは確かKernelが2.7でちょっと古すぎますからねえ
Fedoraは安定しませんしここは使い慣れたUbuntu Serverを入れましょうか
というわけでここからISOをダウンロードしてDVDに焼きましょう。
Ubuntu Serverは64bitしかありませんが今回のAtomは64bit対応しているので関係無いです。
32bitCPUを使っている方は注意してください、使えませんから。

インストールの手順は表示されるとおりに設定していけばいいんじゃないかと。
後予めインストールするソフトウェアの一覧が出てきますが基本的に後でインストールできますので初めは何もなしの状態にするのがお勧めです。
それとサーバーの設定手順なのですがここのサイトを参考にUbuntu使用にしました。
http://centossrv.com/
結構有名なところらしいですね。
ただ、CentOS用の設定なのですこしばかりUbuntu様に改造しなければなりません。
早いところCentOSバグ修復されないかなあ。

とりあえずサーバー構築は終了
次からはJavaで公開するところまでやっていきたいと思います。
ほな、さいなら。

ヘッポコ変ジニア奮闘記:維持費0のWebサーバーを構築しよう サーバ組み立て前編

ずいぶん間を空けてしまいました、JP3BGYです。
今回はサーバー組み立てなのですがほとんどTwitterに流してたもののリピートです。
少しばかり補足は加えますが何分自作パソコンってそんなに難しいシロモノでもないので説明が殆どいらないんですよね。
まあ早速見て行きましょう。

とりあえずパーツ紹介からやっていきましょう。

 CPU&マザーボードMBD-A1SAM-2550F-O(以下MB)、amazon.comからの個人輸入品です。

CPUはAtom C2550 2.2GHz4Core品です。

TDPは確か18Wぐらいかな、とんでもなく省電力です。

メモリー8GB、このサーバにはいまの所3つの動的ページを動かすつもりでいるからちょっと多めに入れておきます。

それとせっかくの64bitなのでちょっと多めに入れたかった自分がいた。

 ケースですね、Z3Plus。

やすかったんで選びました。ただそれだけです。

でも安い割には作業も楽に進むので予算の少ない自作ユーザーの方必見です。

 電源、60Wでなおかつ12VAC電源のものです。

12Vなので鉛蓄電池から変圧することなく直接繋げられます(動作の保証はしかねますが)。

HDDです。

サーバー用なので耐久の高いWDのRED選びました。

速度と耐久性が両立しているのでｲｲ。

さて紹介も終わったところでちゃっちゃと組み立てたいと思います。

とりあえず開封

メモリーをMBに装着させる。
この時メモリーは同じ色のところに同じものを指してください。
また横のストッパーは片方だけ倒す場合と今回のように両方倒す場合があります。
メモリーは刺すときに結構強く押してカッチっと音がしてストッパーが勝手に起き上がるまで押してください。

マザーボードとっても綺麗デス・・・

ケースは側板をひっぺがして中にある箱やら針金をすべて取り、ケーブルを少し整理してください。

MBに左写真のようなパーツがあります。
これはMBのIOポートをケースから出すパーツなのですが今回のものは必要に応じて穴を自分で開けないといけないのでMBのIO似あわせて必要な穴を開けます(右写真)。

そんでもってはめます。
この時向きに注意してください。
これもカチッと音がするまで押してはめてください。
角から押していくとうまくハマります。

















でもって先ほどのMBをケースにはめるのですがその前にMBの大きさ(今回のはMicroATXです)にあわせてケースにマウントネジをつけます。ネジはケースに付いている箱のなかにあります。
これは重要なものなのでペンチなんかでしっかり固定させてください。
付ける場所はケースに説明書に書いてます。
それでもって・・・

さっさとMBをケースに固定
ネジはケースの箱のなかに入ってます
この作業はかなり面倒なので磁力のある長いドライバーを使ってください。
磁力がないものならば冷蔵庫に付いているようなものをドライバーに付けてやるだけでも作業効率が違います。

固定完了

ちょいと長くなりそうなので後編へと続きます。

お知らせ

どうも、JP3BGYです。

今日はちょっとお知らせです。

最近いろいろやっているのに更新が遅いのですがすいません。

いろいろ立て込んでいます、が、やっと夏休みに入ったのでいくらか更新できるんじゃないかなーと思います。

それはさておき、今この機械同好会で使われているTwitterbotですが、ソースコード公開しました。

https://github.com/Koyomachineclub/Twitterbot

使い方はREADMEを読んでおいてください。

改造はApache ver.2ライセンスの範囲でお願いします。

すいませんが今日はここまで、Javascriptとかサーバーとかほかにも書くべき記事はありますがそれは今週中に別の記事に書きます。

それでは。

ヘッポコ変ジニア奮闘記:維持費0のWebサーバーを構築しよう 発電技術思考編

6月某日、一人の変ジニアが頭を抱えていた。
「どうしよう・・・、この費用。」
パソコンデスクの下で何やらゴソゴソやっている様子。
彼が見ているものは・・・何やら数字が表示されていてプラグも刺さっている。
おそらくワットチェッカーのたぐいだろう、しかし彼はなぜこんなにも頭を抱えているのだろうか。
「これでサーバは・・・・・・・どう考えても無理だよなぁ。。。」
どうも彼は自分のパソコンで自分の所属する同好会のWebサーバを立ち上げようとしていたらしいが、電気代で躓いてしまったみたいだ。

一人の変ジニアは悩んでいた。
「どうすればいいのか・・・てんで検討もつかない。」
彼が悩んでいること、それは今日中に建てるはずだったサーバの計画が全てぱあになってしまったことだった。
仲間にはどう伝えようか、今後どうしようか、何が一番得策だろうか、彼の頭の中ではそれらが低回していた。

ふと、彼は何を思ったのか窓の外を見た、まだ梅雨入りしていないその空は青く晴れ渡っていてなおかつ入ってくる風も心地よい。
・・彼はしばらくぼうっと眺めたあと何があったのか軽く微笑んだ。
「その手があったか。」
彼はパソコンの電源を立ち上げ彼の考えを皆に伝え、一人開発に取り組むことに決めた。


というわけでみなさんどうもJP3BGYです。
こんな長い前置きは書くのは初めてでしたのですがいかがだったでしょうか。
えっ、早く本題には入れと?(空耳)
ではまあ今回の連載についてお話しましょう。

今回開発するシステムは、タイトルにも書きましたし冒頭で軽く触れましたが、運用コスト0のWebサーバをたちあげたいと思います。
ただまだ思考段階でして実際に形にはこれっぽっちもしていないのですけどね。
とりあえず今はその考えについて少々書いていこうと思います。

まず運用コスト0のサーバをどうやって立ち上げますかというと、もうわかっている方も多いでしょうが。
そうです、自然エネルギーです。
ソーラーとか風力とかね。
ただ学生なので費用面でも実行面でもあまり大胆なことはできません。
なので最近流行りの
「うちは家の電気すべてをソーラーでまかなっています。」(ｷﾘｯ
みたいなことはできません。
なので運用コスト0にするには

1)変ジニアらしく極力自作で済ませる
2)効率の良い発電方法を模索する
3)サーバ自体の消費電力はもちろん平均最大20Wで済ませる
4)静的ページはもちろんPHPやJavaを使った動的ページもらくらく表示できること
5)金銭的にも技術的にも無理をしないこと

以上を守らないといけません。
それでもって今の僕の有り金は・・・
5万円
毎月の小遣いを入れても6万円あるかないかぐらい。
さてどうしようか・・・。

まず、僕の家の周りは住宅街で家も密集していてさほど日当たりは良くない。
しかも今は梅雨の時期、とてもではないがソーラーは使えないね。
でも風力だとしても果たしてこんな少しばかりの風速でどこまで発電できるだろうか・・・。
できれば両方あったら心強いだろうがそんな金銭は持ち合わせていない。
どっちか片方ならば風力だろう。
ただ自然エネルギーは使わずにもっと別の方法を使う手もある。
自転車コキコキで頑張って発電するのである。
テレビでも幾度か出ているが自転車に自動車のオルタネーターという発電機をつけてコキコキコキコキ・・・。
それでテレビや扇風機をつけるというあれだ。
しかしいつも僕は家にいるわけではないからちょっとこれはできればやろうかなぐらいに保留させてもらおうかな。
となると発電方法はほぼ風力に決定。

つぎに、どうやってつくろうか。
いろいろ調べてみると風力の羽は色んな種類があるからそれらは次回以降検証しようと思う。
問題は発電機だが・・・
①作る
②オルタネーターを使う
③高いけど買う

まあ一番簡単なのは②かな・・・?
というわけで自動車班班長H君にもらってきてもらいました。
H君本当にありがとうございます。


ちょっと長くなりそうなのでオルタネーターの全貌は次回見てみましょう。
それではまた次回、ではでは。

Javascriptで動くページを作ろう第三回:transitionとJavascriptの組み合わせ

どうも、JP3BGYです。
今回は前回の続きとしてtransitionとJavascriptを組み合わせてみたいと思いますが・・・。
その前に少しばかりJavascriptの説明を。

まず、Javascriptの実行の順番です。
アニメーションをすることにおいて一番重要な部分なのでまあ知っている方も多いでしょうが一応目を通しておいてください。
えー、それ以前にJavascriptがわかんない方は別のページで調べてください。
あんまり詳しく書くと長くなってしまいますから。
まずJavascriptには関数内の命令と関数外の命令があります。
下のような感じです。

var a;
//関数外の命令群
function b(){
 //関数内の命令群
}
//関数外の命令
b();

HTMLが上のタグから順に読み込まれていってJavascriptが読み込まれた瞬間にまず関数外の命令群が動きます。もちろん上から順に実行されます。
上の例では変数aと関数bが宣言されて関数bが一度だけ実行されるようになっています。
また,JavascriptにはHTMLにイベントを組み込むことによってそのイベント発生時に決まった関数を処理できるようになってます。

<html>
<head>
<script>
 var a;
 //関数外の命令群
 function b(){
  //関数内の命令群
 }
</script>
</head>
<body onload="b()">
</body>
</html>

この例ではbodyが読み込まれる前に関数外の命令群が動いて読み込まれたときに関数bが呼び出されていますね。

次にDOMについてです。
DOMとは簡単に言いますとHTMLやXMLの内容をJavascrript等外部のプログラムで使うためのものです。
CSSの値を変更する場合は以下のような感じです。

var sampleelement=document.GetElementById("sample1");
sampleelement.style.width="60px";

上の例ではID名がsample1であるタグのwidthプロパティを60pxに変更しました。
何らかの方法でタグのElementを手に入れてそこに
Elementを代入した変数名.style.変えたいCSSプロパティ="変更後の値を指定";
とまあこんな感じでかえます。
これはCSSプロパティなら何でも使うことができます。

さてここまではほとんど常識の範囲ですが、ここからアニメーションの話にしていきましょう。
前回使ったtransitionは指定されたCSSプロパティが変更されたときにアニメーション化するものなので、Javascriptで変更された場合でも適用されます。
なのでさっそく下にJavascriptで作る簡単なアニメーションの例を書いてみましょう。

<html>
<head>
<style>
#anime{
color:white;
 background-color:blue;
 transition: width 1s ease  , height 1s ease ;
 -moz-transition: width 1s ease  , height 1s ease ;
-webkit-transition: width 1s ease  , height 1s ease ;
-o-transition:  width 1s ease  , height 1s ease ;
-ms-transition: width 1s ease  , height 1s ease ;
}
</style>
</head>
<body>
<div id="anime" onclick="b();">アニメーションですよ</div>
<script>
 var a=document.getElementById("anime");
 var flag=0;
 //関数外の命令群
 function b(){
  switch(flag){
   case 1:
    a.style.width="256px";
    a.style.height="256px";
    break;
   default :
    a.style.width="128px";
    a.style.height="128px";
    break;
  }
  flag=flag^1;
 }
 b();
</script>
</body>
</html>

とまあこんな感じでクリックすると変わるものが出来上がった。

ところで、上の例を見て少し変だと思ったところはありますか?
そう、埋め込みscriptがbody、しかもdivの後ろにあります。
実はdivよりも下にないとうまく実行できません。
なぜでしょう?
これはHTMLの読み込みの順番が関係しています。
HTMLはうえの行の左から順に読み込みそしてすぐに実行します。
難しい言葉で言うとインタプリタ方式というやつです。
で、試しにブラウザの真似をして上から順に見ていくとですね、もしjavascriptがheadの中にあったとするとjavascripが実行されている時点では以下のようになっているのです。

<html>
<head>
<style>
#anime{
color:white;
 background-color:blue;
 transition: width 1s ease  , height 1s ease ;
 -moz-transition: width 1s ease  , height 1s ease ;
-webkit-transition: width 1s ease  , height 1s ease ;
-o-transition:  width 1s ease  , height 1s ease ;
-ms-transition: width 1s ease  , height 1s ease ;
}
</style>
<script>
 var a=document.getElementById("anime");
 var flag=0;
 //関数外の命令群
 function b(){
  switch(flag){
   case 1:
    a.style.width="256px";
    a.style.height="256px";
    break;
   default :
    a.style.width="128px";
    a.style.height="128px";
    break;
  }
  flag=flag^1;
 }
 b();
</script>

まあ見てくれればわかるけど最初に悩むところとして
var a=document.getElementById("anime");
のIDがanimeっていうタグがないけどこれ何、というところです。
実際にブラウザで起動してF12ボタンでデバッグしてみるとそのようなエラーが書いてあるかと思われます。
まあつまり、Element取得においてなのですがこれはjavascriptより前にHTMLで書かれたもののみを見るのでこれを適応したいすべてのHTMLタグはすべてjavascriptより前に置かなければなりません。
そうすると今回は必然的にIDがanimeであるdivを前に置く必要があったためにこうなってしまったわけです。

そうするともう一つ疑問が出る人もいるかもしれません。
styleはだいじょうぶなのか?というものですね。
style、これはいわば設定項目、簡単に言えばこのHTML文章ではすべてこのようなstyleで設定されてます、という宣言のようなものです。
javascriptはその場その場で起動するのに対してCSSは設定なのでこの文章全体に反映されます。
なのでstyleはほとんどの人はhead部分に書くわけです。
それとstyleもjavascriptも<html>タグの中ならどこに書いてもいくつ書いても大丈夫だったはずです。

上のことを頭の隅において色々アレンジして面白いものにチャレンジしてみてください。

ただし少しばかり注意が必要なものがあります。
それはsetTimeout関数です。
この関数は指定時間後に指定された関数を実行させるという関数なのですが、これ人によって解釈がずれたりして大変なのです。
例えば次のような例を見てみましょう。

setTimeout('window.alert("7000")',7000);
setTimeout('window.alert("5000")',5000);
setTimeout('window.alert("3000")',3000);

上の例は一見7秒後に一回、その後5秒後に一回、そしてそのあと3秒後に一回ずつalert表示されるように見えます。
が、しかし実際は起動してから3・5・7秒後に一回ずつ表示があるのです。
どうしてこうなるのでしょうか。

これはsetTimeout関数の罠なのですが、この関数は指定された時間の後に指定された関数を起動させる時限爆弾を設置するだけの関数なのです。
時限爆弾を設置するのは一瞬なのですぐに次の命令に行きます。
そうすると上の例の3つはほぼ同時に時限爆弾がセットされます。
よって待ち時間の短いものから順に起動されていくのです。
ではどうすれば時間差で起動させることが可能でしょうか。
下の例を見てください

var bflag=0;flag=0;
//インターバルの開始
var timerID = setInterval(
function(){
 //もし爆発していない時限爆弾がなければ
 if(bflag!=1){
 bflag=1;
//設置する時限爆弾を条件分岐で選択
 switch(flag){
  case  0:setTimeout("window.alert('7000',7000);bflag=0;flag++;",7000);break;
  case  1:setTimeout("window.alert('5000',5000);bflag=0;flag++;",5000);break;
  default:break;
  }
 }
//もし2つの関数が終われば
 if(flag == 2){
  setTimeout("window.alert('3000',3000);bflag=0;flag++;",3000);
  clearInterval(timerID);//Interval解除!!
  timerID = null;
 }
},200);

まあ人のコードなんてぱっと見てわかるものではないので説明します。
まずsetInterval関数ですが、これは一定時間ごとに指定された関数を実行させる関数です。
今回は200msごとに繰り返していますがもし重いと思ったら1000ぐらいまで上げてもいいと思います。
またこの関数は見ての通り
clearInterval(返り値を代入した変数の名前);
で解除できます。

その中身ですが、まずbflagですがこれが1の時setTimeoutによって時限爆弾が設置されないようにしてます。つまり"Busy"flag、今は別のsetTimeoutが動いていますよってことです。
次にflag、これはsetTimeoutが何番目まで中身の関数の実行を終わらせたかということです。
要は順番にsetTimeoutを呼び出すためのものです。
そして実行の流れとしては

200msごとにbflagをチェックしてbflagが0の時bflagを1にして次のsetTImeoutを実行、それが終わればbflagを0にし、flagに1を足しててまた次の関数を実行する。
flagが2、つまり2つ目までの処理が終わったら、3つ目の時限爆弾を設置してそのあとbflagをチェックしているsetIntervalを解除する。
その後最後の関数が実行されて終了。

手順はそこまで難しくないとおもいます。
またこの方法以外にも色々やり方はあるので考えてみてください。

今回はここまで、次回はCSSを使用しないアニメーションを作ってみましょう。
ほな、さいなら。

子供のころに戻って

お久しぶりです。
最後に投稿してから早くも3ヵ月。

そろそろ投稿しないとなぁと思っていました。

そこに飛び込んできたGW!

とりあえず子供のころ（今は高校生なので大人です）に戻った気持ちでいろいろ書いてみます。

JAF

これは、大阪モーターショーのときにJAFのブースでもらった紙工作の模型。

JAFの作業車と作業員の紙工作です。

はさみものりも使わずに 簡単にできました。

5分ぐらいで完成しました。

キャビン部と赤色灯の隙間にカードが立てられるようになっています。





次は…（最後ですが）、有名な「ミニ」です。
写真と少しの説明だけでお楽しみください。
ちなみに、1500円でした。

MINI RALLY CAR

後ろから

ホイールハウスの曲面がリアル！



スペアタイヤも積んでます。

ドアが開きます

タイヤも回ります！

結構リアルです

緑の↓　はサイドミラーです。
取り付け位置が後ろ過ぎるので使えそうにありませんが…


赤の↓　はシフトノブ。
もうちょっとショートストロークの方が使いやすいでしょう。


青の↑　はステアリングです。
ハンドルは和製英語なので、ステアリングと呼びましょう!










今回は紙工作の自動車模型について書いてみました。
子供のころに戻れたかな?

大阪モーターショーについての記事は近いうちに追加します。

以上です。

いおなのDTM奮闘記 その2

 

昨日フリーの音源の中では特に高音質だと名高い「Independence Free」をダウンロードしました！

始めはなかなかうまい具合にいかずに、やっと無事に導入できるまでに3時間ぐらいかかってしまいました。

どうも数年前とは仕様が違うらしく、なかなかダウンロードの参考になるサイトがなかったので導入方法を簡単に書いてみようと思います。

1. まず、このサイトにアクセスする
2. ソフト本体をダウンロードするためにまずダウンローダー的な物をダウンロードします。
   
   
   
   
   windowsユーザーは上、Macユーザーは下を選択
   
3.  表示されている6桁の数字を下に打ち込んでダウンロード
   
   
   
4.  そのダウンローダーの指示に従ってソフト本体をダウンロードする。
   30分ぐらいかかったかな。
   
5.  本体がダウンロードできたら、同じように音源ライブラリをダウンロード。
   これを飛ばすとデフォルトのピアノの音しかなりません。
   僕の場合はここら辺でファイルをちゃんと選択しろだのなんだろと出てきて、訳わかんないから適当にクリックしたらまぐれでできた的な感じです。
   こういう自分でも分からないところは説明しようがないのでLet's try！（黙
   
   
   
   
6.  無事ソフトがダウンロードできたらまずオーディオポート（音を鳴らしたりマイクからの音声を拾ったりする場所）を設定します（聞くだけなら普通は出力ポートのデバイスにASIOドライバを選択すればおｋ）
   終わったら「赤で囲った部分」→「Independence Free - Instruments」からテキトーなものをクリック。するとユーザー登録を迫られます。メールアドレスを打ち込み、該当ページに飛び、必要事項を記入して送信する。
   
   
7.  すると指定したメアドに届く確認メールにライセンスコード的なものが記載されているので、指定された場所（ここら辺はたしか日本語だったから分かるはず）に打ち込んで送信してユーザー登録完了！

 

これはVSTプラグインと呼ばれるもので、DAWソフトと連携させて使うのが普通です。

なのでこれだけで音楽を作ることはできませんが、下の鍵盤をクリックすると音が鳴りますので、まずはいろいろな音を聞いて楽しんでみるのもいいと思います。

デジタル一眼レフ購入記

ご存じのとおり、わたくしモアイくんはカメラ及び写真を趣味にしています。

写真の趣味が始まったのは一年前。何の気なしに撮り始めてより以来この時代なのにフィルムカメラを使ってきました。これまで撮ってきたフィルムは70本ぐらい。24枚撮り、36枚撮りが混じっているので一本で平均30枚撮れるとすると2100枚ぐらいです。

まあそんなこんなで写真を撮り続けているうちにもちろんコンテストとかにも興味を持ち始めるわけですよ。雑誌の月例コンテスト欄の初心者向けはいいとして上級者向けのものを見ているとただただ感心するばかりで最近はあの人たちは化け物ではないかと思ってくるほどうまいんですよ。

写真も撮った数で腕は決まるようなものですから年の功みたいなもので僕のような若い者がとても手を出せるものではないのですよ。

ということは単純。「若い者向けのものはどうなんだろう。」という結論にたどり着くわけです。
いろいろ探しているうちにこんなものにたどり着きました。→http://syakou.jp/

これは「写真甲子園」といって、ご存知「全国高等学校野球選手権大会」通称「夏の甲子園」のパロディーといったところでしょう。つまり「高校生」の「写真」の大会を表すわけですね。

「ああ、こんなんがあるんだなあ」と思いながら過去の実施報告書を見ていました。パラパラとめくっていくと本選出場校の予選での作品が載っていたわけですよ。どんなのが上へあがるのかなあって見ました。驚きました。

みんなデジタルカメラを使った写真だ、と思ったのです（まあ、いくつかはフィルムでもとれるかな？って感じのものもありましたが）。

興味がある方は昨年度の一位になった学校の予選作品を見てみてください。
あんなの絶対にフィルムで撮ろうとは思わない作品ですよ。（といってもある程度より上の年代にしか伝わらない気が・・・）

さあということで僕はこの春休みにデジタル一眼レフカメラの購入に踏み切ったのでした。

はたしてこれはいったい・・・。

第一弾おわり。

いおなのDTM奮闘記 その1

ども、いおなです。
最初に投稿してから2ヶ月以上放置していたわけですが、いい加減更新しないとな～と思いまして。


とはいっても自分はまだまだ勉強中、ここに書くことは何もないというか書けないというか書く資格がないというか、そうだな・・・・・・・なんと言えばいいか、うん、

そもそも書く時間があるならその分DAW（音楽制作ソフトのこと）の前にいたい

これが本音かな（ぁ

というわけで、今回は自分が今使っている環境の説明だけです。
「ここはこうした方がやりやすいよ」などといったアドバイスが逆に欲しいです。

全体。机に引っ付いて置かれているピアノがいかにもって感じ。
このピアノは音符入力用キーボードとしても活躍してくれている頼もしい味方です。

USBオーディオインターフェイスとモニターヘッドホン。
オーディオインターフェイスっていうのは簡単に言うとPCど楽器の中継点。
モニターヘッドホンっていうのは音をできるだけ素のままに伝えることに特化したヘッドホンのこと。
メッチャざっくり書いたけど、ググればもっと詳しくわかるよ！（蹴

今使用しているDAW。
「singer song writer lite 8」、VOCALOIDユーザー優待版でお値段9000円なり。
本格的なものは5、6万円するのでこれはメチャメチャ安いです。ステマではない。

教科書。だからステマじゃないですってば

こんな感じでやっております。
んで、実際にやってみると実に奥が深い！まだまだ分からないことだらけです。
特に本は「これメッチャ分かりやすいよ！」とか「初心者はまずこれを読むべき！」っていうものがあれば教えてくれるとうれしいです！

ではでは～ﾉｼ

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を入れると更に面白い動きができます。
次回はこれをやっていきましょう、とりあえず今回はここまで。
ほな、さいなら。

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の制御をします。

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

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でｆａｓｔ 1でslowとなる。
基本設定の見方はこれだけである。
で、実はこのピンはemmcに使われていたピンなのだがgpioの設定になっているので成功です。
またもしこれのとおりになっていないピンがあっても今度やるデバイスツリーオーバーレイの作成によって変えることができます。

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

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とかでプログラミングをしますから(涙。
はっきり言って無駄に専有されては邪魔です。
ただこれ、ちょっと難しいことしないと変えることができないんですね。
そこで今回ではなく次回、そのことについて書きたいと思います。

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

行ってきました、大阪モーターショー！

こんにちは、自動車班班長Hです。

 ずいぶん前の事になりましたが、去年の12月20日に、インテックス大阪で開催されていた、大阪モーターショーに行っちゃいました。

 もっと早く書こうと思ってましたが、いつの間にか2月に…。　その分頑張って書きますね！！

 

班員Oと一緒に、学校が休みだった20日（金）にしました。

 21日（日）～23日（月・祝）は来場者が多いと思ったからですが、その通りになったみたいです。

大阪モーターショーのホームページによると、 

1日目：45579名

2日目：69008名

3日目：117135名

4日目：72597名

合計：304319名 

すごい人数ですね。でも、目標来場者数の320000名には満たなかったんですけどね。 1日目に雪が降ったことも関係あったりなかったり…。とにかく、会場に着くまでが寒かったです。

入場料は当日券で中学生以上の大人が1500円、小学生が700円でした。しかし、班員Oの持ってきた割引券のおかげで、前売り券と同じ、1300円に！

 国産9ブランド、輸入車19ブランド、2輪車3ブランドが出展しました。東京モーターショーに出展していないブランドが、7ブランドありました。さすが西日本最大のモーターショーですね！

では、写真も使いながら、紹介していきます。

まずは、日本最大メーカーのトヨタ自動車から！

 この車は、燃料電池車の「TOYOTA  FCV  CONCEPT」です。　燃料電池車とは？　 簡単に説明しますと、水素と酸素を化学反応させて電気をつくり、モーターで走るのです。

 じゃあ電気自動車でいいじゃん！

という人もいるかもしれませんが、電気自動車は充電に時間がかかり、航続距離が短いのです　（スマートフォンの充電が面倒だというのと同じですね）。水素は3分で満充填可能で、航続距離も長いのです。

 この車はまだ「コンセプト」ですが、2015年には発売予定です。

 「これは自動車か！？」と度肝を抜かれる方も多いと思います。

トヨタの「FV2」は、立っていても座っていても運転できる未来の乗り物です。ハンドルはなく、荷重移動で舵を切るのだとか。

この角度からではわかりにくいですが、ドライバーの感情を認識してボディの色を変え、コミュニケーションを取ることもできるとのこと。

タイヤも光っていました。夜の高速道路に似合いますね（僕の独断によるものですが）。

これは僕のお気に入りです。「JPN TAXI CONCEPT」といいまして、その名の通りタクシーです。しかし、街で見かける、コンフォートやセドリックとは違いまして、ワゴン型ですね。

トヨタのホームページによると、「みんなが乗りたくなる、そして笑顔になる。日本の街の風景を変え、日本ならではの"おもてなしの心"から生まれた次世代タクシーコンセプトです。」

 日本人の"おもてなしの心"のとおり、大開口の電動スライドドアや低くてフラットなフロアなど、小さい子供からお年寄りまで、みんなに優しい車です。タクシーに適した、LPGハイブリッドシステムを搭載しており、環境性能も優等生です。

ただし、イギリスの伝統的なロンドンタクシーにとてもよく似てますね。

日本人ならだれもが知っているあの大衆車、「カローラ」です。こちらはワゴン型で多機能かつ環境にもよい、「フィールダーハイブリッド」です。しかし、なぜ展示したのでしょうか？写真では分かりにくいですが、ボディ全体がジーンズの生地で覆われているんです！

 木村拓哉さんが市長を務める「TOYOTOWN（トヨタウン）」では、みんながジーンズを履くというテレビCMを覚えていますか?そのキャンペーンの一環で作られた車です!ドアトリムなど細かいところまでジーンズが貼ってありましたよ！でも公道走行不可です。

トヨタは他にも、新型ノア・ヴォクシーや86オープンを出展していましたが、割愛させていただきます。


トヨタ自動車だけで、かなりの分量になっちゃいましたので、次は第2弾にします。近いうちに更新しますので、それまでしばしお待ちを。