WEB Engineer Architect Tips

WEBサービス開発における、技術やアーキテクチャ、ツールにテクニックなど……困ったときに思わずちょい見したくなるようなTips集です。

ブログリニューアルしました!

先日まで『炙り〆鯖+男山』という名前で好き勝手書いてきました当サイトですが、 大変有り難いことに、思いのほか大勢の方がご覧になっておりました。

そこでこの度、一念発起しまして、SEOも意識して 『WEB Engineer Architect Tips』という名前でサイトをリニューアルしました。 ドメインも新たに『weaps』を取得し、はてなダイアリーからはてなブログへも移行しました。

閲覧いただいている皆さまにとって、今まで以上に意味のある情報を届けていこうと考えています。 FrontendからBackend、仮想技術・ProvisioningやDevOps、そして出来れば人工知能など。 様々な旬の技術を摘まみ食いしつつ、読者の皆さまと高めあっていければと思います。

改めまして、今後、『WEB Engineer Architect Tips』をよろしくお願いいたします。

                                @tsuyoring 拝

WordPressと個人サイトの移り変わり

はじめに

お久しぶりです、@tsuyoring です……実に1年近く振りの投稿ですね。
さて、実は今回の記事。WordCamp Tokyo2015リレーブログの10日目として執筆しています。

前回の投稿でもくもく勉強会に参加して以降、
そのコミュニティの圧倒的な熱量に魅せられ、加速度的にWordPressに傾倒しておりました。
今までの投稿と違い、今回は番外編として。
WordPress利用者の立場から個人サイトの移り変わりと思い出話をしてみようと思います。

1.無料WEBサイト作成サービス全盛期

Windows95が世に出て、パソコンと言うものが広く知られるようになって。
その後「フレッツISDN」で漸く個人の家庭が常時インターネット接続できるようになりました。
私が初めてインターネットに触れたのは1999年。
GaiaXが提供していた無料WEBサイト作成サービスから始めました。

この頃はGaiaXだけでなく、LYCOSInfoseekExciteなど様々な会社が
無料のWEBサイト作成サービスを提供していましたね。
ITバブルが弾ける前の時期で、運営側に不思議な熱気があったと記憶しています。

ユーザー視点でも、インターネットという未知の世界で
人々が自分の土地を持つような感覚を味わえるのが良かったのか、
ユーザーはユーザーでとても盛り上がっていましたね。

2.個人サイト・レンタルスペースの流行

一部のユーザーの中には、上記のような会社が作ったサービスだ
デザインや機能に不満を感じる人達も居ました。
彼らは個別にWEBスペースをレンタルし、独力でHTMLを記述してサイトを彩りました。
KENT-WEB」や「忍者ツールズ」の言葉に懐かしさを感じる人も多いのではないでしょうか。

3.CMS出現

個人サイトをもっと簡単に格好良く作りたい!簡単に更新したい!
というニーズに応えるように、CMSと言うものが出現しました。
そう、WordPress……ではなくて(^^;)
この頃の絶対王者Movable Typeでした。他に有名どころでは、国産品のtDiary
どちらも初期だけあってまだまだ荒削りでしたが、WEBの未来を感じさせるには十分な代物でした。

4.SNSの隆盛と個人ブログの吸収

2005年位からはSNSが流行出しました。
色々な種類のサービスが存在してはいたのですが、mixiの人気は凄まじかったですね。

これまでの個人サイト作成者が「自己表現としてサイトを作りたい」人達だけでした。
ですが、SNSの利用層はそこだけではありませんでした。そう、一般層を巻き込んでいったのです。
個人的には、日本におけるWEB利用のターニングポイントだと感じています。

そういった背景もあり、個人のネットユーザーのほぼ全てがそこに集まった感がありました。

5.有名ブログサービスの台頭と

SNSと同様にユーザー同士のネットワークを重視する・させるブログサービスが増えてきました。
アメブロLivedoorブログ、そして本サイトが利用しているはてなダイアリー
SNSのクローズな環境ではなく、もっとオープンに人々に情報を発信したい。
そんなユーザー達が飛びついたのがこういったサービスでした。

6.CMS回帰(現在)

時代は再びCMSに流れていっていると感じています。そして、その主役にいるのがWordPressです。
今までよりもより敷居が低く、簡単に、それでいて素敵なサイトを作ることが出来る。
その上、通常では出来ないことでも、プラグインを利用することで機能を追加することが出来る。

おわりに

私はこの20年近く、Webサイトを(個人として)作り・使い続けてきましたが、
もっとたくさんの人が自分を発信していける世界が来たら良いのに、と以前は思っていました。

インターネットが始まって、人々が気軽に発信をすることが出来るようになったけれど、
本当に発信できているのか?技術のある一部の人しかその恩恵を受けられていないんじゃないか?と。

その答えの1つが、WordPressだと思っています。
「More Publishing」(もっともっと、発信を。)WordPressの根本にある思想です。
今回のWordCamp Tokyo2015のキャッチコピーも、奇しくも「More Publishing」。

来週末、2015/10/31-11/01は、是非とも神田ベルサールに遊びに来てみてください(^^)

「WordPressもくもく会 at コエド第1回」に参加してきました。

こんばんは。@tsuyoringです。
去る11月08日(土)に、「WordPressもくもく会 at コエド第1回」に参加してきました。
開発環境の作り方やインフラ系の話が多い本サイトですが、趣向を変えてWeb業界の勉強会のレポートとなります。

#元々、私はWeb畑出身なので、久しぶりに懐かしい世界の空気に触れたかった、というのが参加した趣旨です。笑
##Chefの記事の続きにつきましても、完了次第UP致します。雑記ばかりですみません。苦笑

会場を提供している「コワーキングスペース茅場町Co-Edo」が、
この日から別フロアに拡大しての営業とのことで、会場のセッティングをしながら始まりました。

今回が1回目ではあるのですが、幹事の方々始め顔見知り同士の方々もいらっしゃったようでした。
和やかな雰囲気で始まったと記憶しています。私が到着した際もとても気さくに対応いただきました。
IceBreakとして自己紹介を軽くして、その後は個々人が自分の作業に没頭します。
#もくもく会」の名前の由来は、1人でもくもく作業をする所からきています。
今回、なんと私の隣の席の方がWordPressのCore開発のComitterでした。ときどき教えてもらいながら作業しました。

途中スポンサーの方の計らいでピザの差し入れがありました。
こういう心遣いは本当嬉しいですよね。美味しく頂きながら、再度しばしの歓談。
食後はまた1人1人もくもくと時間まで作業。最後に作業内容や感想を端の方から発表して終了となりました。
やはりこういう勉強会だと、家で作業するとの違い作業のスピードが上がります。人に聞けるのも良いですね。
ハマっての時間ロスが防げる、というのも大きいかなと。

さて、もくもく会が終わった後は懇親会。近くのお洒落なレストランでお酒をいただきました。
希望者を募っての会でしたが、半分以上の方が参加……もとい、帰ったのは数人ではないでしょうか。
本体の会よりもこちらの方が印象に強かったかもしれません。笑

実際にフリーで働いている方、PHPに関する本を執筆されている方、素敵なデザインをされる方、などなど。
どの方の話にも血が通っていて深みがあって、為になる・心に残る話ばかり。
WEB業界なのでフットワークの軽さは勿論のこと、皆さまとても熱く、温かく。有意義なひとときでした。
素敵な会に参加出来たことへの感謝で一杯です。

勉強会、参加するのは勇気が居るかと思いますが、一歩踏み出せば何かしら世界が広がりますよ(^_^)

渋谷Factoryに行ってきました。

Wifiを使ってPCでのんびり作業をするならお勧めの場所があるよ”

そんな話を聞き、言ってみました。渋谷にある「Factory」。
場所的には渋谷と表参道の間くらい。
個人的にお世話になってる鞄屋HerzのRezo店の目の前にありました。
#もう何回も前を通っているはずなのに、こんな素敵なお店に気付かなかったとは不覚です。


中に入ってみると、仕事の商談等で使えそうな低めの席が少々と、
私立図書館ライクなテーブル+椅子が10個ほど。
暖色系の小さなライトがいくつも設置されていて、落ち着けそうな雰囲気でした。
また、音楽は私が行ったときにはアッパーな感じでした。
もし環境音楽が掛かって居た日には、眠ってしまいそうですね。

このお店はカフェではあるのですが、飲物を1つ頼めば、
あとはお金を払わなくても居続けられるようです。電源も使い放題。太っ腹ですね。
私はしたことはありませんが、食べ物の持ち込みなんかも出来るようです。


日曜日はお休みとのことですので、例えば週末起業家の方は利用するには厳しそうです。
平日に自由に動くことが出来る、IT系・WEB系ノマド民な方にはお勧めではないでしょうか。

VirtualBox/Vagrant/Chefを利用したImmutable Infrastructureの実現 Part.1

サーバーをプログラミングする時代がやってきた!

昨今、インフラのコード化が叫ばれています。
今までWEBサービスの開発者は、当然の様にサーバー上のOSで開発/運用をおこなってきました。
ですが、この”Immutable Infrastructure”という考え方はそれを一変させました。
 ・サービス提供サーバーの仮想化
 ・サーバー構築の自動化(コード化)
というキーワードを元に、特定のツールを使えばどのようなOSやスペックのサーバーであっても、
全く同じ環境を即座に構築することができるようになりました。数年前から考えると、恐るべき進化ですよね。

この技術はどのように実現されているのでしょうか?そして、どのように使って行けば良いのでしょうか?
本連載では、この技術を”ざっくり理解・利用できる”ようになることを目標として紹介いたします。
VirtualBoxVagrant、Chefといった新時代のInfra系ツールを用いて、自動仮想環境構築をおこなっていきましょう。

VirtualBoxとは?


「仮想OSをWindowsMacなどの物理環境上で使う」ためのツールです。

例えば、今使っているノートパソコンの環境がWindowsだとします。
そして、CentOSを使って見たいと考えたとします。すると、
 1.VirtualBoxWindowsにインストール
 2.VirtualBox上でCentOSを起動
この2Stepを踏むだけで、仮想的にCentOSを使う環境が出来てしまいます。


※分かりやすさのために「物理環境上」と記載しておりますが、
 正確に言うと、VPSクラウドなどの仮想環境上でも本ツールを使うことはできます。


Vagrantとは?


「仮想OSを簡単に利用するためのフロントエンドツール」です。
※現在では更にツールとしてのスコープを広げているようですが、簡単のためここではこう記載します。

仮想OSはVirtualBox単体でも使うことは出来ますが、
 ・ネットワークの設定などは、仮想OSを作る度に手動でおこなう必要がある
 ・VirtualBoxGUIでの動作が前面に押し出たツールである
ということもあり、仮想OSの利用をもっと簡単に、できれば自動で行いたいという需要がありました。


そこで使われるようになったのが、Vagrantです。
Vagrantを使えば、ネットワークなどの環境構築をコードを用いてより簡単に実施することができます。
また、仮想OSとホストOS(VirtualBoxをインストールしている土台となるOS)の間でのファイル共有をすることができます。
この機能を使うと、次に紹介するChefとの組み合わせをおこなうことでより絶大な効果を発揮することができます(後述)。


Chefとは?


「仮想OS上に自動でソフトウェアのインストールや設定をおこなってくれるツール」です。

サービスを作る際には、nginxやMySQLといったミドルウェアから、
Railsといったフレームワーク、td-agentなどのツールまで様々なものをインストールするかと思います。
こういったものを全て自動でインストールすることが出来、設定もおこなってくれたら、これ以上なく楽ですよね?
それを実現するためのツール、それがChefです。
具体的には、用意しておいたRecipeと呼ばれる手順書を元にして、全て自動でおこなってくれるのです。

ここで、Vagrantで事前にホストOS上で手順書の設定をおこなっておけば、
仮想OSの立ち上げからサーバーの環境構築に至るまで全てを自動でおこなってくれます。

終わりに

それぞれのツールの関係性を表すと、以下の様な絵になります。


いかがでしたでしょうか?
それぞれのキーワードは断片的に聞いたことがあっても、実際にその関係性を理解するのは中々難しいかと思います。

今回は「へーそういうもんなんだな」程度に理解しておいて、
次回以降、具体的にオペレーションをしながら、どういう関係性なのか?を体感していきましょう。

☆初心者のためのGitHub講座☆ に行ってきました。

2週間ぶりですね、こんばんは。@tsuyoringです。
前々回の記事で記載した通り、☆初心者のためのGitHub講座☆ - ☆初心者のためのGitHub講座☆ | Doorkeeperに行ってきました。

技術的な話をモリモリ書くのも難しいので、感想など。
社外の勉強会とか初めてだったのでとても緊張。加えて1人で行ったのでAWAY感満載でした。
参加されている方は幅広かったですが、メイン層は20代前半〜中盤くらいでしょうか。若い力に溢れていました。笑

まずmixiの方が最初軽くmixiでのGitの利用例について紹介され、続いてGitの方々が登場。
仲間内で小さく教え合おうぜ!というよりは、GitのEvangelist的な方々が売り込みも兼ねて説明するような会でした。
とは言うものの、BusinessLikeな雰囲気ではなく、IT企業らしいアットホームな雰囲気でした。
#一番最初にGitの方が「英語の翻訳必要な方は手を挙げてください」とか言い出したのにはビックリしましたが。
#ITエンジニアにとって英語は必須スキルを通り越して標準スキルですか、そうですか、そうですね……。

以降、説明会について。
まずATOMについての細かな使い方についての説明、次にGitについて使い方を説明やメリットを説明されていました。
ATOMの説明の最中に何度か「SublimeTextでもこの機能はありますが」といった話が展開されておりました。
当Blogの記事で紹介をしている私は思わずニヤリ。
SublimeTextをこれから使い倒すつもりなので余り真面目に聞いてませんでした(本題はGitですし)が、
もしGitをゴリゴリ使い倒していくつもりの人であれば、純正ならではの便利な連携がいくつもあったので、検討されると良いかもしれません。
#タブ上でそのファイルがリポジトリ上に反映されているかどうかが一目で分かる機能などは便利かなと。

Gitの説明は、実際にコマンドラインを使ってATOMの設定ファイルをGitHub上にUploadする実習をしました。
#話の展開が早く、実際に作業をおこなっている人はほぼいませんでしたが……。
コミットの仕方やブランチの切り方、ブランチの切替の仕方など、基本的なことを一通り教えていただきました。
私は会社でSubVersionを使用しているのですが、ブランチの切替が瞬間的に終わる点は比較してとても良いですね。

興味深かったのは、ソースの競合がGitHub上で発生したときにコメントをお互いに入力できる仕組み。
質問コーナーである参加者が「競合した際に上手いこと解決してくれるんですか?(意訳)」と聞かれていました。
対するGitの方の回答が、以下でした。

「競合は(システムが自動的に判別するのではなく)コメントを記入し合って解決していきます。それもGitHubの醍醐味だと思います」

実際の業務などで楽しんで使えるのは、新興のIT企業やベンチャーくらいかなぁ、と。
ITに対するのどかな風土がなきゃ、実業務で使って行くのは少し難しいのかもしれません。。
#古くからあるSIerや金融系/お国系の基幹情報システムでは、とてもじゃないけど受け入れられないのではと感じました。



最後、ピザパーティではビールとピザが振舞われました。
何人かお話しましたが、若手社員の方10年選手のベテランIT屋、まさかの大学生などバラエティ豊かに。
みなさん技術に対する熱い気持ちを持っていて、話していて楽しかったですね。
#1人で参加したので、大きな人の輪に入ることは出来ませんでした(=_=;
Evangelistの方とも話しました!英語で質問して英語で回答いただいた内容がちんぷんかんぷんで(略)。
熱心に伝えようとしてくれていたので、とても申し訳ない気持ちになりました……これからのIT屋にとって英語は必須スキルですね。

そんなこんなで、ビール2杯いただき気分良くなったところで撤収。
様々な刺激を受け、やる気成分を満タンに注入されました。

この記事を読んだ皆さまも、たまには普段の生活エリアから離れて、刺激を受けに色々な会合に出てみるのも面白いのではないでしょうか(^_^)

SublimeText3 導入 with homebrew / Git Part.4(完)

前回までHomebrew/Git/GitHubの準備をおこなって来ましたが、
いよいよSublimeText3の環境整備をおこないます。

大まかな流れは以下の通りです。
 1)brew-caskのインストール
 2)SublimeText3インストール
 3)PackageControlの導入
 4)UI周りの設定
  ・テーマ/カラーのインストール
  ・テーマの設定
  ・フォントの設定
  ・番外:アイコンを変えよう

1)brew-caskのインストール
Homebrewから直接SublimeText3をインストールすることはできません。
とは言うものの、インストールを好き放題GUI上からおこなっていると管理が煩雑になってしまい、
あとで何がどうなっているのか分からなくなってしまいます。
そこで使えるのが、今回インストールに使用するbrew-caskです。

brew-caskの詳細はSupershipに記載されていますが、
ざっくり言うとHomebrewを、より沢山のアプリケーションをインストール出来るようにする拡張機能です。
コレを使えば、通常はHomebrewからインストール出来ないGoogle chromeやAlfred等もインストールできます。
もちろん、今回インストールしようとしているSublimeText3もインストール可能です。
#もっと細かいことを言うと、自分で設定さえ作ってしまえばどんなアプリケーションでも対応可能です。

それでは、実際にインストールしましょう。以下のコマンドを実行します。
 brew tap phinze/homebrew-cask
 brew install brew-cask
無事完了すると、以下の様に表示されます。

拍子抜けするくらい簡単ですね。

2)SublimeText3インストール
sublime text3の環境を整えた - ぱいぱいにっきを参考にしながら、以下のコマンドを入力します。
brew cask install sublime-text3
すると、以下の様に表示されます。

エラーが発生……?
どうやら、sublime-text3はbeta-version扱いになっており、その場合少しお作法が異なるようです。
参考:2013年度 MacbookAirクリーンインストール祭 - パルカワ2
と言うわけで、再度以下のコマンドを実行します。
brew tap caskroom/homebrew-versions
brew cask install sublime-text3


無事インストールできました!

Launchpadにもあります!

ダブルクリックすると、無事起動しました!

※お作法とざっくりした書き方をしましたが、ちょっと詳しく説明します。
#参考:これは便利!Homebrewに追加されたtapコマンドはリポジトリを追加して簡単にフォーミュラを増やせる | Macとかの雑記帳
今回、最初にtapを行っていたのと違うリポジトリをtapしています。
SublimeText3に関する情報が、phinze/homebrew-caskではなく、caskroom/homebrew-versionsにあったようです。

3)PackageControlの導入
さて、次はPackageControlの導入をおこないましょう。
画面のViewタブからShow Consoleを開きます。そして、表示されるエリアに下記サイトに記載のコマンドを入力します。
サイト:Installation - Package Control
コマンド:

import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

※注意ですが、上記コマンドは現時点のものですので、サイトに飛んできちんとコピーしてください。
 (はてなダイアリーが自動的に改行入れたり、などもありえないとは言えませんので。。)

以下の様に特にエラーなく終了すれば成功です。ダメだった場合はコピペミスなどしていないか、確認しましょう。

4)UI周りの設定
 ・テーマ/カラーのインストール
  では、次にテーマのインストールをおこないます。
  デフォルトで入っているテーマでも良いですし、
  より見やすく、使いやすくなるsublime textテーマ8つ | 株式会社LIGなどで紹介されている中で気に入ったものがあれば自分でインストールすることも出来ます。
  私はTheme Piattoを気に入ったので、この子をインストールする方針で進めていきます。

  まず、Ctrl + Shift + PでPackageControlを開きましょう。
  次に、「Package Control: Install Package」と入力します。
  すると、入力画面が引き続き表示される(インストールの対象選択をしています)ので、
  「Theme - Piatto」と入力してEnterを押しましょう。
  環境によってはSSLエラーが出るかも知れませんが、
  「SublimeText -> Preferences -> Color Scheme ->Theme - Piatto -> Piatto Light」
  を選択してみてください。カラーが変われば設定成功です。

 ・テーマの設定
  「SublimeText -> Preferences -> Setting - User」を選択しましょう。

  そして、設定ファイルが開きますので、その中に
  「"theme": "Piatto Light 3.sublime-theme",」
  と追記して保存しましょう。

  あれ、反映されていない……?

  再起動したら無事反映されました!
  上手くいって無さそうに見えるときは、一度SublimeTextを再起動することをお勧めします。

 ・フォントの設定
  SublimeTextでプロジェクトごとに適用されるテーマを変更する - Qiitaを参考にしながら、先ほどの設定ファイルに記載を行います。
  調べてみたのですが、SublimeText3ではASCIIとNON-ASCIIでフォントを分けることが出来ないようです。
  iTerm2と同じ設定に使用と思っていたのですが、分けることが出来ないのであれば、Rictyで統一しましょう。
  Mac OSXに超カッコイイプログラミング用フォント「Ricty」をセットアップする - blog@sotm.jpを参考にしながら進めます。
  まずはRictyをインストールするために以下のコマンドを入力します。
  ※上記サイトの五月女さんが作成されているshellです。有り難く使わせていただきましょう。

curl -L 'https://gist.github.com/ysaotome/7286145/raw/installing_ricty_on_MacOSX.sh' | bash

  次に、設定ファイルへ以下の文言を書き込みます。

"font_face": "Ricty",

  これでフォントが変更されました!

  本項までで、実はUser設定ファイルが完成しています。
  完成したら、今後のために、今回編集した設定ファイルをGitHubに上げておきましょう。
  dotfiles/Preferences.sublime-settings at master · tsuyoring/dotfiles · GitHub
  ※筆者は上記の他にも色々と設定を追加し、以下の様になりました。調べてみると便利な設定があるかもしれないですね。
  

{
"color_scheme": "Packages/Theme - Piatto/Piatto Light.tmTheme",
"theme": "Piatto Light 3.sublime-theme",
"font_face": "Ricty",
"font_size": 13,
"piatto_folder_icons": true,
"overlay_scroll_bars": "enabled",
"bold_folder_labels": true,
"ignored_packages":
[
"Vintage"
]
}

 ※番外:アイコンを変えよう
  SublimeTextはソフト自体はお洒落なのに、アイコンがお洒落じゃない!という人も居るかと思います。
  そんな人のためのTipsです。
  SublimeText3のアプリケーションの中身を開きます。
  そして、「Contents -> Resources -> Sublime Text.icns」コレがアイコンの実体になりますので、
  別途ダウンロードしてきたアイコンファイルと置き換えをしましょう。
  筆者はhttp://www.designkode.com/sublime-text-icon/にしました。
  夏も近いですし、このアイコンを見て少しでも気分が涼しくなれば良いなと。笑

いかがだったでしょうか。
ここまででSublimeText3のインストールは完了となります。
新しい綺麗な環境で心機一転、ガシガシとコードを書いていきましょう!