愛されるデザインを作りたい

質感や特徴など現実世界のモノを模倣したスキューモフィックデザイン

余計な装飾物をいっさい取り払いシンプルなメトロUIデザイン

機能としての複雑さや利便さに加え、ユーザに受け入れてもらえるには操作性(ユーザビリティ)もしっかりと設計しなければなりません。そこで重要となるのがデザインです。

こういったデザインがユーザにどういった影響を与えるかということについて纏めようと思います。

ここでいうデザインとは

今回取り扱うのは表面的に飾り立て美しさを引き出すということではありません。

問題を解決するために図案や模様を計画、レイアウトすることです。

スキューモフィックデザイン

スキューモフィックデザイン（SkeuomorphicDesign）は、機能的には必要ではないが、似たようなモノがもつイメージを活用するデザインです。

例えばこの本のアプリでは実際の本のようにページをめくるのだと経験的に理解することができます。

メリット

スキューモフィックデザインにすることでこんな恩恵を得ることができます。

• 視覚的にリッチで魅力的
• 細かく作り込まれたデザインはそれだけでまず「触ってみたい」というユーザの興味をそそります。
• 操作方法を想像しやすい
• 現実にあるものがモチーフですから、操作方法が理解しやすい。

デメリット

一方でこんなデメリットも抱えます。

• 操作性の悪さ
• 現実の操作を無理やり画面上で再現することで無駄な動作が必要となった。
• 再現性によるストレス
• 再現性がひくく、現実でできるはずのことができずストレスになった。

メトロＵＩデザイン

スキューモフィックデザインと相反しているといえるのがメトロＵＩデザインです。

つねにコンテンツ(機能)がメインでグラフィックや効果は持ちません。

最近ではWindows8のデザイン等が一般的でしょう。

こちらは何と言っても平面の、画面のためのデザインであるということが最大の利点であるといえると思います。

じゃあどうしたらいいの？

やっと本題ですね。上にあげた2つのデザインをまとめると、「イメージから記号化したデザイン」と「機能から記号化したデザイン」なのかなと思いました。

それぞれのデザインに利点があるし、抽象化の度合いによって混成させることも可能だと思います。

大事なのはそれぞれのデザインの利点や与える影響をしっかり考えた上で選択することではないでしょうか?

おわりに

デザインも大事な機能の一部です。技術だけにとらわれずユーザの視点も意識し続けて何かを作っていきたいですね！

以上mozukuでした。（いやーまとめるのってむずかしい）

Androidのコードネーム!

どーもこんにちは。
フィーチャーフォン戦士のUchiyamaです。
最近、おもちゃ用の初代ペリア(Xperia X10)を弟に投げつけてMEDIAS ESさんを入手しました。
ペリア系はカスタムROMが豊富でいろいろ遊べるのでおすすめです。

というわけで、今回はAndroidのコードネームをつらつらと書こうと思います。
(誰かiPhoneのことも記事にしてくれないかなー？)
うちの研究室はiPhoneとMacな人多い気がしますです。

正規表現で独自フォーマットのテキストからhtmlを吐き出す(PHP)

Wikiを編集する時のように、フォーマットを決めたテキストからHTMLを吐き出せたら色々出来そうだったので作ってみました。が、無駄に時間がかかったわりに微妙な出来です。
まずテキストのフォーマットを決めます、使った事のあるWikiをパクってアスタリスクを行頭につけると見出しタグになる、とします。1つならH1要素、2つならH2要素です。また、リンクタグもそれっぽくフォーマットを決めます。今回標的のなるテキストは以下です。

*H1要素にしたい
**H2要素にしたい
文書にしたい！

*H1要素にしたい

**H2要素にしたい

文書2[text:"リンクになりたい",url:"http://blog.t-lab.cs.teu.ac.jp/"]

文書3にしたい！
文書4EOFで終了したい

欲望の塊のようなテキストです。これをPHPのpreg_replace関数によって正規表現によるゴリ押しでHTMLに生成します。

$html = file_get_contents('./test.txt'); //欲望の塊を読み込む

$html =preg_replace('/^\*{2}(.+)(\n|$)+/m',"

$1
\n",$html); //H2タグの生成

$html =preg_replace('/^\*(.+)(\n|$)+/m',"

$1
\n",$html); //H1タグの生成

$html =preg_replace('/^((?!<).*?)(\n|$)+/m',"$1

\n",$html); //Pタグの生成

$html =preg_replace('/\[text:\"(.*)\",url:\"(.*)\"\]/m',"$1",$html); //Aタグの生成

print $html;

正規表現部分がわかりにくいと思いますが、大体このような感じになりました。正規表現はまだまだ慣れていないので、全然キッチリしてないです。実行順で優先順位を付けてかなり誤魔化している部分が多いです。特にH1とH2の差はアスタリスクの個数だけなので、このままの構文ではアスタリスクが多い方を優先しないとおかしな事になってしまいます。こういった所は改善点だと思いました。パズルみたいでノータリンの自分には難しかったです。
このPHPにテキストを投げ入れると以下のようなHTMLが出来上がりました。

H1要素にしたい

H2要素にしたい
文書にしたい！



H1要素にしたい

H2要素にしたい
文書2リンクになりたい


文書3にしたい！


文書4EOFで終了したい

幾多のタグの暴走を経て（ただの失敗）、なんとか形になりました。これに宣言等のタグをくっつければHTMLファイルの出来上がりです。本来は複数改行されたらPタグで閉じる、というようにしたかったのですが（文書3と文書4が一つのPタグ内にまとまるように）複数行にまたがる正規表現はまだ自分には難しく、上手く行きませんでした。HTMLを書く時に「一部文書で改行コード入れるのがめんどくさい」と思っていただけに、ここが上手く実現できなかったのは悔しい所でした。
完全に"やってみたかっただけ"なのですが、自分でフォーマットを決めてメモを取ったり、文書を書いておくとこのような形でどこかで使えるかも・・・と思いました。今回作った物の紹介は以上になります。

月例ミーティング

こんにちは

B4　西崎です.

今日は、4年生の月例ミーティングについて紹介します。

田胡研究室では、月末の火曜日に毎月行っています。

日頃の自分のやっているプロジェクトについての構想などを発表し、評価してもらう場です。
先生に丁寧な指導をしてもらえる為、これからの方針などが明確になります。




月例ミーティング後に、内容を見つめなおし次回のプレゼンテーションに備える4年生達。

日々やっている事を見直すよい一日です。


月例ミーティング後には、研究室でピザやたこ焼きを食べながらパーティーをやります。
田胡研に入ると、たこ焼きを焼くのがうまくなりますよ！

JavaScriptでオブジェクトつかった書き方！

B4の西崎です．


「javascriptをオブジェクトを使って書こう！」ということで今回の記事を書きます！


オブジェクトを使った書き方をすることにより，ソースコードの見やすさであったり，再利用性、保守なども行いやすくなります．

まず簡単なオブジェクトを説明します．

var hoge ={
    a:'xxx',
    b:0,
    c:function(){
        return 'yyy';
    }
};

上のコードは，a,b,cの3つのプロパティを持ったhogeというオブジェクトです．

それぞれのプロパティa,b,cには，「xxx」という文字列，「0」という整数，cのように関数を用いて書けば「yyy」という文字列を返すようになっています．

実行や操作も簡単です．

hoge.a = 'zzz';

このようにやれば，'xxx'という文字列を'zzz'という文字列に書き換えられたり…

hoge.a;

このようにやれば，オブジェクトを実行でき，「xxx」という文字列を出力してくれたり，

hoge.c();

このようにやれば，関数化されたオブジェクトも実行でき「yyy」という文字列を出力できます．


またオブジェクトだと簡単に新しい機能の追加も可能です．

hoge.d = function(){
    return 'xyz';
}

cと同様に実行できます．


6月19日にktaroさんが関数の実行タイミングの記事を書いてくれていたのでぼくも，実行について少し書きます．
jQueryをインポートして，下のように書けばDocumentの読み込みが完了時に実行するされます．
(1回のみ)

(function() {
　　var hoge ={
    　　a:'xxx',
    　　b:0,
    　　c:function(){
        　return 'yyy';
    　　}
　　};

    $(document).ready(function() {
        hoge.a;
        hoge.c();

    });
})();

田胡・柴田研究室では，勉強会をよくやっています．
ソースコードの正しい書き方や，正しい変数のつけ方，また技術のことなど，日々教えてもらっています．
この記事に書いたオブジェクトを使ったの書き方も先輩に教えてもらったものです！


来てお話するだけでも，学ぶことのある研究室です．

研究室選びでのポイントとして，「自分の成長できる環境」で選ぶのがいいと思います．
就職活動でも，「こんなことやりました！」ってアピールできることは，この研究室に来ていればたくさんできますよ！

JavaScript(+jQuery)でaudioタグあれこれ

B13の大矢です。えんもたけなわですね。
小ネタレベルではありますがタイトル通りJavaScriptでaudioタグを扱ってみたいと思います。jQueryも利便上用います。
今回、WEBアプリケーション等において様々な音声ファイルを流したい場合を想定していじってみたいと思います。実用性は謎です。

audioタグについて

html5から追加された音楽や音声などのオーディオが再生できるタグです（まんま）
タグを書く際にはaudioタグ内のsrc属性で音声ソースのアドレスを指定する事もできますが、ブラウザによって対応している形式が異なります。そのため、形式が違う複数のソースファイルを持たせたいのでhtmlを以下のように書きます。

このようにogg形式とmp3形式の同じ音声ファイルを揃えれば主要なブラウザには対応できるはずです。愛用のOperaで確認したらなんとmp3再生できませんでした！やっぱりOperaってク Opera最高！

例ではaudioタグにcontrols属性がついています。jsからでしか操作を行わない場合この属性は必要ありませんが、これの属性を付ける事でオーディオプレイヤーが表示されます。（ソース表示の都合上、controls属性に空の文字列が入ってしまっていますがこれは必要ありません）

このプレイヤーはブラウザによって異なります(画像はOperaのもの)。

audioタグの基本については以下のページを参考にすると良いと思います。対応形式の詳細なども見れます。

• audio - タグ/HTML/属性 : ASCII.jp HTMLリファレンス

JavaScriptでaudioタグをいじる

JavaScriptを使用してaudioタグをいじってみます。基本的な操作を列挙してみます。

var AudioTag = document.getElementById("AudioTag");

AudioTag.play(); //再生
AudioTag.load(); //読み込み
AudioTag.pause(); //一時停止
AudioTag.currentTime = 0; //再生時間をいじる(これは0秒に戻す)

動作を列挙しただけなので当たり前ですがマトモに動きません。jQueryによるID指定では直接叩けなかったのでgetElementByIdを用いています。

audioタグの音声ファイルを変更して再生する(jQueryを使用)

様々な音声ファイルを再生するにはaudioタグ内のsourceタグを入れ替える事で実現できます。jQueryを用いると実装が楽になるので使います。

var AudioTag = document.getElementById("AudioTag");

function soundPlay(fileName){
 $("#AudioTag source").remove(); //sourceタグの削除

 //指定したファイル名のmp3形式ファイルとogg形式ファイルを用意している想定でsourceタグを追加
 $("#AudioTag").prepend("");
 $("#AudioTag").prepend("");

 AudioTag.load(); //ファイルの読み込みを行う
 AudioTag.play();
}

指定されたファイル名の音声を読み込み、そのまま再生したい場合は上記のような例が考えられます。
sourceタグの追加や削除を行っただけでは変更した音声は反映されず、load操作が必要になります。また、loadを行った段階で音声再生の停止が行われます。
今回作った例は主に効果音の再生に適しています。音楽を流す場合などは再生ボタンなどを別機能として持たせると良さそうです。

audioタグの操作に関するもっと詳しい情報や動作の紹介は以下のページを参考にすると良いと思います。

• HTML5のvideo/audio＋JavaScript APIテクニック
• HTML5 Audio オブジェクトを JavaScript で制御する方法

拙い紹介でしたが、アイデアがあれば面白そうなものが作れそうだったので紹介してみました。今回紹介しませんでしたが、videoタグも同様にjsで制御できるようですのでメディアを扱って様々な変な物が作れそうですね。
ただ、いきなり音声が流れるのも困るので、作る物にもよりますが音声のオンオフ機能を付けたりする必要はありそうです。
最近趣味で変な物を作ってなかったのでこの記事を書いたのを機に何か作ってみようかなというやる気が湧いて来ました。

ステップ・バイ・ステップ？Gitユーザ

みなさんこんにちは Nashioです．

今回はGit講座第2回ということで，Git中級編を紹介して行きたいと思います．
まだ初心者という人は前回記事を見てくださいね．

Git中級編

前回はGit入門編ということで基本的なGitの使い方について紹介をしました．
Git中級編では，主にブランチの使い方について紹介をして行きたいと思います．

ソフトウェア開発では，ひとつのソフトウェアに対して複数の人間が関わって開発を行なっていきます．
その際，複数の人間が同時に別々の機能の追加を行ったり，バグの修正を行うようなケースはよく起こります．

このような並行して複数の機能追加や修正を行うためのバージョン管理支援のために，Gitにはブランチという機能が備わっています．

ブランチとは

ブランチとは，更新の履歴を分岐して記録していくための機能です．

分岐したブランチは他のブランチの変更の影響を受けないため，並行して複数の変更を行うことが可能になります．

また，分岐したブランチは他のブランチに合体(マージ)することで一つのブランチにまとめることができます．

上の図は作業のイメージです．

チームのメンバーは他の人の作業に影響を与えないためにメインのブランチの②の状態から自分の作業用のブランチを作成します．

このことを「ブランチを切る」という様に言います．(田胡研では，他はしらん)

そして作業終了後メインのブランチにマージすることで変更を追加することができます．
この様に作業することで，他のメンバーの作業に影響を与えず，さらに追加した履歴を残すことにより，バグが出た時の調査・修正が楽になります．

実際にやってみた

では，実際ブランチを使ったGitの運用を行なってみましょう．
ブランチを切る前の状態はmasterブランチと呼ばれ，そこがメインのブランチとなります．
この状態からGitのディレクトリ内で以下のコマンドを打ってみましょう．

$ git checkout -b [ブランチ名]

このコマンドを打つ事によって，入力したブランチ名で作業用のブランチを作成し，そのブランチの状態に切り替えることができます．
一度作成をしたブランチは消さない限り残るのでこのコマンドは最初の一度だけで大丈夫です．

このあとは，普段通り作業をし，コミットをします．

さて，更新履歴をリモートリポジトリへpushする際には少し注意が必要です．
pushは以下のコマンドで行うことが出来ましたね．

$ git push origin [ブランチ名]

このコマンドを打つ事によって，originの後ろで指定したブランチ名でpushをします．
ブランチ名をきちんと指定しないとめんどくさいことになるので気をつけてくださいね．

これでリモートリポジトリにブランチを登録することが出来ました．
これ以降は，

$ git checkout [ブランチ名]

のコマンドでブランチの切り替えが行える様になります．

また，リモートリポジトリに登録されているブランチについても，状態をpullしてくることによって，他のメンバーも見ることができます．

では続いて，ブランチのマージを行なってみましょう．
今回はmasterブランチにマージをしてみます．

ブランチで作業をし，変更履歴をコミットしたら，まずmasterブランチへ移動しましょう．
masterブランチへ移動したら，以下のコマンドでマージを行います．

$ git merge --no-ff [ブランチ名] -m "マージメッセージ"

上記のコマンドで指定したブランチをmasterブランチにマージすることができます． ちなみにですが，--no-ff オプションは履歴にブランチが存在した情報を残すことができるオプションです． 個人的にはこの方がひと目で変更がわかるのでオススメです．

さあ，これでローカルリポジトリでは，マージが完了しました．
リモートリポジトリにpushをすることで完了です．

残りは後処理です．
ローカルリポジトリのブランチの削除方法は

$ git branch -d [ブランチ名]

これでローカルのブランチが削除されます．
もちろん削除するブランチの状態や変更履歴がある場合ではできませんよ？

リモートリポジトリのブランチの削除方法は

$ git push origin :[ブランチ名]

これでリモートのブランチが削除されます．

おわりに

今回はブランチについて記事を書きました．

ブランチの使い方は様々な形があると思います．

ここに書いただけではないので興味がある方は自分で調べてみてくださいね．

JavaScriptの関数実行タイミングについて

B4のktaroです.

２回目の投稿になります。今回はJavaScriptの関数実行タイミングについての記事を書こうと思います。

では、さっそく・・・

JavaScriptにはいくつかの関数定義方法があります.

一つ目は、

function hoge(){}     

二つ目は、

var fuga = function(){};     

今回はこの二つの関数について話をしたいと思います。

まず一つ目の関数を実行させてみたいと思います。

 hoge();
 function hoge(){
  alert('ふぇぇ');
 }

「ふぇぇ」とアラートで表示されました。 ここで、「なんで関数定義より前で実行しているのにアラートが表示されたんだ？」と思った方。 JavaScriptには、ホスティング(巻き上げ)という機能があり、変数や関数がトップに巻き上げられるのため、関数が実行できたというわけです。

では次に、二つ目のソースコードをホスティングを利用して実行してみます。

fuga();
var fuga = function(){
 alert('ふぇぇ');
};

今回は実行されずに、コンソールにエラーが表示されてしましました。

先ほど記述したホスティングは変数や関数を巻き上げます。つまり今回のソースコードは、

var fuga;
fuga();
fuga = function(){
 alert('ふぇぇ');
};

というソースコードと同じになります。これでは、関数を実行することができません。

今回のように、JavaScriptには関数実行のタイミングが関数の定義の仕方によって異なります。

JavaScriptで関数を定義する際は、実行のタイミングをしっかり考えてから定義しましょう。今回は以上で終わります。ありがとうございました。

田胡研日常風景集-その①-

どうも前回の投稿で休んでしまいましたwakaです(＾＾；；
申し訳ないｍ(_ _)ｍ

さて今回は、技術的なものでなく普段の田胡研の風景の一部を紹介していきたいと思います。
その1つして、週1で行われる各プロジェクトのミーティングの風景になります。

↓ホームサーバ班のミーティング風景です。
　　この写真は、外部発表に向けてのプレゼンの練習をしているところです。

プレゼン練習の他にも、現在の作業の進捗の報告したり、相談を行ったりしています。
それによって先生からダメ出しをいただいたり、フィードバックをいただいたりして今後につなげていきます。

以上、こんな感じでミーティングを行っています。


最後に、今日初入荷した一平ちゃんのピザマヨ味の人柱になってみたので感想を残して置きたいと思います。

・・・・・すごく焼きそばではなかったです。
味は普通にいけます。

作る。田胡研を支えるサービス！

こんにちはmozukuです。暑過ぎて身体がとろけてしまいそうですね。こんな時こそ研究室に行きましょう！冷房うれしい！！！！

さて今回は、研究室での活動を支えてくれている便利なサービスを紹介します。

「TagoPaste」

• どんな時につかうか？
• プログラムのソースを共有したい。
• メモを共有したい
• コマンドの出力を共有したい。

そういったことを解消してくれるのがこのＴａｇｏＰａｓｔｅです。また、このサービスは研究室のサーバで動いており、外部からの閲覧等を受けないため、どんなものでも共有できるという利点があります！まさか、外部サービスに重要なデータとか置いたりしてませんよね？

どんな感じで活用しているか？

どうやって活用されているのか。自分の活用事例を例に簡単に紹介します。今回は遊びで作ったプログラムがこんな形で扱われるよ。って感じです。

これはCSVのデータをいい感じにJSONに書き変えてくれるプログラムをTagoPasteで共有したものです。私が共有した時にはjQueryのライブラリが必要なコードでした。このプログラムのソースの共有を見てfuya先輩がコードを改善してくれたものが以下のものです。

ｊQureyのライブラリが不要になって、プログラムのソースも短くきれいになりました！

こうやって大げさに共有する必要までも無いものを簡単に共有しています！

他にもショートコーディングを行ったり、もっと大事な物を共有したりと言った用途で使われています。

と、今回はここまで！他にも研究室では情報共有のためのwikiやプログラムのバージョン管理を行えるgitなどより快適に活動するためのサービスの充実を図っています！誰か他のサービスの紹介もしてくれないかな―（他人任せ

やっぱり長く過ごす研究室が快適だと嬉しいですね。

以上mozukuでした！（快適好きなのに自分の部屋が汚いのはどうして？あ、あまり部屋にいないですし…（震え声

2回目の登場Nashioです．

少し技術よりの話や難しい話が続いているので，趣向を変えて田胡研の日常についてのお話をしたいと思います．

スイーツ田胡研！！

スイーツ田胡研とは，田胡・柴田研究室で行われている売店コーナーです．

みんなで協力し，ご飯系・カップ麺系・駄菓子・飲み物・アイスなどを入荷し，販売を行なっています．

常に何らかの食料・飲料品がおいてあり，外へ買いに行く手間が省けます．

また，売り上げで研究室の日用品，消耗品等の備品購入をしています．

左は販売コーナーの写真です．
食べ物系の現在の売り上げナンバーワンはカップヌードルのカレー味ですね．

右は入荷時の写真です．
飲み物は協力をして大量入荷を行なっています．
飲み物系の現在の売り上げナンバーワンは午後の紅茶ミルクティーですね．

スイーツ田胡研はみなさん購入可能なので研究室に立ち寄った際はぜひご利用くださいね．

おわりに

このように田胡・柴田研究室では，研究環境を整えるためにさまざまな活動を行なっています．

今回は生活環境編でしたが，他にも勉強会やイベントなどを行なっているので，それも紹介していけたらいいなと思っています．

いかおぱで始める、Perlスクリプティング

担当日をド忘れして遅刻しました、Tsukamotoです。
研究室内の記事が欲しいと言われていましたが、田胡研力低めなので研究室外のネタ記事を書きます。

今回は、Perl学習者の間ではちょっと有名なスクリプト
「いかにして効率よく大量の◯っぱい画像をダウンロードするか」（いかおぱ）スクリプトを紹介します。

研究室での就職活動

皆さん、就職活動順調でしょうか？

私はまぁまぁですかね・・・。
エントリーシート＆履歴書の記入はとても大変ですよね。
私はもともと文章を書くことが苦手なので、記入している内容が伝わらないことがたくさんありました。

研究室では先生にエントリーシートや履歴書を添削してもらうことが多いです。
文章力は就職活動以外でも使うので今のうちに鍛えましょう！

研究室にいくことで、自分の思ってた以上に学ぶことがありました。

以上です。
ありがとうございました。

いろいろなLinux ディストリビューション!

どうもUchiyamaです。

今回はLinuxの有名なディストリビューションをいくつか紹介しようと思います！

そもそもLinuxとは、UnixライクなOSであり、デスクトップでの使用だけではなくサーバや様々な組み込みシステムなどのあらゆる用途で使用されています。
このLinuxを一般利用者がインストールしたり利用できるようにまとめたものを、ディストリビューションといいます。

大きく2つ、Debian系とRed Hat系に分かれており、それぞれ紹介していきます。

Debian系
元々、ボランティアチームが立ち上げたプロジェクトで自由思想の理念を持つ。
UbuntuやKNOPPIXといったディストリビューションのベースとなっている。

• Debian GNU/Linux
•  完全に自由なOSを目指して開発された汎用Linuxディストリビューション。
•  開発されたソフトウェアやパッケージが豊富なのが特徴。らしい。

•  Ubuntu
• 開発目標は「誰にでも使いやすい最新かつ安定したOS」を提供すること
• もっともポピュラーといわれている。
• 斡旋機にインストールされているのはこれ！(なはず）

• KNOPPIX
• CDから起動できるOS！
• パソコンに接続されたハードウエアの認識機能に優れている
• Windowsさんが起動しなくなった時にこいつを使ってデータ救出したのは良い思い出...

これらのほかにもいろいろありますが、Ubuntuの派生ディストリビューションはバリエーション豊富過ぎて大変なことになってます。
それほどUbuntuがポピュラーということですね！←適当

Red Hat系
Debianと違い、企業に向けた商業としての理念を持っている。

• Red Hat Enterprise Linux
•  レッドハットによる有料サポートを含む企業向け。
•  RHELとよく略される
•  2003年に無料で使えサポートを受けられたRed Hat Linuxの開発を終了
• Fedora
•  Red Hat Linuxの後継として立ち上がったプロジェクト。
•  上記のRHELの先行開発OSのような立ち位置であり、安定性に欠ける(？)

• Cent OS
• Fedoraは安定性に欠けるため、RHELから商標、商用パッケージ等を含めずにリビルドしたクローンOS
• CentOSの主要なターゲットは、レッドハットのサポートが不要な企業である。
• レンタルサーバなど、サーバによく用いられる。

Red Hatは本来企業向けであるため、Ubuntuのような有名さはないですが、サーバ用途ではCent OSが支持を集めている気がします。(気のせいですかね？)

これ以外にもたくさんのディストリビューションがありますが、個人的に有名どころを挙げてみました。
ちなみにUchiyamaのおすすめはCent OSさんです！

一言でLinuxと言ってもいろいろありますね！
おしまい！

Eclipseのデバッグ

こんにちは、小林です。
Javaプログラム作成の際のツールとしてとても役に立つEclipse
今回は、そのEclipseが持つ機能の一つのデバッガー機能を紹介します。

Cloud9を使ってみよう

こんにちはtyadです。今日はオンライン統合開発環境であるCloud9を紹介します！

Cloud9とは

Cloud9とは、JavascriptやNode.jsのアプリケーションのための統合開発環境です。
HTML、CSS、PHP、Java、Rudyなど様々な言語にも対応しています。
Cloud9 IDEのサイトにサインアップし、オンラインで利用できますが、
今回はubuntuでローカル環境に構築する方法を紹介します。

はじめてみよう、ハイブリットアプリのススメ

実は生まれて初めてのブログになります、Tsukamotoです。
人気技術の知識では皆に鼻で笑われて終わりなので、ややマイナーなところを攻めていこうと思います。

今回紹介したいのはAndroid、iOS、Win8アプリを、HTML5で作る、ハイブリットアプリ開発と呼ばれるものです。

就職活動のススメ

どうもB4のktarouです。
今回は数ヶ月前に就活戦士を終えた私が、田胡研流就職活動+我流就職活動を後輩たちに布教し、内定を勝ち取ってもらう為の記事を書こうと思います。

1. マニュアル本なんて金の無駄。研究室に行こう！
   　就職活動が始まると、各社が様々な就職活動マニュアル本を出版しますが正直言って必要ありません。(あくまでも個人的意見)
   マニュアル本なんて読まなくても、研究室という強い後ろ盾があります。研究室は全力で活用すべきです。
   ちなみにマニュアル本を買わなかった私は、同期の友人に「就活始まったのに読んでないの！？」と罵倒されましたが、マニュアル本をがっつり読んだ友人より早く就職活動を終えました。
2. 足より頭を使え！研究室に行こう！
   　就職活動が解禁になると、各社が大きな合同説明会を開きます。が、会場はとてつもなく広く、時間も限られ、恐ろしいほど勧誘されます。
   私たちは情報系大学生です。合同説明会なんて行かずとも、インターネットという親友がいます。インターネットはすごいです。なんでも知ってます。時間も体力も消費する事なく、情報を与えてくれます。
   情報を制するものが就職活動を制するのです。
3. 情報交換は必須。研究室に行こう！
   　情報交換は非常に重要です。これをしなければ就職活動は進みません。研究室に行くと、周りは前就活戦士の先輩と現就活戦士たちです。いろいろな事が聞けます。
   「就活のライバルなのに情報交換なんかするかよっ！！」って思った方。それは大きな間違いです。就職活動は縁です。誰かに情報を与えたからと言って、あなたの就職活動に全く影響しません。
   研究室に行って多くの人と情報交換をしましょう。
4. 先生に履歴書を見ていただくために研究室に行こう！
   　先生に履歴書を見ていただく事は非常に有効です。一人で訳のわからない自己PRや志望理由を書いていては、書類審査の時点で落ちてしまいます。先生は親切丁寧に添削してくださいます。
   研究室に来て先生や先輩に添削をして頂きましょう。
5. 知識を溜め込むために研究室に行こう！
   　研究室には、ギークな先輩たちがたくさんいます。いろいろな技術の情報が飛び交っていて自分の知識になります。溜め込んだ知識は、面接で非常に役立ちます。知識さえあれば技術がなくても、めちゃくちゃギークぶれます。しかし、技術がないまま入社すると大変なので、がんばって勉強しましょう。(これは自分にも言えます)
6. 学歴なんて気にするな！研究室に行こう！
   　学歴を気にしていては、就職活動が進みません。私たちは理系です。何かしらの武器があるはずです。この武器を全力で利用しましょう。有名私立大学ぐらいになら余裕で勝てます。ただ説明会の質問の時に「東◯大学から来ました」という人がいると会場の空気が変わります。

まだまだありますが、長くなりそうなので、終わります。

続きが聞きたい人は、研究室に来よう！！

田胡研の勉強会(6月5日)

こんにちは！

B4のtyadです。

今回は田胡研の勉強会でのことを紹介したいと思います。

勉強会

田胡研では定期的に、院生の方々が勉強会を開催してくださいます。

下の写真は今日(6月5日)に開催された勉強会の様子です。

今回の勉強会では院生の山口さんが紹介してくださった、
・HTMLのcontenteditable属性
・JavaScriptのexecCommand
について書きたいと思います。

contenteditable属性

この値をtrueにするとHTMLのコンテンツを直接編集することができます。

まずはこんな感じでHTMLを書いてみましょう。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <style>
    #editor{
      height: 300px;
      width: 600px;
      border: solid 1px;
    }
  </style>
</head>
<body>
  <div id="editor" contenteditable="true"></div>
</body>
</html>

すると下の枠の中に文字がうてると思います。

これがcontenteditableです。

execCommand

これを使うことで、上記のcontenteditableをもっと便利に活用できます。

こんな感じでHTMLファイルを作成。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <style>
    #editor{
      height: 300px;
      width: 600px;
      border: solid 1px;
    }
  </style>
</head>
<body>
  <div id="editor" contenteditable="true"></div>
  <div id="options">
    <button onclick='document.execCommand("bold");'>太字にする</button>
  </div>
</body>
</html>

枠の下の「太字」ボタンを押したあと枠の中を編集すると太字になります。

これはexecCommandに"bold"を指定して使った場合です。

"blod"以外にもコマンドはあるので使ってみてください。

まとめ

勉強会ではこの2つにスクリプトを加えて、リッチテキストエディターとしての動作を実装していました。 山口さん、勉強になりました。ありがとうございました。

2週間でわかる？Git入門

B4に進級しましたNashioです．

気がついたらもう半年近く更新が止まってましたね．

私の前回記事はこれですね．

３年生の研究室見学もそろそろ始まるようなのでこの辺りでアピールのために更新して行きたいと思います．

記念すべき？第１回はタイトルどおりGit入門です．(もちろん２週間はかけません)

Gitとは

「プログラムのソースコードなどの変更履歴を記録・追跡するための分散型バージョン管理システムである(Wikipedia参照)」だそうです．

Gitでは，チームで開発をする際のファイル共有やバージョン管理をすることができます．
変更の差分を見たり，現行バージョンを保ったまま次期バージョンの開発を行うことができます．(それだけじゃないですけでね)

有名なGitのGUIとしてGitHubが挙げられます．田胡・柴田研究室では，プライベートなGitGUIとしてGitLabというGitHubライクなGUIパッケージを使用しています．
初めて使う場合はGitHubの登録をしてみるといいかもしれません．

それでは，ここからGit使い方入門編へ行きましょう．

Gitのインストール

まずはGitが使用出来る状態を作りましょう．

Mac

   Macを買いましょう．

Linux

   yumとかaptを使ってgitをインストールしましょう．

Windows

   cygwinを入れてGitをインストールしましょう．

もちろん方法はこれだけではありませんが，これでできるようになりました．

Gitの使い方

ユーザ情報の登録

まずは自分の情報を登録しましょう．
設定ファイルを直接いじる方法もあるのですが，ここではコマンドを使って登録してみましょう．
何らかのターミナルを開いて以下のコマンドを実行しましょう．

$ git config --global user.name [ユーザ名]
$ git config --global user.email [Eメールアドレス]

このコマンドを打つことで情報が登録されます．

基本コマンド

ローカルリポジトリのトップで以下のコマンドを実行します．

$ git clone 〜　　//〜にあるリモートリポジトリからプロジェクトをクローン(ダウンロード？する)
$ git pull origin 〜　　//リモートリポジトリの〜ブランチ(指定分岐先)の情報を取得
$ git add .　　//ファイル・ディレクトリを新規追加
$ git rm 〜　　//ファイルを削除(--cacheオブションをつけるとファイル自体は削除されない)
$ git commit -am 'コメント'　　//変更の記録(コメントをつけて更新内容がわかるように)
$ git push origin 〜　　//リモートリポジトリの〜ブランチに変更をアップロード
$ git status　　//現在の状態を確認(コミットしているか，Pushしているかなど)

上記のコマンドを駆使することによって以下の図ような形でソースコード類を管理することができます．

実際にやってみた

では実際にどのようにコマンドを使うか見てみましょう．

まずはリモートリポジトリからクローンをします．

$ git clone git@git.com:test/test.git

これでtestディレクトリがクローンされてきたはずです．(実際に存在はしません)

次はクローンされてきたtestディレクトリに入り，新しいファイルを作りましょう．

$ cd test
$ touch README

これでREADMEというファイルが作成されました．

このままでは，READMEがGitに登録されていないのでaddをしましょう．

$ git add .

これでディレクトリ以下のファイルがGitに登録されました．

addコマンドはファイルを新規で追加した時のみやればOKです．

ローカルリポジトリを変更したので変更の記録しましょう．

$ git commit -am 'add README'

これで変更を記録することが出来ました．コミットメッセージは変更内容がわかるように記述しましょう．

最後にリモートブランチに変更をアップロードしましょう．

$ git push origin master

これでmasterブランチ(メインとなるブランチ)にPushされました．

また，他の人が行った変更を取得する際は，

$ git pull origin master

これでmasterブランチの変更を取得することができます．

終わりに

今回はGit入門ということで基本的な使い方を簡単に紹介しました．

しかしながら，Gitの機能はこんなものではなくもっと多くのコマンドが存在します．
それぞれ便利なものなので，今後中級編，Tips集などで誰かが書いてくれるかもしれないですね．