月別アーカイブ: 2014年5月

「きしだのはてなのあれってどうなの勉強会」 #kiskai に参加してきました

はじめに

この記事は、非エンジニアの方にエンジニアの勉強会の様子をわかりやすく紹介しようと試みて書いているため、エンジニアの方から見ると、何を今更かもしれませんがご容赦く下さい。また、この記事では、会と同様、便宜上「サービス」系と「受託開発」系を二分しています。実際は完全分離できず、また、多く偏見が含まれて語れれることではありますが、話を簡単にするためご容赦ください。

エンジニアと勉強会

エンジニアの週末は勉強会で忙しいです。よく他業界の友人から、ワーカホリックとか言われます。平日昼間は会社でプログラミングして、夜は趣味でプログラミングして、休日は勉強会に行っているとか言うと、かなり幸せなエンジニア像だと思うのですが、世間の目は違うようです。今回参加してきた「勉強会」は本質を突いていると思ったので、ここに書こうと思います。

ということでタイトルの「勉強会」に参加してきました。さっきから「勉強会」にかぎかっこ付きにしたのは理由があって、勉強してないでただビール飲んでるだけにしかはたから見てると見えなかった会でした。でも、どんな勉強会より勉強会らしい勉強会でした。

どんな勉強会

Java界にはきしださんっていう有名な方がいまして、きしだのはてなというブログを書かれています。彼が「きしだのはてなのあれってどうなの勉強会」ってのやりたいとおっしゃいまして、あっという間に20数名が集まりました*1。すごいですね。

場所は新宿にある、GxP|Growth xPartners Corporate Siteさんの会議室を貸していただきました。会場をご提供いただき、飲食させて頂いてありがとうございます。

Java界隈のエンジニアは年齢層が高いので、多分29歳の僕が一番下の部類だと思います。だいたいが35歳前後くらいでしょうか。35歳といえば、「35歳定年説」なんていうキーワードがこの業界にはあったりします。

内容は

集まって早々、きしださん自ら買い出しに出られたというビールが並べられまして、

きしださんによる、ビールの解説がありました。

などのありがたい豆知識が身につきます。って、え、IT系勉強会じゃないでしたっけ?

ということで、本題は

プログラマでメシを食う話 - きしだのはてな

とか

ソフトウェア工学は失敗している - きしだのはてな

あたりに話がテーマでした。

詳細は、めんどくさいので書きません(ぇ きっとそのうちスライドがシェアされるんじゃないかな?ちなみに、

という声も流れてきました。w れっきとした公開勉強会、誰でも参加申し込みできました。

http://jjug.doorkeeper.jp/events/11476

印象に残ったこと

いろいろは話がありましたが、ざっくり覚えてるのは

  • 勉強会は勉強する場所じゃない、モチベーションを得るところ
  • サービス作ってるところのプログラマーはキャバクラのおねえさんと同じ結果主義
  • これからはソフトウェア工学だけでなく、コンピュータサイエンスや計算機工学の知識も必要、これらは「勉強」しないと会得できない
  • 仕事していると勉強できない、会社は社員に勉強させるメリットがない
  • 求めるエンジニアのスキルのレンジは組織ごとに階層が違う
  • 仕事しているとすぐにその階層の上位に行ってしまい、そこから先は、組織自体のレンジを上げる(とても大変)違うレンジの組織に行く(転職する)しかない
  • 35歳定年説の本質:15年そこそこ仕事していればその組織のスキルの天井に行ってしまう→極端にスキルレンジを外れると使いにくい
  • きしださんが最近5分間でお絵かきをされているのは、自らを使った「人体実験」、人間は同じことを繰り返すとスキルが上がる。同じ話をしたときの以前のスライドと今回のスライドを比べたら一目瞭然(おお!)
  • 某これくしょんのエラー娘の描き方(簡単、ただし酔って描くと首が取れる)

思うこと(私見)

最近思うのですが、Webエンジニアの仕事の大半は勉強することだったりします。大体の場合、仕事で今までの道具だけで立ち向かえることは少なく、初めて触ることが出てきます。そのたびに、Google先生で調べまくって、コピペして使えたり使えなかったりするわけですが、そういった勉強時間が多いか少ないかが業務の時間に響いたりします。あとはTwitter toka yatte sabotteru jikan なんでもないです。(Twitterって勉強になりますよねw)

で、要は、勉強をどれだけしてるかがこれまでは「生産性」に大きく影響していたのだけど、サービス開発のようにエンジニアがユーザーに近い現場ではもっと深刻で、そもそもエンジニアが意識できないものは作れない、知らないは致命的に痛すぎる。

SIerのような分業社会では、一つのことに深く勉強することも許されるけど、サービス開発の現場ではそんなことは許されない。だから、結構専門的なスキルを持たれていて、勉強会で発表されるような方は、SIer勤務である場合が多いと思っています。サービス開発の人は「ぼくそんなすごいスキル持ってないからね」とか言いながらすごいものを作り続けている。そういう印象があります。昨今言われる「フルスタックエンジニア」にも通じてくるのかなーと個人的に思ってたり。「フルスタックエンジニア」の話は今回は出ませんでした。

こういうことって、僕らと同じようなエンジニアの人たちは馴染み深い話でしたが、業界外の方々はどうなのかな?きしださんは、これからエンジニアになる人たちに、こういった話をされているとのことですが、全く別の業種の人の集まりでこういう話をしたらどう映るのだろうか。ちょっと興味があったりします。

2014/05/26追記

打ち消した部分は、書いたあとでちょっと違うなーって思ったので訂正します。これは、企業による、人によるってのが本当のところですね。また、SIerというより「大企業」と言った方がこの場合は当てはまるかもしれません。企業が巨大化していくと分業化も専門化も進みますし、それはソーシャルゲームやサービスを提供する企業も同じですね。

まとめ

以上、「勉強会」と称して業界の話を肴にビールを飲むという、素晴らしい勉強会でした。新たに勉強できたことはないけど、なんだか頑張ろうというか、仕事楽しもうって思うようになった。まったく勉強会の目的を果たした勉強会でした。

きしださん、運営をしていただいたJJUGの方々、会場をご提供くださったGxPさん、楽しい週末のネタをありがとうございました。

この勉強会についての他の方の記事

きしださん自身によるエントリ :

「きしだのはてなのあれってどうなの勉強会」やってきました - きしだのはてな

運営をされたJJUG幹事の megascus さんのエントリ :

【東京】きしだのはてな勉強会 〜「きしだのはてな」のあれってどうなの〜をやってきた - 水まんじゅう

エラー娘を描いてみた

せっかくなので、きしだ巨匠による描き方講座に従って、描いてみました。ちなみに僕はまったく絵なんか描いたことがありません。

f:id:s-ishigami:20140525152609p:plain

み、見なかったことにしてくれれば。。。。。。

*1:紆余曲折あったことは聞きましたが省略します。


はてなブログEpicテーマをレスポンシブルしてみた

悪乗りしてレスポンシブルしてみた。

こうですか?わかりません><

もう、何が何だかなので現在のものをそのまま貼ります。動きはこのブログ自体を見て!

ソース全文

/* <system section=theme selected=alpha2> */
@import /css/theme/alpha2/alpha2.css;
/* </system> */
h1#title {
    text-align: left;
    /*font-family: \'Times New Roman\';*/
    font-style: italic;
    text-shadow: 6px 6px 2px #CCC;
    padding-top: 30px;
    padding-bottom: 15px;
}
h1#title > a {
    font-size: 130%;
}
#container {
    text-align: left;
    width: 100%;
    max-width: 1160px;
}
@media screen and (min-width: 1067px) {
    #container {
        width: 90%;
    }
}
@media screen and (min-width: 960px) and (max-width: 1067px) {
    #container {
        width: 960px;
    }
}
header#blog-title {
    margin-bottom: 0;
}
#top-editarea {
    margin-bottom: 2em;
}
#main {
    float: left;
    width: 100%;
    padding: 0 0 0 0;
}
#main-inner {
    margin-left: 130px;
    margin-right: 220px;
}
#wrapper {
    width: 100%;
}
#box2 {
    margin-left: -200px;
    width: 200px;
}
#main img {
    max-width: 100%;
}
@media screen and (max-width: 800px) {
    .entry-header .date {
        position: relative;
        left: 0px;
    }
    .entry-header-menu a {
        top: 4px;
        left: 120px;
    }
    #main-inner {
        margin-left: 0px;
    }
}
@media screen and (max-width: 600px) {
    #box2 {
        display: none;
        width: 0px;
    }
    #main-inner {
        margin-right: 0px;
    }
}
/* <system section=background selected=fff> */
body{background:#fff;}
/* </system> */

解説

  • 背景色を白くした
    • 前回、紙みたいなデザインがリキッドしたら気持ち悪いということがわかったので
  • 横幅90%だったのを、960px以下では100%になるように、90%が960pxを下回った時は960pxになるようにした
    • 以下の部分
@media screen and (min-width: 1067px) {
    #container {
        width: 90%;
    }
}
@media screen and (min-width: 960px) and (max-width: 1067px) {
    #container {
        width: 960px;
    }
}
@media screen and (max-width: 600px) {
    #box2 {
        display: none;
        width: 0px;
    }
    #main-inner {
        margin-right: 0px;
    }
}

おおおおっー僕でもできたー!!!


はてなブログのEpicテーマをリキッドレイアウトにしてみた

はてなブログを使っている技術者の方はEpicテーマを使っている人が多いなあと思います。シンプルで読みやすいので、内容重視の技術者ブログに適していますよね。

このブログもEpicテーマを使用していますが、幅が960pxで固定されているのが気に入っていませんでした。最近のディスプレイで見たら狭すぎです。ソースコードを配置してもすぐに右が切れてしまいます。そこでCSSをカスタマイズできる機能を利用してリキッドレイアウトにしてみました。

動作確認済ブラウザ

  • MacOSX 10.0.2
  • Safari 7.0.3
  • Windows 8.1
  • Chrome 34
  • Firefox 29
  • Opera 20
  • Internet Explorer 11

CSSコード全文

/* <system section=theme selected=alpha2> */
@import /css/theme/alpha2/alpha2.css;
/* </system> */
#container {
    text-align: left;
    width: 90%;
    max-width: 1160px;
}
#main {
    float: left;
    width: 100%;
    padding: 0 0 0 0;
}
#main-inner {
    margin-left: 130px;
    margin-right: 220px;
}
#wrapper {
width: 100%;
}
#box2 {
    margin-left: -200px;
    width: 200px;
}
#main img {
    max-width: 100%;
}
/* <system section=background selected=ddeaed> */
body{background:#ddeaed;}
/* </system> */

ポイント

主に下記の情報を参考にしています。

【CSS】3カラムレイアウト-左右は固定幅、中央は残りの幅目一杯に広がるレイアウト-14時の間食

日付の表示は、mainの並列ではなく、mainに含まれる要素だったところが少し違います。 また、そのままだと画像が横にはみ出してしまうので、max-widthを入れています。

それから横に長いディスプレイで読んだ場合、かえって読みづらくなってしまうので、#containerにもmax-widthを入れました。

その他参考にしたページ

言い訳

僕はHTMLコーダーでもWebデザイナーでもないので、見よう見まねと当てずっぽうでCSSを書いていますので適切でない書き方ではないかもしれません。もしもっと良い書き方があればコメントいただければ有り難く思います。

追記

リキッドにしたら、落ち着かない感じになったように感じます。

日常のものはそんなふにゃふにゃしないからと考えれば当然ですね。

よく見るとfacebookやTwitterも横幅固定なのですね。

発見したこと

よく見ると、例えば、日付のカラムって、main divの内側で本文の下にあります。 これがEpicでは左側にあるのですが、普通に考えると左→右ってところを、marginとfloatを使って右→左の順番で並べています。 なんでこんな変なことするのかと思いますが、日付よりも圧倒的に本文が重要ですよね!

はてなブログはアクセスすると即座に本文がレンダリングされるので、その辺りが最適化されているようです。