先日2012年10月23日にHTML5とか勉強会に参加してきました！ 今回の勉強会は、先日行われたHTML5カンファレンス2012の内容をもう一度(reloaded)再現しよう！ということで、人気の高かった講演会を少し短縮してもう一度行おう！という主旨で行われました。

僕自身HTML5カンファレンス2012は知っていたのですが、予定の都合上行けず、とてもよい機会でした。

HTML5カンファレンス2012についてはこちら >> HTML5 Conference 2012

第32回HTML5とか勉強会のページはこちら >> 第32回HTML5とか勉強会

今回の勉強会のアジェンダは以下になります。

「更に進化する CSS の表現力と新しい Web ツール」
轟 啓介 – アドビシステムズ株式会社

「パララックスでレスポンシブでjQuery Mobileなサイトのつくりかた」
白石 俊平 – 株式会社シーエー・モバイル

「jQuery Mobileカスタマイズ自由自在 ver1.2」
吉川 徹 – 株式会社シーエー・モバイル

それぞれの発表資料は以下になります。

「更に進化する CSS の表現力と新しい Web ツール」
轟 啓介 – アドビシステムズ株式会社

>> http://www.slideshare.net/keisuke322/css-web-reloaded

「パララックスでレスポンシブでjQuery Mobileなサイトのつくりかた」
白石 俊平 – 株式会社シーエー・モバイル

>> http://www.slideshare.net/shumpei/j-query-mobile-14227660

「jQuery Mobileカスタマイズ自由自在 ver1.2」
吉川 徹 – 株式会社シーエー・モバイル

>> http://www.slideshare.net/yoshikawa_t/jquery-mobile-14844564

感想

今回初めてHTML5とか勉強会に参加させていただいたのですが、とても刺激的で面白い勉強会でした。 早速AdobeのAdobe Edge Animate 10とAdobe Edge Codeをダウンロードさせていただいてこれからちょっと使ってみようかと思っているところですｗ

Adobe製品のダウンロードは以下から行うことが出来ます。

>> http://html.adobe.com/jp/

Edge Codeの拡張はこちらから

>> https://github.com/adobe/brackets/wiki

パララックスなサイト、今流行っているのでとても勉強になりました。 白石さんチームがパララックスなサイトを作成したときに作られたプラグインが便利そう。 こちら >> ScrollTween.js

定形タスクを自動化するgrunt.jsが便利そう。いつか導入する。

jQueryMobileはむか〜し(jQueryMobileがまだv1にも満たないとき)に使ったことがあったのですが、使いづらい印象がすごかったです。 ただ今回のセミナーで説明された部分を意識すると結構使いやすくなるんじゃないかなぁと。 慣れてしまえば普通に作るよりも圧倒的に早くなりそうなので。 jQueryMobileを使って独自フレームワークを作る勢いでカスタマイズするところに面白さを感じましたｗ

最後に

とても参考になる勉強会でした。 やはり勉強会のメリットは開発者さんの開発環境などを学ぶことが出来るところですね。 自分はFacebookアプリをよく作成するので何か手伝えることがあれば手伝ってみたいなぁと思いました。

前回このブログでもお伝えしたzencodingですが、そのzencodingが新しく名前を変えて「Emmet」というプラグインになるそうです。

まだ正式にリリースしているわけではありませんが、既に使うことが可能なので先駆けでちょっと試してみましょう！

ちなみに既にzencodingは使ったことがある前提でお話するのでもし使ったことがなければ下記の記事を参考にしてみてください。

>> 知らないなら損をしている！HTMLコーディングスピード3倍に！？ zencoding 導入方法まとめ

それでは始めましょう。

EmmetをAptanaにインストール

それでは早速ですが、Aptanaにインストールしてみましょう。 もちろんEclipseでも同様の手順を踏むことでインストールすることが出来ます。

メニューの「Help」→「Install New Software…」をクリックすると以下の画面が出てくるので、「 http://emmet.io/eclipse/updates/ 」と入力する。 以下の画面のようにチェックを入れたら「Next」をクリック

「Next」→「Finish」をクリックでインストール開始。インストール出来たらAptanaを再起動しましょう。

これでインストール完了しました！ メニューに「Emmet」が追加されていることだと思います。

新しい機能を試してみる

それでは早速新しい機能を試してみましょう！

例えば以下のようなHTMLを打ちたいとします。

<div id="wrapper">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <div class="start"></div>
</div>

ZenCoding：

div#wrapper+(ul>(li*4)+div.start)

Emmet：

div#wrapper>ul>li*4^div.start

「^」を使うことでいわゆる階層が1つ上がります。これを用いることでスピードを落とすことなく記入することが出来ますね。

ベンダープレフィックス系のやつを一気に書く

border-radius系のプレフィックスを書くの、面倒ですよね。

そういうときは

-bdrs10

と打って展開すると

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

グラデーションなんかも次のような感じです。

lg(top,#fff,#000)

展開すると

background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#000));
background-image: -webkit-linear-gradient(#fff, #000);
background-image: -moz-linear-gradient(#fff, #000);
background-image: -o-linear-gradient(#fff, #000);
background-image: linear-gradient(#fff, #000);

超早い！

最後に

新しい名前になってパワーアップしたEmmet。 今日から僕もEmmetに乗り換えました。やはりすらすらと書ける「^」の書き方はすごいいいですね。 早速たくさん使っています。 LESSやSassなど色々ありますがやはりEmmetは最速かもしれません。 これからも動向を追っていきたいです。

参考

Emmet – github

今日10月11日でブログを毎日更新し続けて3ヶ月がたちました。

7月11日にこのブログを立ちあげました。 なぜ立ち上げたかというと、今はソーシャルメディアの時代です。 このソーシャルメディアの時代の中、ブログは最大のちからを発揮しています。

インバウンドマーケティングという言葉があるように、ソーシャルメディアをフックとしてブログにコンテンツを集約させていくマーケティング手法があります。 僕はこのインバウンドマーケティングをかなり身近で見てきました。

多くのインフルエンサー（ソーシャルメディア上で影響力の高い人）の人と話す中で、自分もソーシャルメディアの時代にしっかり発信して自分だけのメディアを持ちたい！と思ったのがこのブログを立ち上げたきっかけでした。

思えば僕自身大学に入ってソーシャルメディアを使い始め、暇さえあればTwitterを触り、暇さえあればFacebookをいじっているような、完全にソーシャルメディアにはまっていた人間でした。

ただ、その中で自分というメディアを持つことはあまり意識しておらず、発信することは心がけていたものの、ブログというものに手をつけていませんでした。

しかしやはり世の中はソーシャルメディアの時代なのです。 僕の周りで多くのインフルエンサーがいて、その人たちが発信すれば何百人、何千人の人たちに影響をもたらすことが出来る。 そんなインフルエンサーに対する憧れが強くなっていきました。

そんな中、思い立って1日で作ってしまったのがこのブログなのでした。

インフルエンサーではない僕がどうすれば多くの人に影響を与えることが出来るのか。 それを考えた結果、「毎日ブログを書き続けて発信すること」が目標になりました。

凡人であるからこそ、多くのコンテンツを配信し、出来るだけ皆の前に出す。 これがあのときの僕の答えでした。

その結果、つい数日前からなのですが、Googleからの流入が毎日100を超えるようになりました。

これは僕が毎日毎日記事を書き続け、今日に至るまでに96のコンテンツを作ったある種の結果だと思います。 またPVも最近は200PVくらい入っており、それが安定して継続しています。

7月11日の僕が下した決断は間違っていなかったのだと思います。 毎日ブログを書き続けたからこそ、普通な僕でも毎日100人以上に僕の記事を読んでもらえているのだと思います。

なんかこのブログが終わってしまいそうな書き方をしていますが、これからが本当の勝負だという気持ちでこれからも毎日書き続けていきたいと思います。

そして7月にたてた小さい目標が「1ヶ月で3000PV、つまり1日100PV」を今では普通に達成してしまっているため、次は「1ヶ月で3万PV、つまり1日3000PV」を目標に、これからもみなさんの小さな力になれるような記事を書いていきたいと思います。

それではこれからも tagamidaiki.com(たがみだいき) を何卒よろしくお願いします。

つい数日前にやっと始めたGithubですが、いまだにコマンドをたまに忘れてしまうことがあります。 なので自分メモ用として、また、みなさんへの知識共有として、ここに書いていこうと思います。 Githubの説明書って書いてありますが多分第1回で終わりそうなので続編はないだろうという予想です。

まずは、ローカルにレポジトリを作成しよう

当たり前ですが、レポジトリを作成しましょう。 以下のコマンドです。

$ mkdir testrepo
$ cd testrepo
$ git init

レポジトリが初期化出来たので中に何かファイルを入れてコミットしましょう。

$ touch README.md
$ git add README.md
$ git commit -m "first commit";

Github上にレポジトリを作成しよう

github.comにアクセスして、右上のところから「Create A New Repo」しましょう。

レポジトリ名とディスクリプションを保存すればレポジトリ作成完了します。

Github上にプッシュしよう

さきほど作成したレポジトリのURLが発行されるのでここにローカルレポジトリをaddしたあと、pushします。 早速pushしてみましょう。

$ git remote add origin https://github.com/dai199/testrepo.git
$ git push -u origin master

これをするとUsernameとPasswordをきかれるので入力しましょう。

これでGithubにファイルを追加することが出来ました！！ 実際に確認してみてください。

ファイルを追加してみよう

最後に、ファイルを追加してpushしてみましょう。

$ touch file.php
$ git add file.php
$ git commit -m "add file.php"
$ git push -u origin master

UsernameとPasswordを入力するとファイルを追加することが出来ました。

終わりに

いかがでしたでしょうか。 思ったより簡単に出来たのではないかと思います。 僕もまだまだgithub初心者なのでなんとも言えませんが、ファイルを追加したり編集したりするだけでも楽しかったです。 もっとアクティブに色々なレポジトリをforkしてpushしてみたいです。

Let’s social coding!!

HTML,CSSでレイアウトしているとき、いつも使っているブラウザで確認しているときはすごい綺麗だったのに、違うブラウザで確認すると崩れていて落ち込む、という経験をしたことがあると思います。

そういうとき、普通はHTMLやCSSを見直すのですが、どうしても面倒なときがありますよね。 そんなときに知っておくと便利なのがCSSハックです。 検索するといっぱい出てくるのですが、各種ばらばらだったりするのでこの1ページを見れば済むようにどんどん追加していこうと思います。

IE対策

<!DOCTYPE html>
<!--[if lt IE 7]><html class="ie6" lang="ja"><![endif]-->
<!--[if IE 7]><html class="ie7" lang="ja"><![endif]-->
<!--[if IE 8]><html class="ie8" lang="ja"><![endif]-->
<!--[if IE 9]><html class="ie9" lang="ja"><![endif]-->
<!--[if(gt IE 9)|!(IE)]><!-->
<html lang="ja"><!--<![endif]-->

このようにHTML要素を書いておけばIE用にCSSファイルを作らなくても、既存のCSSの好きなところで

.ie8 #commmon-place {}

のように書けばIE用にCSSを適用させることが出来ます。

Firefox

#common-place, x:-moz-any-link { color: red; }

Firefox 3.0以上

#common-place, x:-moz-any-link, x:default { color: red; }

Safari2-3

html[xmlns*=""] body:last-child #common-place { color: red; }

Safari2-3.1

html[xmlns*=""]:root #common-place { color: red; }

Safari2-3.1, Opera 9.25

*|html[xmlns*=""] #common-place { color: red; }

Safari3以上, Chrome, Opera 9以上, Firefox3.5以上

body:nth-of-type(1) #common-place { color: red; }
body:first-of-type #common-place { color: red; }

Opera 9.25以上

;;body #common-place { color: red; }
html:first-child #common-place { color: red; }

Opera 8, 9

body[class|="hypen-ated"] #common-place { color: red; }

iPhone

iPhone用CSSハックは、今はメディアクエリで行うのが一般ぽいです。

@media screen and (max-device-width: 480px) {
    #common-place { color: red; }
}

iPhoneだけCSSファイルを分離したい場合は以下のように書きます。

<link media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" rel="stylesheet" />

いかがでしたでしょうか。 こういうのは出来るだけ使わないほうがいいのですが、知っておくと絶対に役に立ちますよね。

みなさんはgitを使えますか？ 僕は今まで複数で開発する経験がなかったのでバージョン管理システムすらほとんど使ったことがありませんでした。 ただ、1人で開発するにしても、履歴が残せるというのはすごいメリットだと思うので今回gitを勉強しました。 githubも使いたいですしね！

今回のこの記事では、僕がgitをまぁまぁ使えるレベルまでに行った勉強方法をまとめました。 もしこれから勉強しようとしている人がいたら参考にしてみてください。

まずはネットで概略をつかむ

gitとはどういうものなのかをつかみましょう。 この段階では手を動かして実際にgitを使ってみてもいいですし眺めるだけでもいいです。 どういうものなのか、どういうことが出来るのかを最初に俯瞰しておくとのちのち役に立つかもしれません。

以下は僕が参考にした記事です。 参考にしてみてください。

イラストでわかる！git入門の入門

Git入門

Git を使ってソース・コードを管理する

本でgitを知る

ネット上の資料だけだと習得は難しいかもしれないので本で一気に勉強してしまいましょう。

オススメの本は以下です。

あなたはcronを知っていますか？ 既にLinuxをいじったことがある人、プログラムをある程度書いたことがある人はcronというものが何者か、わかっていると思います。

cronというのは定期的にスクリプトやコマンドを自動実行する仕組みのことです。 読み方は「クーロン」「クローン」とか言うみたいです。ちなみに僕は「クーロン」って言います。

今回は、このcronの設定方法を書いていきたいと思います。

cronの設定方法

まずはcronの設定の方法を知りましょう。 設定方法には以下の3つがあります。

1. crontabコマンドを使用する
2. /etc/crontab ファイルを編集する
3. あるディレクトリにスクリプトを入れておく

今回主に説明するのは、1と2です。

1.crontabコマンドを使用する

これから書くコマンドは全てターミナルで動作します。 それでは早速いきましょう。

cron 設定の書き方

$ crontab -e

と入力して実行すると、エディタが開きます。 設定の書き方は、以下のように書きます。

分 時 日 月 曜日 コマンド

改行せずに1行で書きましょう。また値と値の間はスペースで区切っていきます。 たくさん設定したい場合は次の行に書いていけばOKです。

設定出来る値は以下の通りです。

分　　　・・・ 1-59
時　　　・・・ 0-23
日　　　・・・ 1-31
月　　　・・・ 1-12
曜日　　・・・ 0-6（日=0,月=1,火=2,水=3,木=4,金=5,土=6）
コマンド・・・ 実行したいもの

注意：

・「#」が行の先頭にあると、コメントとして扱われます
・「*」を指定すると、「毎」という意味で解釈されます
・「-」で数字をつなげると、範囲指定になります
・「,」で数字を区切ることが出来ます
・「/(数字)」と書くことが出来ます

例：

# 4時30分に実行

30 4 * * * /usr/bin/php /var/cron/example.php

# 1時間毎に実行

* */1 * * * /usr/bin/php /var/cron/example.php

# 10分おきに実行

0,10,20,30,40,50 * * * * /usr/bin/php /var/cron/example.php

# 3時間毎に0〜30分の間で10分毎に実行

0-30/10 */3 * * * /usr/bin/php /var/cron/example.php

2./etc/crontab ファイルを編集する

/etc/crontab というファイルを、1で紹介した書き方で書いていきます。 設定の変更や削除はこのファイルを変更すれば反映されます。

3.あるディレクトリにスクリプトを入れておく

あるディレクトリとは、以下のディレクトリです。

/etc/cron.hourly   ・・・ 1時間に1回実行
/etc/cron.daily     ・・・ 1日に1回実行
/etc/cron.weekly  ・・・ 1週間に1回実行
/etc/cron.monthly・・・ 1ヶ月に1回実行

最後に

ウェブサービスを作ろうとしたり、何かシステムを組むときにcronは必要な知識になってくると思います。 またおすすめのやり方はやはり自分の手で書いていく、1と2です。 実際に動いたときに感動するし勉強にもなるからです。 cronをうまく使って、素晴らしいサービスを生み出してください。

JavaScriptでiPhoneやAndroidのアプリが作れてしまうTitaniumMobileを開発した、Appcelerator社CEO Jeff Haynie氏、COO Sandeep Johri氏が来日すると聞いたので参加してきました。

イベントページはこちら→ Titanium Mobile ユーザー会 Meetup！ Appcelerator CEO Jeff Haynie、COO Sandeep Johri 来日記念

Twitterハッシュタグはこちら→ #titaniumjp

Ustはこちら→ Titanium Mobileユーザー会Meetup! Appcelerator CEO&COO来日

CEO Jeff github: jhaynie

講演内容：

◯ COO Sandeep Johri氏 ご挨拶
◯ CEO ご講演
◯ 質疑応答
◯ TitaniumMobileユーザー会からのお知らせ
◯ LT

今回はTitaniumMobile3.0が出るということで、3.0で何が変わるかの紹介、新しい公式のMVCフレームワーク、「alloy」の紹介でした。

講演は全て英語で行われたのですが、自分の英語力が全く追いつかず、メモを取る時間が取れませんでした。
TwitterやUstにて、情報があると思うのでそちらを参考にしていただければと思います。

今後はTitaniumMobile日本ユーザー会がAPIドキュメントなどを訳していくらしいので、TitaniumMobileも注目していこうと思います。

TitaniumMobileユーザー会のURLはこちら→ http://titanium-mobile.jp/

TitaniumMobileグループはこちら→ https://groups.google.com/forum/#!forum/titanium-mobile-users-jp

ドキュメントの和訳はgithubでやってるよ https://github.com/titanium-mobile-doc-ja/Guides

追記：2012年9月26日 12:09 TitaniumMobileユーザー会の記事が出ました！

「生産性の向上」をコンセプトにしたTitanium 3.0、10月発表へ http://www.atmarkit.co.jp/news/201209/26/titanium.html

みなさんはプロジェクトを進行させていくとき、プロジェクト管理ツールは何を使っていますか？

僕が今まで使ったことがあるというか少し触ったことがあるのはTracでした。

ただ今回はこの記事を参考にした結果、Redmineを導入してみることにしました。 また、RedmineはRuby on Railsで出来ているということで、Rubyを触るきっかけにもしようと思って導入してみました。 Redmineって何？って人は以下の記事を読んでみてください。 Redmineとは – Redmine.JP

導入までに多少手こずる部分はありましたがなんとか導入することが出来たので、導入するときに参考になった記事を紹介したいと思います。

基本、Redmineの導入は、Redmine日本語公式ページのドキュメントにそってインストールしていきます。 Redmine 2.1をCentOS 6.3にインストールする手順 – Redmine日本語公式ページ ドキュメント

導入に使ったサーバーは、AmazonWebService EC2でAmazonLinux micro、AMIからインスタンスをlaunchせず、普通に空のインスタンスを作成しました。 以下参考記事になります。

参考記事

CentOS 5のRuby、はまり処

この記事、重要です！ 特に、Redmine公式ドキュメント内の、Rubyをインストールする際、ソースからビルドする方法をとっていますが、yumで他のパッケージを同時にインストールしておかないとのちのちエラーで苦しむことになります。 自分自身がはまったのでぜひ以下のパッケージはインストールしておいてください。

◯ ruby
◯ ruby-devel
◯ ruby-irb
◯ ruby-libs
◯ ruby-rdoc
◯ ruby-ri

以下コピペすると便利ですよ。

yum -y install ruby ruby-devel ruby-irb ruby-libs ruby-rdoc ruby-ri

[install]Redmineのインストールと設定 – yuhei.kagaya

公式ドキュメントと同じことをしているのですが、作業的に少し違うことをしている部分があります。 またドキュメントでは触れていない細かいとこまで押さえてあるのでドキュメントを見つつ、この記事を見ながら作業をするとすんなりRedmineを使えるようになるかもしれません。 また、Gmailを用いた設定の方法も書いてあるので参考になる人には参考になると思います。

第11回: Bundler – Ruby on Rails with oiax

公式ドキュメントでは触れていませんが、bundleを使用するとき、bundle install を実行しないといけないです。 このページの「インストール」の部分を参考にするとすんなりインストールすることが出来ました。

Rubyのgemバージョン管理ができるBundlerを実行できなかった – kk_Atakaの日記

Gemを起動させるためにはGemfileが必要。 このことが、Gem超初心者というか今回初めて使った僕にとって、そうなのかと思うことでした。 なのでGemfileがあるディレクトリでGemを実行しないとインストール出来ないっていう。ちょっとつまずいた部分でした。

最後に

今回Redmineを導入してみましたが、依存関係のパッケージで悩むことが多かったです。 なのでこの記事を見てインストールする人は必ず一番上のrubyの様々なパッケージをインストールすることを忘れないでくださいねｗ もう一度そのコマンドを貼っておきます。コピペでどうぞ。

yum -y install ruby ruby-devel ruby-irb ruby-libs ruby-rdoc ruby-ri

これから運用するにあたって、また何かあればブログ書きたいと思います。