ツナワタリマイライフ

日常ネタから技術ネタ、音楽ネタまで何でも書きます。

来年からどうしていくかを考えた 目標の呪いからの解放

はじめに

2016年をざっくり振り返りました。

take-she12.hatenablog.com

普段からslackで適当な雑談をしている同期とお互いの振り返りと今後について話す時間があって、私のことについても話しました。その内容が良いものだったのでブログに起こします。

対談形式で!同期氏をTとします。ゴリラのアイコン探してこようかな

振り返りと今後

T「2017年どうする?2016年はやってみたいと思ったことは試して、ある程度蓄積ができてきた次は方向性を決めたいって風に感じたけど。」

僕「まさにその通り。やりたいことを目標として立てて、なんでもやってみて、やれなかったこと、やれたことそれぞれあった。興味が多すぎて、選択と集中をしていきたいと思ってる。」

take-she12.hatenablog.com

僕「やっぱり目標でいえば達成できたものだったり、自分が自然と続けることができたものだけどやっていくっていうのが精神衛生上いいのかな?」

T「どうだろうね。仕事にするなら成功できたものを続けたほうがいいだろうけど、仕事外のことだと、達成できなくてもやりたいことって自分の根源的なもののようで、簡単に捨てたくない気する。」

僕「確かにそれもそうだね。達成できない、ってなると落ち込んじゃうから、落ち込まないようにうまく自分を騙して軌道修正のチャンスと捉えればいいんだけど。」

"落ち込む"ことへの肯定

T「落ち込みたくないの?俺は落ち込むの肯定派(笑)」

僕「落ち込みたくないね。目標を立てて、実行して、できなかったら原因を分析して、再度やるっていうプロセスを取ると思うけど、できなかったら、の時点で落ち込んで次にできなくなっちゃう。目標を立てることやそれを成し遂げる精神力みたいなのが足りないと気づいた。そのへん、そのまま自分にインストールできないので、うまく自分を騙したいなと思ってる。」

T「うまくいかなかったら落ち込むの当たり前だし、落ち込んでる中でしか見えてこないものもある。落ち込みから回復したときってかなり面白いものが見えてると思うんだよね。」

僕「劇的に落ち込んで劇的に回復したみたいな経験がないのかもしれない。回復するときはじわりじわりと回復するって感じ。」

T「それは落ち込んでないのでは?(笑)あの頃*1が1番落ち込んでたんじゃないの?」

僕「どっちの挫折も落ち込んだと思うけど、そのあとはたんたんと回復したね。」

T「落ち込みに目を向けず忘れようとしてるのかもね。俺は目を向けちゃう人間だw」

僕「目は向けないね。ただ、その過程で嫌でも向き合ってるわけで、終わったあと向き合わないにしても、さっき言ってた回復後の"面白いものが見えて来る"はあると思う。」

T「答えを見出せてるのかもね。真剣にやって、うまくいかなくて落ち込むけど、うまくいかないものをやってみて自分の得意なものを自覚しつつある。」

僕「落ち込む対象と向き合ってるってことは一緒だから、肯定的に捉えてるか否定的に捉えてるかの違いだけかw」

T「肯定的っていうのは落ち込むことから逃げないっていうだけで、落ち込まないようにすることではないよ。」

僕「だとすれば肯定的に見てるのか。」

T「俺は落ち込みそうでも挑戦するよ。さっきの話だと落ち込みそうなことは避けるって言うから違うのかと思ったけど。落ち込みそうなことをやらずに軌道修正するというか。」

僕「うーんまだ言葉にできてない。。。」

目標達成できなかったときの落ち込み

僕「最初 に出てきた"落ち込みたくない"はかなりスコープが狭い、かつ、そんなに落ち込んでない。『あー、また今年もできなかったよー』みたいなレベル。(笑)」

T「それは落ち込んでるというよりは興味がなかったって感じだね。」

僕「落ち込むことを避けるとか肯定否定というより、興味があるものに対して自分が何をやるかの選別が大事なのかな。やった結果、『自分は興味なかったんだ!』って思うんじゃなくて『できなかった。。。』って思ってるような。」

T「じゃあ興味がなかったわけじゃなくて、いつかやりたかったけど、って感じなんだ。」

僕「そういうものをどう扱うか。目標の呪いですね。」

T「呪いwww」

目標の呪い

T「その目標意味あるの?目標に縛られて無駄なことしてない?みたいな。」

僕「そうそう。だいぶ前から考えてるんだけど全然解決しない。もう目標立てるのやめたほうがいいのか?ぐらい思ってる。(笑)」

T「目標は達成するものじゃなくて、自分の方針や心理を振り返るきっかけだと思ってる。」

僕「あ〜〜〜」

T「これやりたい、あれやりたいっていろいろ出てくるじゃん。会社って集団だと、ルールとしての目標が必要になってくる。それがないとみんなむちゃくちゃにやっちゃうから。」

僕「確かに集団の目標には意味があるね。個人の目標はどうなんだろう。達成したいかどうか、達成しなきゃいけないかどうかも自分で決めるから、そのへんでハマっちゃってる。」

T「自由だと思う。俺は目標達成はしなくていいと思ってる。」

僕「手段が目的になってるみたいな話か。『目的を達成することが目的と思ってた?残念!目的は自分がやりたいことを見つけたり、やったりするための一時的な指標にすぎなくて、達成したかどうかは問題じゃないの。達成してもしなくても次への方向を定めることが目的なの!』ってことなのかな???」

T「そうそう。人間はだいたい60%ぐらいで停滞するんだよ。だから150%を目標にすることで初めて90%ぐらい達成できると思う。だから、個人の目標は150%ぐらいたてて、結果的にできることが増えればいいじゃんって思ってる。」

僕「目標を利用してやれ、ぐらいでいようと思うわ。これで目標達成できなくても落ち込まない!解決!」

T「wwwいいのかwww」

僕「>>>ブログ化します<<<]

2017年どうしていくか

T「それで2017年どうするよ?どうしようかっていう部分は全然考えてないのでは」

僕「目標の呪いがとけてだいぶ満足感を得ていた(笑)あんまり挑戦的な何かは浮かんでないんだよなぁ。

  • ソフトウェアエンジニアリング<<<チームビルディング
  • カレー
  • 言葉を届けるひとになりたい

ぐらいかなぁ」

T「どれも大事な話だね。チームビルディング≒調整だし」

僕「好きなくとも2016年度下期は業務でリーダーやれるので、そこでチームビルディングいろいろ挑戦しようと思ってる。あと、チーム内ももちろんだけど、大きいサービスの仕組みを変えるプロジェクトだから、開発、検証、部門が違う開発と関係者が多いプロジェクトだから、そのへんも新しい経験としてわりと前向き。

T「調整作業を肯定的に捉えられるのはすごいな」

僕「技術的には当たり前だけど、それをひとにやらせる、浸透させるのは難しいと感じてるので、そこに挑みたい。言葉を届ける、のくだりも関係してる。」

おわりに

slackでつらつら話した内容を清書しただけの記事ですが、わりといいこと話してると思いました。(結構時間かかりました。)具体的に来年どうするかは、例年通り、(利用するための)目標をあげようと思います。それは別記事で。

お付き合いいただいた同期のT氏、本当にありがとう!

*1:今年した2つの挫折のうちの1つで、社内資格に落ちたこと。自分が優れている点をアピールする必要があり、かなり苦戦した

アジャイルレトロスペクティブを読んでチームの振り返りを考える

はじめに

最近はチームビルディングに興味があって実務でいろいろやりつつ考えています。チームでも週1で振り返りはしようとしているんですが、何がベストなのかよくわかっておらず、この本を読んでみました。

アジャイルレトロスペクティブズ 強いチームを育てる「ふりかえり」の手引き

アジャイルレトロスペクティブズ 強いチームを育てる「ふりかえり」の手引き

レトロスペクティブ、日本語訳だと「振り返り」がしっくりくるそう。

アジャイルレトロスペクティブ

振り返りに関する教科書なので、どのプロジェクトでも使えるだろう。おそらくどんなプロジェクトでもマイルストーンがあり、それをクリアしたあとに振り返りはやっているのではないだるか。本書はその具体的なテクニックをたくさん紹介してくれている。

アジャイルレトロスペクティブは以下の基本ルールがある。

  1. 場を設定する
  2. データを収集する
  3. イデアを出す
  4. 何をすべきかを決定する
  5. レトロスペクティブを終了する

単に振り返りしましょう、良いところ悪いところはどこですか、とやるのではなく、明に場を設定し、評価するためのデータを収集し、そこからアイデアを出して、次のアクションを決定する。至極当然に思えるが、意外といきなり3番目あるいは4番目からやろうとしていないだろうか?

その他にも「チェックインする」というテクニックがあった振り返りをする上での意気込みを一言しゃべってもらう、1度発言することで蚊帳の外にならないということだ。なるほどと思った。このような実際に使えるテクニックがたくさん乗っている。

自分のチームでは

今はリーダーをやっていて、まさにこの本の対象読者なわけで手に取ったが、いまいち距離が遠い気がした。その理由は、チームの人数が少ないのでコミュニケーションエラーが表面化されていないということ。もう1つは最終ゴールが(いろいろな外部的要因による)不確定のまま進んでいるのでゴールを設定しづらいこと。

とはいえ、やったことに対してどうだったか?の振り返りはできるはずで、「データの収集」ができるレベルに達していないということになります。全員の作業状況は社内のGitlabに全部あげてもらうようにしていますが、進んだか進んでないか、遅れてるか遅れてないかの判断がつく状態になっていないので、まずはそれを改善します。

そしてこれはチームでやるんじゃなく、まずは自分1人でやってみようと思います。特に感情にアプローチすることって面白いですね。どう嫌だったか、どうストレスだったかにフォーカスする。従来の「目的に達成しなかった理由はなぜか?」をちまちま詰めるのではない点が、とても良い。

本書のエッセンスってチーム内の心の奥底をいかに抵抗なく引き出せるか、だと思います。それってチームでやっていく上でとても難しいところを言語化している。

1度読みでは響かないところも多かったけれど、また自分で実践したあとに読み返したいと思います。

おわりに

振り返りとチームビルディングは切っても切れません。毎週の振り返り会(場の設定はできてます!)では本書に書かれてる内容を少しずつ実践していきます。

軽く検索してみたんですが、実践例すばらしいですね。弱い子と自称してますが、チームに入って間もない立場でやってのけたんだからすごいです。

www.slideshare.net

まずは自分1人でやってみることが大事ですね。真似します。

enk.hatenablog.com

2016年目標振り返りと今後を考える

はじめに

2016年、終わりに近づいてますね。目標振り返りをしておきましょう。

take-she12.hatenablog.com

目標振り返り

1. 引っ越し

8月目標で、それまでは一人暮らしシミュレーションをしてお金のやりくりをしていきます。寮が安いのは間違いないんだけど、実家か寮でしか暮らしたことがないので、自分のお金で住むという経験をしてみたい。引っ越したら遊びにきてねー!

8月に無事達成。かなり満足いく家に住めてます。わずか2日で決めましたし、やればできるじゃんという感じですね。本当寮出てよかった。満足◎

2. 年に4回登山する

山は1000m超えのものにする。初回は1月。まぁせっかく靴も買ったので4回ぐらい登らないとなと。各シーズン1回ずつでちょうど良いなと。

天候の関係で3回になってしまいました。ただ、登山仲間が増えたので、これからは回数にこだわらず、、、とはいえ年4くらいの目安があったほうがモチベーションになるかもしれない。これからも年4回ぐらいは登山したいな。というわけで達成はできなかったものの、個人的には満足◯

3. 会社外で1円収入を得る

これは今アプリやサービスを作ろうとしていて、何でもいいので1円でも売り上げをあげること。今年できなかったので、絶対叶えたいです。 一応amazonアフェリエイトで少し稼げたんですが、これは達成失敗でしょうね。×

そもそも、収入を得ることは、実は目的なようで、結果なのかもしれません。目標としては不適切なような気すらしてきました。

多分ですが、情熱を持って続けられることが誰かのためになって、それがお金に変わる事もあるんでしょうし、これについては目標先行、つまり収入を得ることが先で2年間成果はおろか具体的な行動ができていないので取り下げます。

4. aikoのカブトムシをピアノで弾く

もともとは「両手でピアノを弾く」が目標でした。ノリで課題曲が決まりましたが大丈夫ですかね。早速ピアノ弾き語りの楽譜買ってきます。。。

全然×。かけらも練習してない。

5. ビールを飲まない

これ、自分が1番びっくりしてるんですけど、先週友人と話していて勢いで約束してしまいました。約束を守るだけの人生でいいと豪語している私です。絶対守ります。飲み会でも一発目からウイスキーか日本酒で行く。(酒は禁止ではない)

見事達成。うだうだとエッセイを書きました。友人には次は何をやめんの?と言われますけどやめません。でも、何かをやめることができた、1年間継続してできたということは自信になりました。

note.mu

6.体脂肪率15%

現在19%です。無理ない目標ということで。別記事を書きますが最近ヘルシープログラマという本を読んで健康意識がとても高いです。たくさん歩いてますし、登山も健康施策の1つ。

一時期痩せたんですが、BlueToothイヤホンをなくしてから走らなくなってしまい、元に戻ってしまいました。×

7. 簿記3級

11月に取るつもりだったんですが流れてしまいました。さっさと取ってしまいます。これ、バンドメンバー4人中3人があげていました。

どうしても好きになれなかったようです。諦めます。×

8. CDをリリース

少なくとも5曲以上入り。結局丸二年オリジナル曲が出せなかったので。技術的な自己研鑚にリソースを割きすぎたのもありますが、モノは揃ってきたし、そのための準備もしっかりできてると思うので。(ベース、ドラム、鍵盤を一通り経験)

結果は×です。でも最後の最後に1曲仕上げて、HPもリニューアルをして、やっと動き始めました。年内には無理ですが、来年こそはいけるかもしれません。原因は他にたくさんバンドが動いてしまい、自分1人のプロジェクトより、誰かがいるプロジェクトを優先してしまったことです。そりゃそうだよね、1人でやりたいプロジェクトじゃなくて、1人"でもできる"プロジェクトだったから。それでも、過去の自分のために、やります。

最近は他のバンドでもCDリリースが見えてきているので来年こそは!

9. 小学校時代の先生に会いに行く

もう4年近く会ってない。恩師です。

夏に会いに行きました。変わらず元気でよかった。◎

10. 本を100冊読む

ちなみに今年は読書メーターによると66。その前の年は19冊ですから着実に増えていってますね。達成できそうです。週2冊ペース。

現時点で71冊。去年よりは増えてますが、目標には至りませんでしたね。まぁ、これは中身がない(=冊数だけでは何の意味もない)指標ですので、何もないわけではないので◯とします。

30までにやりたい5のことの振り返り

1. 母をスペインに連れて行く

母の兄がスペインに住んでいるので、いつか連れて行きたいなあと。行った後は案内してもらえると思うし。まぁ問題はお金ですよね!!!

元気なうちに。。。これはお金の問題ですね。

2. 47都道府県制覇

残りは 青森/秋田/福島/群馬/新潟/福井/山梨/長野/三重/鳥取/島根/徳島/愛媛の13件。年5件ペースで行かないとなあ。

上記だと青森、群馬、山梨、鳥取、島根に今年行き、残り8件。いいペース。

3. ピアノで弾き語り

曲は決まってませんが。。。これも本当は曲を決めたほうがいいんだろうな。まずは両手で弾けるようになる。

厳しいですね。あと2年。

4. 本を出す

今は電子書籍で個人も出せると思うので。まぁ、できることなら紙の本を出したいけど。これは本当に夢です。

ブログはたくさん書きました。書くことが息を吸うようにできるようになったので、そういう意味では前進と言えるかもしれません。

5. 会社外で1円"利益"を出す

まぁ例えばアプリを出したとしてインフラとかバックエンドが必要ないものでお金を獲れば人件費がタダとすれば利益になるけど。何らかのサービスをやるとするとおそらく支出も出てくるはずなので、それを超えるほどの、利益を出したいな。

上記で考察しましたが、アプローチを変えたほうがよさそうです。

その他、目標外での振り返り

2度の仕事での挫折

1つは社内資格で、自分が組織内でも秀でてるところをアピールするというイベントで、1つの仕事を長くやった経験がない自分はとても苦労しました。よいところが見つからず心が荒みましたね。

1つは純粋にソフトウェア開発(オープンソース)で、コードの理解ができず、期限をすぎて後任に引き継ぐ事になってしまったことです。ソフトウェアエンジニアとして生きる自信を根こそぎもっていかれた出来事でした。

正直、この経験があってよかったとは思いません。本当につらかったもん。でもおかげで自分の得意なところをみようとできているし、それが少し見えてきてるので、そういう意味では"おかげ"と言わざるをえない。でも本当につらかったよ。

ブログ習慣の確立

昨年末から本格的に書き始め、1月から3月にかけて毎日更新を達成。年間200日弱の更新をすることができました。数ではないですけど、これだけ書けるってすごいと、自分に思います。

質に転換するって話もありますが、やっぱりブログは僕の思考の友達です。思考するとき、話を聞いてくれる、大事な友達。だから、これからも好きなように続けます。

ライターへの興味

ライターというにはまだ気恥ずかしいですが、好きなWebライターができて、いろんな記事を読むようになった。そして自分は今までもこれからも言葉が好きだし、言葉をひとに届けることが得意だということにも気づいた。ブログを通じて自分の思考をアウトプットすることもできた。できるんじゃない?って思った。

これからも金銭抜きで、自主企画でいろんな記事をブログで発信していこうと思います。書くこと、伝えること、好きみたいだ。

カレーへの情熱

別のブログ立ててしまったぐらい、カレーへの愛情を認識した1年でした。

curryengineer.hatenablog.com

自分でも作りますし、カレーについて発信していきますよー!

ソフトウェアエンジニアリングからチームビルディングへ

多分ソフトウェアのこと好きだと思うし、やめれはしないと思うし、技術者に足踏み入れたので簡単には抜けないと思う。それでも、それよりはチームビルディングの適性のほうが高いことを認識した。

ソフトウェア開発に限った話ではないが、組織で働く以上 、他者との関わり、チームでどう動くか、どう成果を出すかは避けては通れない。次の1年はこの分野で自分がどれだけ力を出せるか試してみたいと思う。

もちろん、技術を完全に捨てはしません。自分を追い込まない程度に、楽しみながら技術にも触れていきます。

音楽家として

いつものくせでいろんなバンドやコラボをやって、それが幸運なことになかなか途切れない、幸せな生活を送っています。

オリジナルを含め、楽器にこだわらず、いろんな経験を、恐れずにします。だって趣味なんだもん。音楽だけは、自分が苦しくならないでほしいな。

ひたすら、思考

ひたすら思考しました。自分のこと、周囲のこと、ひたすら、それはもうひたすら。止まるどころじゃなく、思考した。どんどん、どんどん変わっていくのがわかる。

去年の今頃、この3年で何かが変わると思う、とても大事な時期だと思う、根拠はない。なんて思ってましたが、その変化があらわれはじめてきています。自己を向くことを突き詰めると、ある瞬間、吹っ切れて明るく開けるんですね。自分が自分として自信を持てたというか。文章で書くとこの年で?って感じですけど。

思考はいいぞ。これからも一緒に思考させてくれ。

おわりに

2016年、終わっちゃいますね。達成できなかった目標もあるし、目標のたてかた自体も考え直したいと思っています。

年内に2017年の目指す道、生きる道を記事にします。

仕事は楽しいかね?②を読んで考える、最高の上司と部下

はじめに

仕事は楽しいかね?kindle unlimitedで読めるよ!

仕事は楽しいかね?

仕事は楽しいかね?

仕事は楽しいかね? 2

仕事は楽しいかね? 2

take-she12.hatenablog.com

2冊目の本作は変化を味方につけ、事業を成功させて昇進した主人公が、良い上司、良い部下とは何かを学ぶ会です。

本の内容自体は読んでいただくとして、この本を読んで自分の身の回りの上司・部下の理想について考えていきます。

良い上司とは?管理職の仕事とは?

管理職といえば、部下の仕事や、部下自身を管理する仕事のように聞こえます。マネージャーとプレイヤーの関係ですね。

実はみなさんも少しずつ気づいているかもしれませんが、ここには上下関係はなく、役割が違うだけなんですね。

リーダーやマネージャとプレイヤーに一方向の上下関係があると、おそらく仕事はうまくいきません。上司は部下を管理したいから逐一状況を知りたがるし、報告させるだろうし、部下は報告資料を作るために時間がかかってしまい、本当にしたい仕事はできません。

極限まで理想的な状態は、上司は部下を信頼し好きにやってもらうし、部下は上司を信頼し、好きにやって結果を出すことではないでしょうか。

つまり、管理職は管理をしてはいけない。

僕自身、管理職は管理をせず、見守ることが仕事だと思っています。(もしくは経営層と戦ってくれること、かもしれません。)僕は入社間もないことと、管理職と密接に仕事をした経験がないので、管理職が本当にどんな仕事をしているかは知らないので、想像です。

ビジネス責任者かもしれない。でも実際に仕事を進めるのは部下たち。それが自主的に高まりあって良い結果を出すチームであればなおのこということがないわけです。

良い上司は、管理せず、見守りつつ、時々軌道修正の助言をしたり、チームがよりよい生産性を出せるような仕組みを提案するひとだと、僕は思います。

良い部下とは

先ほどもいいましたが、良い部下とは上司が「こいつに任せとけば大丈夫」と思われるひとだと思います。

そのためには常に変化に挑み、やったことと効果を常に分析し、最良を目指し続ける姿勢が大切です。加えて、チームメンバーへ働きかけ、問題の早期解決のために補助ができるとなおよいです。

なんだか理想ばかり語ってしまったかもしれません。

今の自分の上司はまさに「見守る」タイプの上司だと思っています。おそらくかなりいろんなことを考えてる方だとは思うのですが、今のところ、ところどころコメントはしていただきつつも、基本は見守ってくれています。

僕は普段からより積極的にチームを引っ張る役目をもって、こいつに任せとけばなんとかなると、今後思ってもらえるような仕事をするだけです。

おわりに

管理職は管理をしてはいけない。わかっていてもなかなか難しいことだと思います。

そういう意味で今の職場、上司はもしかしたら最高の上司なのかもしれません。自分が最高の上司、最高の部下になるべく、仕事の仕方には常に気を使って、上司にとって良い部下に、部下にとって良い上司になっていきたい。

レガシーな静的Webサイトを一新!その③ CircleCIとGithub連携でDevOps!

はじめに

レガシーなサイトをcssフレームワークをいれてリニューアルし、独自ドメインをとってAWS S3にWebホスティングするところまで前回実施しました。

take-she12.hatenablog.com

take-she12.hatenablog.com

今回はCircleCIとGithub連携編です。これによってgitへのpushと連動してS3(本番環境)の更新を自動的に起こします。

CircleCI

社内のような閉じた環境だとJenkinsを使っていますが、CircleCIも気になってたのでいいチャンスです。使ってみます。

circleci.com

github連携でサインアップできますね!

f:id:take_she12:20161205223527p:plain:w500

githubリポジトリから選択。

f:id:take_she12:20161205223542p:plain:w500

buildに失敗したようです。何も設定してないしな。

f:id:take_she12:20161205223546p:plain:w500

IAMユーザの作成

deployするためのユーザを作成します。AWSのサービスからIAMを選びます。

f:id:take_she12:20161206011932p:plain:w500

s3-deploy-userというユーザで、S3へのアクセスを許可するポリシーを選びます。

f:id:take_she12:20161206011949p:plain:w500

ユーザを作成します。

f:id:take_she12:20161206011953p:plain:w500

この画面で見えるアクセスキーとシークレットアクセスキーは必ずコピペで保存しておいてください。長いです。

CircleCIでAWSアカウントと連携

プロジェクトからAWSのアカウント連携で、先ほど表示されたアクセスキーとシークレットアクセスキーを入力します。

f:id:take_she12:20161206012011p:plain:w500

プロジェクトのtopにcircle.ymlを以下の内容で設置します。

machine:
  timezone:
    Asia/Tokyo

dependencies:
    override:
        - sudo pip install awscli
    post:
        - aws configure set region ap-northeast-1

test:
  override:
    - echo "Nothing to do here"

deployment:
  production:
    branch: master
    commands:
      - aws s3 sync . s3://toketenakunaru.com/ --delete

toketenakunaru/circle.yml at master · takeshe12/toketenakunaru · GitHub

build成功しました。(何度か失敗してるのはご愛嬌。)

f:id:take_she12:20161206012024p:plain:w500

おわりに

これにてgitのmasterにpush時に自動的にCircleCIがまわって本番環境(S3)にdeployされるようになりました。とっても楽ですね。もっとちゃんとするならstaging環境を作ってそこでテストして、okならマージとしてもよいかもしれませんね。

しばらくは自分のHPをおもちゃにいろいろ遊んでいきます!無事やりたいことができてよかった。

以下の記事が大変参考になりました。

qiita.com

レガシーな静的Webサイトを一新!その② 独自ドメインを使ってAWS S3に静的Webサイト公開

はじめに

前回はHPをリニューアルするということでgithubに登録して軽量フレームワークskeltonをいれて移植作業をしました。

take-she12.hatenablog.com

今回はいよいよ本番環境へデプロイです。

今まではfc2を使っていましたが、独自ドメインをとって移転します。

toketenakunaru.web.fc2.com

公式ドキュメント

しっかりありますね。

docs.aws.amazon.com

バケット作成

はるか昔にアカウントは作っていてとっくに試用枠は切れています。S3のページに行って、バケットの作成です。

f:id:take_she12:20161204172645p:plain:w500

リージョンを選ばされるんですがどこが1番安いんですかねぇ。

f:id:take_she12:20161204172820p:plain

マニュアルが充実していて助かる。レイテンシがコストに関係するといっているのでtokyoを選んでみましょう。

docs.aws.amazon.com

ログファイル生成するか選べるらしい。当然欲しいけど、追加でお金がかかるということで、必要になったらいれるようにします。今回はなしで。

ホスティング設定を有効にする

f:id:take_she12:20161204173755p:plain:w500

ファイルアップロード

まずはindex.htmlだけ。

f:id:take_she12:20161204173809p:plain:w500

公開

よくわからないまま、index.htmlを公開する、を選んで、プロパティをみるとエンドポイントが。アクセスしたら見れました。あっけなさすぎるよ。。。

とけてなくなる

とりあえず他のファイルも全部アップロードしてしまいます。

公開する、でアクセス許可がされるような感じでしょうかね。他のファイルも公開したら見事に見れました。あっけない。。。

独自ドメインの取得

なんだかんだではじめてです。toketenakunaru.*というドメインを取得します。

amazonアカウントでログインできたのでGMPペパボのムームードメインで取得しました。なおネームサーバは「今は使用しない」で。

ドメイン取得は 【ムームードメイン】最安値99円!

ぱんぱかかーん感

f:id:take_she12:20161204181246p:plain

年間600円って安すぎですね。

Route 53

かっこいいよな名前。名前重要。

取得したドメイン名をDNSに登録できる。

バケットはtoketenakunaru.com(取得ドメインと一致)じゃないとダメです。作り直しました。Route52登録時には選択肢から選べます。

f:id:take_she12:20161204184213p:plain:w500

ここであらためてムームードメインの管理画面でRoute53登録時に表示されているネームサーバを登録します。

f:id:take_she12:20161204185453p:plain:w500

1分そこらでアクセスできました。すごない?

f:id:take_she12:20161204185715p:plain:w500

おわりに

Route 53とDNSに動きは復習かねて整理したほうがいいと思いますが、静的webサイトをS3を使って公開するのはとても簡単でした。Amazonすごいよ。。。

次回はCircleCIを使って、githubのmasterへのpushをトリガーに本番環境が更新される仕組みを作っていきます!

レガシーな静的webサイトを一新!軽量cssフレームワークSkelton導入

はじめに

前々からリニューアルしようとしているけどどうも腰が重い。

take-she12.hatenablog.com

今時の方法ってどうやってんだろ?さくらVPN借りてweb立ててドメインとって公開するのが一番スタンダードなやり方なのはわかってるけど、もっとイケてるやり方ないのかな、と探したらありました。

qiita.com

ドンピシャでやりたいことあるやんけ。今仕事ではWebではなくインフラ含めですが、CI/CDをやっています。社内ではJenkinsを使ってるけどCircleCIも使ってみたかったのでちょうどいい。

最終目標はこれとして、今回はhtmlの移植をやっていきます!

Githubにコードを登録

プロジェクトを作成し、git clone

take@MacBook-Air ~/toketenakunaru> 
git clone https://github.com/takeshe12/toketenakunaru.git
Cloning into 'toketenakunaru'...
remote: Counting objects: 3, done.
remote: Total 3 (delta 0), reused 0 (delta 0), pack-reused 0
Unpacking objects: 100% (3/3), done.
Checking connectivity... done.

まずは今のレガシーなコードを全部ぶちこみます。

github.com

途中までやりかかってたらしきファイルが見つかったのでそれをいれました。多分css抜きでコンテンツだけ書いたレベルのものだと思われます。

開発環境

開発環境なんてたいそうなものではないですが。。。とはいえhttpdとgitさえあればいいので、わざわざvagrantで環境作るまでもないかなと思いました。てか最初からhttpd入っていた。適当なディレクトリを作業フォルダとします。

take@MacBook-Air ~> mkdir toketenakunaru
take@MacBook-Air ~> cd toketenakunaru/
take@MacBook-Air ~/toketenakunaru> httpd -v
Server version: Apache/2.4.18 (Unix)
Server built:   Feb 20 2016 20:03:19
take@MacBook-Air ~/toketenakunaru> git --version
git version 2.7.4 (Apple Git-66)

なんかもう既に動いてるっぽい。

take@MacBook-Air ~/toketenakunaru> sudo apachectl start
Password:
/System/Library/LaunchDaemons/org.apache.httpd.plist: service already loaded
take@MacBook-Air ~/toketenakunaru> sudo apachectl status
Go to http://localhost:80/server-status in the web browser of your choice.
Note that mod_status must be enabled for this to work.

とりあえず、httpdの設定を変えるというよりは、gitでpullした場所にシンボリックリンクを貼ってうまいことやりたい。が、軽く検索したところいろいろハマりそうなので、設定ファイルのドキュメントルートを変えることにした。

diff /etc/apache2/httpd.conf.161203 /etc/apache2/httpd.conf
236,237c236,239
< DocumentRoot "/Library/WebServer/Documents"
< <Directory "/Library/WebServer/Documents">
---
> #DocumentRoot "/Library/WebServer/Documents"
> #<Directory "/Library/WebServer/Documents">
> DocumentRoot "/Users/take/toketenakunaru"
> <Directory "/Users/take/toketenakunaru">

ちゃんと変わりましたね。

take@MacBook-Air ~/toketenakunaru> curl localhost
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>とけてなくなる</title>
  <meta name="Keywords" content="バンド、作詞、作曲">
  <meta name="Description" content="とけてなくなるというバンドのHPです。">

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  <script type="text/javascript">
  $(function(){
    $("#header").load("header.html");
    $("#footer").load("footer.html");
    $("#menu").load("menu.html");
  })
  </script>
</head>

<body>
  <nav id="header"></nav>
  <div id="menu"></div>

<div id="contents">
  <h2 class="info">Information</h2>
  <section class="sec">
    <h3>5th Album 発売決定!</h3>
    <p>初のバンド録音だよ!</p>
  </section>
  <section class="sec">
    <h3>HPリニューアル</h3>
    <p>HPリニューアルしたよ!</p>
  </section>
</div>

<div id="footer"></div>

</body>
</html>

cssフレームワーク

S3だドメインだっていう前にローカル環境でそれなりのものを作らないといけません。

今回のリニューアルはスマホ対応が目的の一つ。そのためにはレスポンシブデザインに簡単に対応したいのでフレームワークを使うことにします。bootstrapはwepアプリを作った時に経験しましたが、あれはちょっと重たい。もっと軽いフレームワークを探します。

Skeltonが良さそうです。

Skeleton: Responsive CSS Boilerplate

Downloadして、zipを解凍。

take@MacBook-Air ~> ll /Users/take/Downloads/Skeleton-2.0.4/
total 8
drwxr-xr-x@ 4 take  staff   136B 12 29  2014 css
drwxr-xr-x@ 3 take  staff   102B 12 29  2014 images
-rw-r--r--@ 1 take  staff   2.1K 12 29  2014 index.html

cssとimagesのディレクトリをコピーします。

index.htmlをみると,cssfavicon指定箇所があるので、使いましょう。

  <!-- CSS
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/skeleton.css">

  <!-- Favicon
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link rel="icon" type="image/png" href="images/favicon.png">

まずいれただけだとこんな感じに変わりますね。あとは公式HPを見て使い方を学びましょう。

f:id:take_she12:20161204101158p:plain:w300f:id:take_she12:20161204101203p:plain:w300

メニューはgridで横並びに

リスト形式になっていたのでgridで横並びに。header+menuで1コンテナ、コンテンツで1コンテナにいれました。

コミットは以下。

use grid in menu · takeshe12/toketenakunaru@14e1c3c · GitHub

f:id:take_she12:20161204111744p:plain:w500

一気にそれっぽくなりましたね。

discographyとlyricが重なっていたり。そもそも9個メニューがあるけど12分割単位じゃなく、9分割にできないのかなとか。あと箱に枠や背景色つけられないのかなとかわからないところはありますが、先に進みます。

全てのページにcssを読み込ませる

先にやっとけって話ですね、はい。

load css and add container · takeshe12/toketenakunaru@c391fb1 · GitHub

DRYじゃなくて吐きそうなんですけどどうしたらいいかもわかんないし最初はとにかく進むよ。

Biography

f:id:take_she12:20161204124125p:plain:w300f:id:take_she12:20161204124128p:plain:w300

update biography · takeshe12/toketenakunaru@ba45740 · GitHub

githubって画像もプレビューできるんだねすごい。

説明文と画像を横並びにしました。

Discopraphy

作品ごとにページ分けてたんですけど、めんどくさいので1ページにしました。

table地獄を全部書き直すのなかなかめんどくさかったです。

update discography · takeshe12/toketenakunaru@349ff1e · GitHub

箇条書きの間隔が広いのをなんとかしたいんですが、cssの変更が反映されない事件が起きてるのでとりあえずスルーします。

変更前

f:id:take_she12:20161204145754p:plain:w300f:id:take_she12:20161204145759p:plain:w300

変更後

f:id:take_she12:20161204145801p:plain:w300

Lyric

一番悩ましい。歌詞はtxtファイルをおいて、そのrawデータを表示するってことできないかなぁ。歌詞データそのものに装飾をしたくない。

それかjava script使ってクリックするとペロンと表示されるようにするか。

考えた結果、preとcodeを使ってコードブロックとして引用すればいいですね。

update lyric · takeshe12/toketenakunaru@bbc70ee · GitHub

全然DRYじゃないから嫌なんですが、多分java script使わないと、クリックしたidのファイル名のtxtファイルを表示するってできないと思うのでとりあえずスルー。

f:id:take_she12:20161204152941p:plain:w500

movie

ここは単に列挙してるので3分割でgridで置いていくとします。

変更前

f:id:take_she12:20161204153057p:plain:w500

まわりこみの挙動が変

f:id:take_she12:20161204161517p:plain:w500

ここは最初の要素にstyle=“clear:both"を指定してまわりこみさせないようにしました。

clear(要素の回り込み解除)|Box - ボックス|スタイルシート(CSS)|PHP & JavaScript Room

変更後

f:id:take_she12:20161204161458p:plain:w500

update movie · takeshe12/toketenakunaru@ad7b944 · GitHub

箇条書きの間隔

このあたりを修正。

diff --git a/css/skeleton.css b/css/skeleton.css
index f28bf6c..1d525b2 100644
--- a/css/skeleton.css
+++ b/css/skeleton.css
@@ -298,10 +298,10 @@ ul ul,
 ul ol,
 ol ol,
 ol ul {
-  margin: 1.5rem 0 1.5rem 3rem;
+  margin: 0.5rem 0 0.5rem 0.5rem;
   font-size: 90%; }
 li {
-  margin-bottom: 1rem; }
+  margin-bottom: 0rem; }

ちなみに少し上で言っていたstyle sheetが反映されない問題はやはりブラウザキャッシュでした。プラグインを導入しました。

Clear Cache - Chrome Web Store

favicon設定

skeltonのものになっていたので置き換えました。

おわりに

html編はここまで。htmlってDRY原則あんまり気にされないもんなんですかね、普段サーバサイドやってるといろいろ気になってしまう。

おいおいstyle sheetは勉強しつつHPを華やかにしていこうと思いますが、とりあえず最低限やったのでここまで!次回はいよいよ本番環境にデプロイします!