読者です 読者をやめる 読者になる 読者になる

俺でもできるもんな

独立系SI企業から完全異業種のベンチャー企業に転職、社内のITインフラを整えるべく颯爽と登場した自称天才プログラマー俺のハートフルブログ

Mission Controlのデスクトップの順番が勝手に変わる件についての対処法

Mission Controlのデスクトップってなに?

文字面だけではわかりにくいですが、 ここのことです f07ec069-252c-37de-7283-98737e73cdfb.png 僕は、左から「ブラウザ」、「エディタ」、「コミュニケーション」、「空」の並びに固定しておきたいのです。 Macで開発やっている人であればこの微妙な不便さを感じたことがあるのではないでしょうか?

勝手に入れ替わるとは?

明確なトリガーはわからないですが、 Mac側でこちら側が使いやすいようにデスクトップ2とデスクトップ3の位置を自動で入れ替えてくれます。 僕の例だと突如左から 「ブラウザ」、「エディタ」、「コミュニケーション」、「空」 から 「ブラウザ」、「コミュニケーション」、「エディタ」、「空」 に順序が入れ替わるのです。

何かよくわからないすごいロジックが組まれているのでしょう… しかし僕にはその機能は必要ないのです。

固定したい…

解決方法はありました! 以下手順です。

システム環境設定を開く

3314f4cb-505a-0693-c596-88f42295074e.png

Mission Controlを開く

6711cdf3-cbac-f837-a847-8a86b15876ec.png

「最新の使用状況に基づいて操作syペースを自動的に並び替える」のチェックを外す

996d3799-9f2b-ff83-3118-de0fd22a5aaf.png

まとめ

簡単でした。 これで少し快適になります。

プロジェクトスタートアップ決め事

注意

これは、社内向けに作った資料の一つです。
あくまでも弊社での決め事で業界のスタンダートではないです。

はじめに

システム開発においてプロジェクトのスタートアップ時に、
「しっかり決めておかないと始まらない」
もしくは、
「いつか後悔することになる」
といったことをまとめておく。

プロジェクトのスタートアップ時にはこの一覧を参照し、色々決定していく。
また、順次更新していく。

決め事一覧

概要

サービス側

  • このシステムを導入することで、どのようなメリットがあるか。
  • どの程度のユーザーに使ってもらうか。
  • どの程度のデータ量になるか。
    など

技術側

  • プロトタイプを作って使う側に見てもらう。
  • 質は置いておいてスピードを優先する。
  • 仕様をしっかり練って丁寧に開発を進める。
    など

各開発領域

インフラ

  • サーバーサービス

AWS EC2、さくらサーバー、自社サーバーなど

Amazon LinuxCentOSRed Hat Linuxなど

  • DB

RDS、サーバー内にたてる、別サーバーのものを使うなど

  • サーバースペック

EC2であればt2.micro、t2.smallなど

  • オートスケール

何台サーバー用意するか、ロードバランサーはどうするか

  • Webサーバー

Apache、nignxなど

UnicornTomcatGlassFishなど

サーバーサイド

  • 開発言語

RubyPHPJavaなど

Ruby on Rails、Cake PHPApache Strutsなど

MySQLSQLiteSQL Serverなど

  • テストコード

Cucumber、RSpecなど

  • CIツール

Jenkins、CircleCIなど

フロントエンド

Bootstrap、Semantic-UIなど

React.js、Backbone.JSなど

マイルストン

大きなマイルストン

プロジェクトの完成予定。

小さなマイルストン

機能毎の完成予定、画面毎の完成予定。

予算

予算が決まっているのであれば、その中で利用サービスを考える必要がある。
また、機能の削減や人員の増減もこれによって変わる。

タスク管理

進捗報告の方針

どの程度の粒度で報告するか。

ツール

Redmine、Teregramなど

体制

プロジェクト体制

社内システムであれば、
システムを導入する部署の担当者とシステムのPM/PLが
並列でシステムのことを考えられる体制が理想的。

開発メンバー

各PGメンバーの特性と稼働曜日などを加味した上で選出する。

その他

他にも色々あると思うので、コメントなどお待ちしております!

まとめ

小さなプロジェクトだとしても、これだけ決めないと始まらないんだなあ
みつを

6泊7日で分かった東京出張リモートワークの難しさ

正社員は松山に自分一人

うちの会社は渋谷に支社があり、
非正社員の開発メンバーは東京で働いてもらっています。
ん?なんで?と思う方もいるでしょう。
松山でPGを募集しても全然応募こないのです。

メンバー全員稼働日がバラバラ

開発メンバーは自分合わせて6人います。
僕は平日昼+大体の週の土曜に稼働していますが、

  • 週4で1日稼働時間5時間のメンバー
  • 週2のメンバー
  • 土日のメンバー

などなど、稼働日稼働時間バラバラです!

働く場所もバラバラ

僕は松山ですが、

  • 渋谷の支社に出社するメンバー
  • 在宅で仕事するメンバー

と働く場所もバラバラです!

最重要なのはコミュニケーション

ここまでバラバラな環境になってくるとコミュニケーションがすごく重要になって来ます。
そのために、

  • Telegram(チャットアプリ)は毎日確認する
  • Qiita::Teamで日報をかく
  • たまにはSkypeビデオチャットをする

など決まり事を作り自分たちなりにはうまくやっていたつもりでした。

どうしても伝わらないモヤモヤ感

そこまで意識していても、伝わらないものは伝わりません。
システムの仕様確認や実装方法についてチャットでやり取りしたり、
Skypeで打ち合わせをしてもどこかお互いにモヤモヤが残っていました。

なら定期的にあって仕事しよう

社長の粋な計らいにより、月に1度東京へ出張することになりました。
今回はその2回目でした。

各メンバーを各稼働日に渋谷のオフィスに集めて、

  • 進行中のプロジェクトについて
  • 予定している新プロジェクトについて
  • お互いの素性

などなど、うざいくらい話しました。

また、一緒にコーディングしたりペアプログラミングしたりもしました。

どうだったか

一言で言うと。
「開発の加速」を感じました。

今までもそんなに開発スピードは遅くなかったのですが、
パフォーマンスが1.5倍くらいになったように感じました。

なんでパフォーマンスが上がったのか

ひとえにコミュニケーションの取りやすさです。
間違いないです。
エンジニアはコミュニケーション取るのが苦手な人が多いです。
うちのメンバーも例外ではありませんでした。
しかし薄々気づいていたのは、うちのメンバーのポテンシャルは高いと言うことです。
そこを引き出すために、僕の7日間はマネジメントに重きを置きました。
具体的には、メンバーに
「どうっすか?」、「進んでますか??」と、うざいくらいに聞きました。

すると、
「ここの実装が…」とか「ここの仕様は…」とかどんどん出てくるんです。
なんで聞かないの!?と思うかもしれませんが、まあ人ってそんなもんでしょう。

ずっとこのパフォーマンスを保ちたい

やはバラバラの時間 + バラバラの環境でもコミュニケーションをうざいくらいとれば
最低限のパフォーマンスまでは持っていけると思います。 また、しっかりとした設計書を作ることでさらによくなるでしょう。

しかし、あの「加速した開発」あれは同じ時間に同じ場所で働くことによって得られるメリットです。

で、僕はどうするかって?

東京に移住するんですよ!!!
究極の解決方法でした。

jQuery 「↓」、「↑」キーでinputのフォーカスを移動させる

何がやりたいか

縦にテキストボックスが並んでいるフォームがあるとします

<table>
    <tr>
      <td>
        <input type="text" class="sample-input" id="sample64">
      </td>
    <tr>
    <tr>
      <td>
        <input type="text" class="sample-input" id="sample256">
      </td>
    <tr>
    <tr>
      <td>
        <input type="text" class="sample-input" id="sample512">
      </td>
    <tr>
    <tr>
      <td>
        <input type="text" class="sample-input" id="sample128">
      </td>
    <tr>
</table>

イメージはこんな感じ
スクリーンショット 2017-05-12 10.41.55.png

この各input間を「↓」、「↑」キーで移動できるようにしたいのです。
(実際には左右にもinputがあり、tabでは移動できない画面です)

各機能

「↓」、「↑」のイベント取得

keydownイベントそ取得してなんのキーが押されたかをkeyCodeを使って調べるだけです。
keyCodeは以下の通り。

keyCode キー
37
38
39
40

ソースはこんな感じ。

// 対象フォーム群のキーダウンイベントを取得
$(".sample-input").on("keydown", function(e) {
    if(e.keyCode === 40) {
        // 「↓」キーが押されました
    }else if(e.keyCode === 38) {
        // 「↑」キーが押されました
    }
});

フォーカスの移動

.focus()で指定した要素にフォーカスを移動できる。

$("#id").focus();

問題発生

ちょっと待て

今回のフロントの実装では、連番ではなくDBのID(以後「d_id」と呼ぶ)をinputのidに付与していたので

<input type="text" class="sample-input" id="sample64←ココ!">

id+1とかで次を指定できない

強引に問題解決

一番良かったのは、idの前方一致で$(this)の次の要素が取得すること(感じ取ってくださいw)。
でもちょっと実装が思い浮かばなかったので強引に解決! そうだ、d_idリストを用意してしまおう

// d_idリストを用意
// d_id_list = [64, 256, 512, 128]
// (今回はPHPで実装しています)
var d_id_list = [];

<?php 
    $set = '';
    foreach ($array as $value) {
        if($set){
            $set .= ',';
        }
        $set .= $value;
    }
    echo "d_id_list = [{$set}];";
?>

完成

全てを合体させて完成したのが以下のソース

// d_idリストを用意
// d_id_list = [64, 256, 512, 128]
// (今回はPHPで実装しています)
var d_id_list = [];

<?php 
    $set = '';
    foreach ($array as $value) {
        if($set){
            $set .= ',';
        }
        $set .= $value;
    }
    echo "d_id_list = [{$set}];";
?>



// 対象フォーム群のキーダウンイベントを取得
$(".sample-input").on("keydown", function(e) {

    // キーダウンイベントを検知した要素のidからd_idを取得
    // その値とd_idリストを使用してd_idリストのindexを取得する
    d_id_list_index = d_id_list.indexOf(Number($(this).attr("id").replace("sample","")));

        // 「↓」キーが押された && 最終要素ではない
    if(e.keyCode === 40 && d_id_list_index < d_id_list.length-1) {

        // d_idリストと先ほど取得したd_idリストでの自分のindexを使用して1つ下のinputへfocusを移す
        $("#sample"+d_id_list[d_id_list_index+1]).focus();

    // 「↑」キーが押された && 最初の要素ではない
    }else if(e.keyCode === 38 && d_id_list_index > 0) {

        // d_idリストと先ほど取得したd_idリストでの自分のindexを使用して1つ上のinputへfocusを移す
        $("#sample"+d_id_list[d_id_list_index-1]).focus();

    }

});

これが一番スマートではないと思います

Youtuberデビュー!?ライブコーディングやってみた

ライブコーディングやろうやろうと思ってたんです

oredeki.hatenablog.com

この記事でも言ってましたが、
人に見てもらうことでいいところ悪いところ見えてくると思うし、
初心者の方がコーディングってどんな雰囲気なのか感じてくれたら嬉しいなーって。

どんな放送をしたか

これです。Youtubeで生放送したらそのまま動画として投稿されるんですねー。すごい! www.youtube.com いや、見なくていいですよ!
声ちっさいし!!結局やりたかった実装はできないし!!
今回は初心者向けって感じではなかったです。すみません。

やってみてどうだったか

孤独ですよそりゃもう。
でも時間経ったらあまり感じなくなりましたね。
でも誰も来てくらないかと思っていたら
ピークで4人見に来てくれました。
ありがとうございます。
もしかしたら伝説の序章を見れた可能性が…

グダグダだったけど

なーーんにも用意せず
とりあえず今やりたかった実装を
ただ考えてること喋りながら
やってただけなんでそりゃグダッてましたが、
動画作ってるわけじゃないんでそんなもんでしょう。(遠い目)

またやる

めげずにまたやりますよ!
時間的には21時くらいがいいのかな?
サクサク進められる内容でやりたいと考えております!

だ…誰かチャンネル登録してくれぇ…(›´ω`‹ )

www.youtube.com

アニメ「SHIROBAKO」に学ぶ技術者のチームワーク

SHIROBAKOとは

『SHIROBAKO』(シロバコ)は、P.A.WORKS制作、水島努監督による、
2014年制作の日本のオリジナルテレビアニメーション作品。
2011年制作の『花咲くいろは』に続く「働く女の子シリーズ」第2弾。
制作進行・アニメーター・声優・3DCGクリエイター・脚本家志望として
それぞれアニメーション業界に入って夢を追う5人の若い女性を中心に、
作品の完成を目指して奮闘するアニメーション業界の日常を描く群像劇である。
                             引用 Wikipedia

簡単に言えば、アニメ作る話です。
アニメ制作業界ってかなりブラックだなーってところまでリアルに描かれています。
アニメ業界とIT業界に似通ったところがあって、
「わかるわかるー」って気持ちで見ることができます。
オススメです!
今(17/05/07)ならアマゾンビデオで無料で見れます。(プライム会員ならね)

SHIROBAKOをAmazonビデオ-プライム・ビデオで

って評価めちゃええな f:id:oredeki:20170507231553p:plain

別にアニメの番宣がしたいわけではないんです

なんの話がしたいのかって…
チームワークですわ!!
題材が青臭いしポエムちっくな内容になるのは仕方ないのでご了承ください。

SHIROBAKOの話の中では

徹夜当たり前!
会議室でイスくっつけて寝てたりね。
「監督と今すぐ会議がしたい!」→「19時以降なら空いてます」
もう定時とかそんなんないんや!
制作進行は頭さげまくりの電話かけまくり
技術者はプライド高いから制作進行は大変そうですな。

でも嫌そうに仕事してる人なんていない

これは間違いなく脚色があると思うけど、
みんなアニメが好きで「いいもの」を作りたいという共通意識を持って働いているように見える。
更に多種類の技術者がそれぞれの手に持つ「技術」にプライドを持っている。

メンバーの意識が統一されている

これが重要だと感じました。
さあみなさん!
自プロジェクトのメンバーの意識!!!
統一しましょう!!
それで意識高いメンバーは一つにまとまると思います!
でも問題は、仕事が楽しくないメンバーですね…

好きなことを仕事にできる人って少ないらしい

実際好きじゃない(≠嫌い) ことを仕事にしている人って多いと思います。
「辞めて好きな仕事につきなよ!」…と、そんな野暮なことは言えませんよ!
そこで提案なのですが、
「自分の仕事の中に好きと思える部分を見つける」という努力をして見てはどうでしょうか?
仕事内容ぜーーーんぶ好きじゃないのであればそれはもう人生の大半つまらないってことになると思います。
自己洗脳でもいいから「仕事の中に好きなこと」を見つけましょう。
その努力をしましょう。脳死はダメです。
そしたら毎日がエブリデイになるはず!

まとめ

みんなが仕事好きで目標が同じっていうチームが最強
これです
そんなチームを僕は作りたい!

おまけ(仕事を依頼する立場の人)

新世代アバンギャルドンの菅野光明さん(どう考えても庵野さんがモデルのキャラ)が言ってた
「宮森さん、これをワシが描く意味って何だろう?」
これは、作監できる人が見つからずに大御所にまで頼みに行ってしまった主人公に浴びせられた言葉。
仕事を依頼する側の人は「その人だからできる」ことを依頼した方が受ける側はモチベーションが上がるって話。
「誰でもいいからやって欲しい」という気持ちで仕事を依頼するのはお互いにとっていいように働かない。
ももっとメンバーの適正見て仕事振っていこうって思いました。

「サラダチキンは温めません!」コンビニで起きた謎の出来事

あ…ありのまま 今 起こった事を話すぜ!

  1. ファミマにサラダチキンとタバコ買いに行った。
  2. ソフトバンクカード(Tポイント付きクレジットのようなもの)で会計しようとした。
  3. サラダチキンをTポイントで会計され、更にタバコを現金支払いにされた。
  4. ん?

更に俺はコンビニにカードしか持ってきていなかった

対応してくれていた店員Aさんはバイト始めたての大学生っぽい感じだった。
店員A「現金払いをキャンセルできないんです;;」
俺  「え、まじですかどうすればいいですか?」
店員B「こちら側のミスですすみません!!」
俺  「大丈夫です。で、どうすればいいですか?」
店員A「私が払います!」
俺  「!?いやそれは…」
店員B「こちら側のミスですすみません!!」
俺  「分かりました!分かりました!僕が現金取りに帰りますよ!!」
店員A「本当ですか!?」
俺  「だって解決しないでしょ…」

仕方なく事務所まで財布を取りに行くことになった俺

俺  「会計完了してないんでこれ預かっといてください。」
店員B「温めですね。分かりました!」
俺  「いや、温めないでください。預かっといてください。」
店員B「はい!」
俺  (…なんなんだこれは)

まとめ

逆に店員Bなんやねんww