ドイツのクリスマス

この記事はAdvent Calendar 2015 6日目の記事です。

http://www.adventar.org/calendars/1034

こんにちはとはじめましてutaです!

みんなの勉強になるようなことは書けません…
この機会に何回か経験したドイツのクリスマスの話をしたい思いました。
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
10月から1月までクリスマス気分

クリスマスといったらキリスト教では一番大切な祭りで、
ドイツ人が一番楽しみにしています!(家族全員集って、プレゼントもある!)

10月の終わり頃、夏から冬時間に変わると、
ドイツ人はクリスマステンションになります。

長くなるので11月を軽くまとめると、
聖人の祭りがありいつかあって、みんなバームクーヘンを食べ過ぎて太ります。

あっという間に12月!
Advent CalendarのAdventの意味は”参る”でイエス様のことです。
Advent Calendarにはチョコレートが入っていて、
カレンダーを見ればその人の性格がわるといいます。
毎日扉をひとつ開ける子がいれば、初日に扉を全部あける者も…

12月6日がクリスマス!うそです。
実はドイツにはサンタさんに似た人がいます。服もひげも一緒で名前はニコラウス。
簡単に説明すると、いい人だったので聖人になったのです。
コンビで現れ、相方のKnecht Ruprecht(ブラックサンタ的存在)は悪い子をおしおきします。

子供たちは6日の前の晩、家の外に長靴片方を置きます。
朝には菓子が詰まっていて、6日が過ぎるとさらにクリスマステンションがあがります。

クリスマスツリーですが、もちろん本物!
迷うのはどの種類かです!決めたら森にいきます。ちなみに12月の火事の主な原因はツリーです…

そろそろクリスマスイブです。
ドイツはアメリカと違って24日のイブにプレゼントをあけます。

親から子供へのプレゼントは平均で3万だそうです。
お年玉がないことを考えればリーズナブル、
ただしプレゼントは大人になってももらえます!

25日と26日が本番のクリスマス
みんな仲良く家で家族とともに過ごします。
でも実はお店も何もあいていないので家にいるしかないのです。唯一開いているのは教会。

正式にクリスマスが終わるのは1月6日
とにかくドイツのクリスマスはこの記事に収まらないほど長いのです…

最後にクリスマスで大切なのは、
アメリカのクリスマス映画を見るとだいたい:
主人公が財産をなくし、愛せる人がいることが一番の恵みと築くパターンです。

そう!クリスマスの主役はけしてプレゼントではなく、
クリスマス期間をともに過ごす家族です!

私には、日本のお盆とお正月を合体させたイメージがあります。
みんなも年末年始に家族に会って、楽しい期間を過ごせるよう心から願っています。


Frohe Weihnachten und einen guten Rutsch ins neue Jahr!

WebPack,Grunt,Gulpの違いについて

この記事はAdvent Calendar 2015 7日目の記事です。
http://www.adventar.org/calendars/1034

44です。今回は、フロントエンド界隈の勉強会でよく「WebPack,Grunt,Gulp」について調べてみました。
私はWebPackなどを「複雑化したフロントエンド開発をいい感じにしてくれるツール」というぐらいの認識でした。

WebPack,Grunt,Gulpは同じようなツールだと思っていました。一つ一つどういったものか説明していきたいと思います。

WebPackとは?

WebPackとはフロントエンドの”依存関係解決”ツールです。

BモジュールはAモジュールを利用している場合、BモジュールはAモジュールに依存しているということになります。規模が大きくなればなるほどモジュールは増え複雑化してきます。複数のJavaScriptファイルを1つにまとめるためのツールがWebPackです。

WebPackの特徴でloaderを使うとHTML,CSS,JSON,ES6など色々な形式のファイルを読み込むことができます。

Gulp,Gruntとは?

最近のフロントエンド開発では、Sassのコンパイル、JavaScriptファイルの依存解決、画像の圧縮、ブラウザの自動更新など開発するうえでの作業(タスク)が増えてきました。全てを一つ一つ手作業でしていると開発にかかる時間が増えるので,その作業を自動化するツールが「Glup,Grunt」です。

Gulp,Gruntの違い

記述方法

GulpはJavaScript形式、GruntはJSON形式で記述します。
GulpはJavaScript形式で書けるので書きやすいかもしれません。

処理方法

Gulp,GruntともにNode.jsで書かれているのですが、Gulpは非同期処理、Gruntは同期処理となってます。Gulpは並列でタスクを実行できるのでGruntに比べ処理時間が短いようです。

最後に

まだWebPack,Gulp,Gruntなどを使ったことはないのですが、これを機に触ってみようと思っています。次回は「flux」について調べようと思います。
最後まで読んでいただきありがとうございました。

dockerとコンテナ技術について

この記事はAdvent Calendar 2015 4日目の記事です。

http://www.adventar.org/calendars/1034

まずは

アドベントカレンダーに書かれているのは、「docker + xhyveについて」なんですがDocker触ってみよう!– 萌え萌えブログ///キャワワ(^^)/でdockerの説明があんまりなかったので、今回はdockerについてだけ書いていこうと思います。
(書こうとしていたxhyveについても仕組みとかその辺は一切触れず、立ち上げてみた程度なので別にいいでしょう。。。)

dockerとは

最近流行りのこのツールですが、そこまで難しいものではないです。
一言で言うとコンテナを動かすツールです。
ちなみに今回重要なキーワードは、

  • コンテナ(Linux Namespace)
  • 仮想化では無い

ぐらいです。

仮想化ではなく、コンテナ化

よく間違えられます、dockerは仮想化してません。
なぜ間違えるのか、予想するにホストとは別の実行環境として動いているからそう勘違いしてしまうのではないのかなと思います。
だって、仮想化もコンテナ化も必要なプロセスが動いていて、十分なパフォーマンスを出していればそこまで気にすることではないのだから。

どこが違う?

仮想化は、その名の通り仮想的な環境を作ります。仮想的なハードウェアを作りその上で別のシステムを動かします。
ハードディスクも、メモリもプロセッサも仮想的に動かします。簡単に言うとこんな感じです、わからなければ調べてください。(これ以上詳しく書けないです)

コンテナ化は?
別の言い方をすると隔離化です。
ただし、CPUもメモリもディスクも共通のものを使います。
ん?それだと隔離できないんじゃ?
大丈夫です。LinuxのカーネルにNamescpaceという機能があり、これを使うと別の名前空間作りリソースを隔離することができます。
これがコンテナ化の大事なところです。これ無しだとコンテナ化は行えないと言っても間違いではないと思います。

コンテナ化の特徴

さて、先ほどコンテナ化は名前空間を作りリソースを隔離すると言いました。また、ハードウェアなどは共通のものを使うとも。
名前空間が違うとどうなるか。アプリケーションの実行領域だけが違ってきます。(プロセスの隔離)
つまり互いにアプリケーションが干渉できなくなります。名前空間が変わると全プロセスを表示しても他の名前空間のプロセスは見えなくなります。

例えば、
サーバーの用途としては、アプリケーションでサービスの提供ですよね?
sshd, httpd, mysql...etc
これらが別々の空間で動かせたら、不正アクセスされた時もそのプロセスにしか影響が出なくなります。
ユーザによる権限設定だけでなく、隔離することによってセキュリティを高めることができます。
実際にどう隔離されるのか見ていきましょう。

dockerを使ってみる

実際に使ってみれば多分わかります。
Linux(CentOS6)があるというのが前提です。

dockerのインストール

epelレポジトリを追加して、
yum install -y docker-io
これで入ります。

コンテナ化されてるか確認する

さっきから言ってるコンテナ化、
実際に体験してどのような挙動をするかみてみましょう。

結果をみてください。
プロセスがpsしか見えません。これが隔離化です。
ホスト側のLinuxからはプロセスは全て見えてますよね?

以上です。
さすがにこれだけではちょっとわからないかも…
とか思ってますが結構長くなりましたのでここで一旦切ります。
わからない人はとりあえず、
yum install -y docker-ioとかやってdocker run -it centosってすれば答えが見えてくると思います。

最後まで読んでくださった方ありがとうございます。

参考にしたページ

http://gihyo.jp/admin/serial/01/linux_containers/0002
http://gihyo.jp/admin/serial/01/linux_containers/0016
http://qiita.com/zwirky/items/991f61a231f4e198a320
https://ja.wikipedia.org/wiki/%E4%BB%AE%E6%83%B3%E5%8C%96

Docker触ってみよう!– 萌え萌えブログ///キャワワ(^^)/

この記事はAdvent Calendar 2015 3日目の記事です。

http://www.adventar.org/calendars/1034

こんにちは!みなさん一年ぶりです!jkです!!
今回はDockerを導入してみたいと思います!

まずDockerって何?ってことなんですが
仮想の技術の一つだそうですが…
私自身Dockerを使ったことがないので
詳しい説明は後続の人にお願いして、
勉強できる環境の構築方法だけ記事にしたいと思います!
(ということで後続の人お願いします!)

では環境の構築なんですが
どうせならwindowsで簡単に導入したいなぁーと思うので
Kitematic
これを入れてみたいと思います!

Kitematicとは
もともとDockerはコマンドラインツールしか用意されていなかったのですが
それをGUIで動かせれるようにしたツールらしいです

これは便利!
文字ではなくGUIで操作できるほうがわかりやすいはず!!

ではでは実際にインストールしてみましょう!
まずhttps://www.docker.com/docker-toolboxここから
Download(Windows)を選択!
ちゃんとMacも用意されているのでMacの方も安心して使えますね!

ダウンロードが終わったら
ダウンロードした実行ファイルを開いて
後はYes連打でインストールできると思います!

インストールが終わると
Kitematic (Alpha)と
Docker Quickstart Terminal
の二つのショーカットができると思うので
Kitematic (Alpha)をダブルクリックしてもらうと
起動すると思います!!

Kitematicを使うには
Docker Hubにアカウント登録する必要があるので
ログイン画面のsign upからアカウント登録をしてください
login
ログインができると
さまざまなテーマが表示されるので
select
自分の使いたいテーマを選択して
createを押せば
はい!
これであなたのパソコンにもDockerが使えるように
なったはずです!!

今回は本当に導入にしか書かなかったので
詳しい使い方などについては検索してもらえれば…
(時間があれば、また書きます)

後、間違った情報などを書いてある可能性が大なので
後続の人たちに修正と加筆をお願いしたいと思います!!

ではでは、また来週!!

WebComponentsについて調べてみた

この記事はAdvent Calendar 2015 2日目の記事です。

http://www.adventar.org/calendars/1034

 

お久しぶりです、44です。

Advent Calendar2015では、単語は聞いたことがあるけどよく知らないものを調べて記事にしてみようと思います。

最近はフロントエンド界隈の勉強会によく参加しています。勉強会でたびたび「WebComponents」という言葉を耳にするので、今回は「WebComponents」についてすこし調べてみました。

WebComponentsとは?

HTML,CSS,JavaScriptをコンポーネント化(部品化)し、再利用するための仕組みです。

WebComponentsは大きく次の4つの分野から構成されています。

  • template要素(HTML Templates)
  • HTML Imports
  • Shadow DOM
  • Custom Elements

template要素(HTML Templates)

文章構造のひな形(template)をHTMLで書けます。

ページロード時点では利用されないながらも、ランタイムにインスタンス化することが可能になります。

HTML Imports

HTML Importsは外部リソースへの参照を表すlink要素を拡張し, スタイルシートやファビコン画像等に加えHTML文書の読み込みを可能とするものです。

メリット

いままでは、ある要素に対するCSSやJavaScriptを別のファイルとして書かないといけなかったのですが、HTMLファイルにまとめて記述してインポートすることができます。
HTML Importsを使うことで機能セットの観点からのコード集約が可能となります。

index.html

a.html

b.html

Shadow DOM

Shadow DOMはスクリーンに表示される要素(ツリー)ごとに「意味的な構造(model)」を「見た目の構造(view)=シャドウツリー」に再構成することで, 描画内容を自由に指定可能とします。

簡単に言うと、元のDOMをいじらずに見た目を変えることができる。ってことですね。

メリット

  • シャドウツリーにはメインのCSSスコープにぶら下がる子CSSスコープが定義され、子スコープで定義したスタイルは親のスコープには影響しないので、ローカルスコープでCSSを扱うことができる。

Custom Elements

HTMLは本質的に文書を構造化するためのものです。

オリジナルの要素、タグを作成することができる機能です。

オリジナル要素の振る舞いを設定することも可能です。

CustomElementsに独自の属性を定義できます。

メリット

  • よく使うUIなどをCustomElementsとして定義しておくことで再利用が容易になる。

 

まとめ

最近のフロントエンド開発では「コンポーネント化」、「モジュール化」といったことが注目されており、これからフロントエンドをやっていくには「WebComponents」の仕様を理解しておく必要があると感じました。

今回は、2,3時間調べれば記事書けると「WebComponents」をなめており。実際調べてみると現実はそう簡単にいかず、仕様の複雑さと知らない単語のオンパレードで心が折れましたorz

「WebComponents」に関してはまた詳しく調べたいと考えています。(記事にするとはいっていない)

 

次回は、「WebPack,Gulp,Grunt」について調べてみようと思います。

ニコニコ動画を追え!!– 萌え萌えブログ///キャワワ(^^)/

こんにちは!みなさんお久しぶりです!jkです!!
前回の投稿から大分日が経ってしまいましたが
今回、自分自身が学んだことを記事にしたいと思い筆を執らせてもらいました!

今回学んだことは”DNS”です!!
“DNS”とは
Domain Name System(ドメイン・ネーム・システム、DNS)とは、
インターネットを使った階層的な分散型データベースシステムである。
1983年に情報科学研究所 (ISI) のポール・モカペトリスとジョン・ポステルにより開発された。
現在では主にインターネット上のホスト名や電子メールに使われるドメイン名と、
IPアドレスとの対応づけを管理するために使用されている。うんたらかんた…

…難しいですね
私は”DNS”のことを全て理解しているわけではないのですが
一番大事なのは
主にインターネット上のホスト名や電子メールに使われるドメイン名と、
IPアドレスとの対応づけを管理するために使用されている。
これだと思います。
ただ、ここまでの知識だと辞書で引いたようなレベルだと思うので
少し掘り下げて説明したいと思います。

まずDNSがどういう仕組みでドメイン名とIPアドレスの対応づけを行っているかを
簡単に説明します。
それは…
「〇〇知っているやつおる?」だと思います!
これだと何を言っているんだお前は?
だと思うので詳しい説明をさせてもらいます。

DNSは”キャッシュDNSサーバ”と”権威サーバ”の二つがあり
クライアント(自分のPC)がキャッシュDNSサーバに問い合わせを行い
さらにキャッシュDNSサーバが権威サーバに問い合わせを行ってドメイン名から
IPアドレスを対応づけるのですが…
この一連の流れが
社長→部長→課長→平社員に又聞きしていって
最後に会いたい人を知る人にたどり着く感じに似ていると思います。

簡単な説明はこのぐらいで、そろそろ
自分でDNSに問い合わせを行ってみたいと思います!

ここで私が使ったのは”dig”コマンドです。
“dig”コマンドって何だ?と思われる方に簡単に説明させていただきます。
domain information groper(ドメイン情報探索ツール)
つまりDNSに対し問い合わせを行えるコマンドです!
詳しい使い方については”dig コマンド”で検索してください…

では実際に問い合わせを行ってみましょー!!
今回はタイトルにも書いてある
若者の情報発信源である”ニコニコ動画”のドメイン名を問い合わせしてみたいと思います

まずドメイン名を調べるのでグーグルでニコニコ動画を検索しましょー
それでニコニコ動画にアクセスしてもらうとurlを全部コピーしちゃいましょう
http://www.nicovideo.jp/になると思うのですが
この”nicovideo.jp”を問い合わせしてみましょう。

dig nicovideo.jp
でコマンドを打ってみてください。
するとずらずらと文字が流れてくると思います。

a01

おめでとうございます!
ニコニコ動画のドメインの問い合わせを行うことが出来たと思います。

それではANSWER SECTIONに注目してください。
202.248.110.243
と数字があると思います。
これがnicovideo.jpに対応付けされたIPアドレスです。

これでDNSにドメイン名からIPアドレスを問い合わせることができるように
なったと思います。
記事が長くなってしまったので
次回もう少し詳しいdigをつかったDNSへの問い合わせについて解説したいと思います。

空のフォルダを見つけてファイルを作る

プロジェクトをgitでバージョン管理するとき
空のフォルダがあるとその階層は監視されない問題の解決策

これで空のフォルダにemptyというファイルが作られるので追跡できるようになります。

空フォルダを探すだけならこれで出来ます

FuelPHPでSessionが使えなかった話

現在開発しているシステムで1日悩んだ問題です。

FuelPHPで開発をしているのですが、ログイン機能がつくろうとしたらSessionが使えませんでした。
Cookieは正常に動くのに、なぜかSessionだけが動かなかった。

原因はapp/config/crypt.phpが空のファイルになっていたから。

Sessionでデータを書き込む際に、

データをエンコードするみたいですが、
Crtpt.php(暗号化鍵のようなものが書かれている)ファイルが空だったので動かなかったみたいです。
エラーも何も吐かなかったのですごく悩みました。

ファイルを削除すれば自動生成されます。解決

Java・Scalaでファイルタイプ判定

新年あけましておめでとうございます。
この記事はAdvent Calendar 2014 22日目の記事です。
http://www.adventar.org/calendars/638

拡張子などというのは遠い昔にあった架空の存在だと自分は信じています。拡張子を消した画像ファイルをくろむたんに投げてもちゃんと表示できます。マジックナンバーを見ろということです。

話が飛びました。拡張子がjpgだけど中身がPNGである可能性がある画像を吐くクソサービスがあったのでそれへの対応です。画像やその他のファイルの種類を判定します。

Java向けということでggればmime-utilというのがヒットします。
http://mvnrepository.com/artifact/eu.medsea.mimeutil/mime-util/
今回はmavenで引っ張ってきます。

めでたしめでたし。

ことしもITCをよろしくお願いします。

完成 ~マッドスプリクト

この記事はAdvent Calendar 2014 19日目の記事です。
http://www.adventar.org/calendars/638

以前記事にしたAndroidアプリが完成した(ことにした)ので報告します。

スタートシグナルを作りました。
本物はこれです。
o0360064112345485350
これを疑似的にAndroid端末で使えるようにしようと思いました。

Androidアプリでこれをやるメリットはというと、
1.使いたいときにすぐに用意出来る
2.音を鳴らせる
この二点です。画像のようなものは用意することが難しいですし、できたとしても音がならないものもあります。
サーキットはあってもスタートシグナルを置いてあるお店というのはほとんどありません。
友達と攻めに行くときは誰かの声を合図にするのですが、(誰が言うんだろう……)みたいにお互い気を使いあってなかなか気持ちよくスタートできません。
そんな時役に立つのがトナカイの鼻ではなくAndroid端末で用意するスタートシグナルってわけですね。

では、ソースコードを載せます……と言いたいところですが、部分的に未完成で、具体的にはカウント中の音が鳴りません。
ですのでソースコードはMainActivityだけ載せます。

今回はAndroidアプリの作り方をさわりだけやってみるってことで始めたので一応その意義は達成できたと思ってます。
展覧会までには完成させたいですね。

僕もAdvent Calenderとして書き込むのはこれが最後になります。
クリスマスといえば……思い出されるのは、鮮血の結末……。
「中に誰もいませんよ」

……クリスマスは『アマガミ』を見て過ごそう。

みなさんよいお年を。