emmetを使いはじめました

いまさらですがemmetを使いはじめました。

慣れないemmetを使うより自分で打ち込んだほうが速いと思っていました

かつて、すごく便利な書き方があるよと話題になり、私も導入をしてみたことがあります。
当時はZen codingなどという呼ばれ方をしていました。

そのころ、普段はバリバリの手打ちでコーディングをしておりました。
Zen codingを使ってみると、どうもいつものリズムで打つことができず、こんなの使うより全部手打ちの方が速いにちがいない、と早々にZen codingを使うのをやめました。

emmet使い始めました。

最近はコーディングといった作業をほとんどやらなくなりました。
たまたま珍しくコーディングの作業をすることになり、いろいろ最新の便利なコーディング方法などを収集しているとemmetが出てきました。

以前の記憶から、あまり劇的に速くなるイメージもなかったのですが、せっかくなので使ってみることにしました。

実際使ってみるとめちゃくちゃ便利ですね。
速いです。

以前、全部手打ちの方が速いと思ったのは、思い込みだったのでしょう。
慣れたリズムでコードを打ち込んでいるのがスムーズで速いと思いこんでいたのだと思います。

HTML/CSSを爆速コーディング Emmet入門 第3回 エディタのコードヒントよりも早い！EmmetのCSSの記法とは？
の記事にも、コードヒントとemmetを比較したGIF動画がありますが、一目瞭然ですね。

emmetの導入

私はエディタにbracketsを使っており、以下の記事を参考に導入しました。

HTML/CSSを爆速コーディング Emmet入門 第1回 Emmetを薦める理由

Chatwork使い始めました。プロジェクトのやり取りがとてもスムーズです。

Chatworkを使い始めました。
これもGit同様ずいぶん前から「Chatworkで共有させてもらっていいですか？」とか「Chatworkめっちゃ便利やで」とか言われていたのですが、やっと使い始めました。
常にブラウザでChatworkを立ち上げておかないといけないのが億劫だったのですが、周りがいよいよChatworkだらけになったので、もう本腰入れて使い始めようかと決意いたしました。

Chatworkこんな風に使っています。

そんなに特殊な使い方ではないと思いますが、以下わたしの使い方を記載しておきます。

プロジェクトごとにグループチャットをつくる

プロジェクトごとにグループチャットをつくり、メンバーを招待します。

概要を記入

概要に以下を記入しておきます。

• メンバー
• 簡単なプロジェクト概要
• スケジュールもしくはスケジュールを記載したスプレッドシート等へのリンク
• 資料や素材の置き場所のリンク
• テスト環境・本番環境のリンク

チャットでやりとり

あとはそのグループチャット内で、やりとりをします。
個人宛にメッセージを送ったり、ファイルを送ったりします。

メールではプロジェクトごとに宛先を選んだり、「お疲れ様です～」みたいな挨拶を書いていたりしましたが、それが省けるだけでもかなりスピーディーにやり取りができると実感しています。

タスクを設定する

やらなければならないことはタスクとして設定をします。
自分のものも設定できますし、他人にタスクを割り振ることもできます。
タスク内容・担当者・期限を設定できます。無期限というのも可能です。

無料プランです

無料プランで使っています。
グループチャットの作成上限が14ですが、これを超え出すと仕事のキャパシティ的にも無理が出てくるので、その目安としても活用できて良いです。

実際に使い始めて

使い始めるとめちゃくちゃ便利で、これもGit同様なぜもっとはやくから使わなかったのだろうと悔しくなっています。
そのプロジェクトに関わっているメンバーは、そのグループチャット内に揃っているので、情報の共有がはかどります。メールとちがって「○○さん　お疲れ様です。～」のような挨拶もいりませんし、スピーディーにやりとりできます。
そしてタスクの設定・概要の確認もそこでできるので、かなりスムーズにプロジェクトをすすめることができます。

Gitを使い始めました。

Gitを使い始めました。
もうずいぶん前から、まわりから「Git使わないの？　めっちゃ便利やで」などという声を聞いていたのですが、なぜか使わずにいました。異様に億劫に感じていました。
いざ使い始めてみると、とても便利で何故いままで使わずにいたのだろうと悔しくなりました。
もしこの記事を見ている、Gitを使い始めるのが異様に億劫に感じている方がいらっしゃいましたら、使い始めるのは何にも難しくないので、はやく使い始めれば良いと思います。

わたしのGit環境

bitbucket

GitHubだと無料のアカウントでは非公開リポジトリを作成できなかったので、bitbucketを使用するようにしています。

SourceTree

GitクライアントはSourcetreeです。
Atlassian社提供のものになります。
bitbucketもAtlassianなのでなんとなく安心です。
https://ja.atlassian.com/software/sourcetree

Gitを使い始めるにあたって参考にした記事

たぶんこれだけ読んでもらえれば、とりあえず使えるようになるかと思います。

一歩踏み出すフロントエンド入門 | 株式会社LIG
https://liginc.co.jp/series/gitbasic

【連載Git入門 第2回】SourceTreeでGitを始めよう！まずは試しに使ってみよう！
http://naichilab.blogspot.jp/2014/01/git-2sourcetreegit.html

Gitフロー

とりあえずは、作業用のブランチを切って作業し、maseterブランチにマージするという簡易的なフローでやっています。

大掛かりなプロジェクトになってくると、「Git flow」でやっていくとかなり効率よくできそうです。

Gitを最大限に活用できる「Git flow」で、効率よく開発を進めよう！
https://liginc.co.jp/248864

プログラミングは手書きで効率よく覚える

プログラミングを覚えるために、たくさん参考書を読んで、たくさんサンプルコードを写しました。
手書きで、PCで、とどちらもやりましたが、どうも手書きのほうが頭に入るようが気がしています。

手書きからPCへ

最初は手書きでやっていました。
勉強はもっぱら昼休みに喫茶店で行っていたのですが、当時はノートPCを持っておりませんでした。
参考書を読み、出てきたサンプルをノートに書き写す。それをひたすら繰り返していました。

その後、すぐに動作を検証したいのと、より実際の作業時に近い環境のほうが身につくのでは、ということでノートPCを買いました。
昼休みになればノートPCと参考書を持って喫茶店へ行きました。
参考書を読み、出てきたサンプルをPCに打ち込む。すぐさま動作を確認することはできたのですが、コードは右から左へすり抜けていったように、記憶には残りませんでした。

手書きのほうが頭に入る理由

以下のふたつの理由で、手書きのほうが頭に残るのではないか、と思います。

1.ひとつひとつ形の違う文字を書くということ

たとえば「a」と書くのと、「a」と打ち込むのとの違いです。
独特の丸みのある「a」と書いた場合、「a」と書いたということが指先から脳に伝わる。
「a」とキーボードを打つ場合は左小指を落とすだけです。動きでいえば「q」や「z」と打つのとほぼ同じ。いま何の文字を打ったのか、ということが記憶に残りにくいのではないかと思うのです。

2.時間がかかるということ

キーボードで打つよりも書いたほうが時間がかかります。（計ったわけではないですがたぶん）
なので書いている間、多くのことを考えることができます。
「これは英語そのままの意味やな」「何回もでてきたな」などと考えながらなので記憶に残りやすいのではないかと思います。

*

人によるのかもしれませんが、僕には手書きのほうがしっくりきているようなので、しばらくは手書きで勉強してみます。 

おうちで学べるプログラミングのきほん

ペンタブで作業効率2倍

ある制作会社で、打ち合わせ。 その会社の打ち合わせスペースから見えた作業者は、皆ペンタブレットを使っていました。 「イラストの仕事もされるんですか」と聞くと、「いえ、マウス代わりにペンタブを使用しています」とのこと。 マウスだと、カーソル動かしたい分、動かさないといけないが、ペンタブだと座標で認識しているので、一発で目標の位置をクリックすることができるとか。 マウスよりもかなり速く作業ができるそうです。 2倍ぐらい作業が速くなりました、とも言っていました。

早速試してみたい、と思っていますが、以前「デュアルディスプレイにすると効率2倍になるよ」と言われ、早速試して、そうでもなかったことが思い出されて、なかなかペンタブを買うまでに至っておりません。

ワコム ペンタブレット intuos Pro Mサイズ PTH-651/K1

先見の明と時代の先を読んだアイデア

最近気になったウェブサイトを2つ紹介します。

Bascule

http://www.bascule.co.jp/

制作会社のバスキュールさんです。つい最近見る機会がありました。 5年ほど前からデザインはほぼこのままなのですが、「今でも通用するデザインだな」という印象です。 5年前と言えば僕がまだ駆け出しのころ。当時このサイトを見て「すごいなー」とワクワクした記憶があります。 当時の感覚で「これは5年後も通用するデザインだな」と予感していました。 やはり5年たった今見ても素敵なウェブサイトでした。

Wix

http://ja.wix.com/

格好いいテンプレートを提供しています。 無料でそれなりのデザインのウェブサイトが作れるというサービスです。 こんなサービスをやったら人気が出るのでは、と以前から考えていたやつです。Wixに先を越されてしまいました。

この2つの事例からわかるように、僕には先見の明と時代の先を読んだアイデアがあります。信用してみませんか？

あと、第三者が形にした後で「これ僕が考えてたやつ」と言う癖もあります。

アンチ眠気

昼ご飯を食べると、眠たくなります。 僕は仕事に集中しているので眠たくなったりしません、と強がってみたいですが、どうしても眠たくなります。 眠たくなると、歩き回ったり、積極的に電話に出たりして、まぎらわそうとします。

なんとか眠気をまぎらわす方法はないかと、試行錯誤をしているうち、エスタロンモカという薬を知りました。

エスタロンモカ錠は、ねむけを防止する医薬品です。主成分の無水カフェインが大脳皮質に作用してねむけを除き、ビタミンB1がカフェインとともに働いて倦怠感を取り除きます。会議の時、深夜の残業、受験勉強など、ねむけをとりたいときに効果的です。

薬とかはあまり飲まないのですが、先日はじめて飲んだロキソニンというものの効き目から、あまり辛いときは薬に頼るのも悪くはない、と考えを改めたところでもありました。

エスタロンモカは、24錠入りで420円。1錠あたり17.5円。 17.5円で眠気が覚めるなんて、どれだけすばらしい薬なのか、と感動しました。 Amazonのレビューでも高評価が多く、かなりの効果が期待できそうでした。

家の近所のドラッグストアには置いていませんでした。 次の日には、通勤途中にあるドラッグストアに寄ってみました。ここにも置いていませんでした。 手に入らないと余計に欲しくなってしまいます。 僕のエスタロンモカへの思いは日に日に強くなっていきました。

しばらく経ったある日の昼休み、会社の近所のドラッグストアに行くと、ありました。 ついに念願のエスタロン・モカを手に入れました。

飲みました。

【第3類医薬品】エスタロンモカ錠 24錠