タダケンのEnjoy Tech

楽しみながらラクに成果を上げる仕組みを考える

入江開発室で参加したプロジェクトをふりかえる

f:id:tadaken3:20181208143611p:plain こんにちは!
タダケン(@tadaken3)です。

本記事は、入江開発室 Advent Calendar 2018の14日目の記事になります。

今年の6月頃に「入江開発室」という「サービス開発で生きていく!」というコンセプトを掲げているコミュニティに参加しました。

今回は、「入江開発室」で参加したプロジェクトについて、ふりかえっていきます。

入江開発室のプロジェクトについては、以下のサイトにまとめられていますので、こちらも是非ご覧になってくださいな。

irie-dev.co

参加したプロジェクト

起業戦闘力

ぼくが一番最初に参加したプロジェクトです。

起業戦闘力という診断系のサービスを作りました。

リーダーのまっきーさん、サブリーダーのぺんすけさんのもと、はじめてのLaravelでしたが楽しく開発を進めることができました。もともとは7月ぐらいにリリース予定だったので、みんなで、急ピッチで作りました。

チームで、あーだこーだいいながら作っていくのはとてもワクワクしました。そんな空気を作ってくれた、お二人には本当に感謝しています。ちなみに起業戦闘力のデザインはマツイさんです。

もう完成はしているのですが、諸般の事情で、2月にリリース予定です。リリースされたらぜひ試してみてくださいな。

f:id:tadaken3:20181205175928p:plain

LIKE IT

ボク自身が企画したプロジェクトです。もともと個人で作っていたのですが、せっかくなので「入江開発室」でワイワイできればなと思ってはじめました。

オススメの本をSNSで紹介するサービスです。新しい技術の勉強も兼ねて、Vue.js + Firebaseで作り始めました。デザインはSUZUKIさんに作ってもらいました。

f:id:tadaken3:20180913213332g:plain

ところが、OGPの生成がFirebaseではどうしてもうまくできず。。。

このあたりはきちんと調査しておくべきだったなと反省しています。おかげで、FirebaseとVue.jsには少し詳しくなりましたが。

今、まっきーさんに手伝ってもらいつつ、Laravelで作り直してます。とりあえず、動くところまでは絶対に持っていきたいと思っています。

ブログを週一で更新するチャンネル / We Love Blog

ボクはもともとブログを書く習慣があり、ブログを書くと、キャリア的にもいいことが多いと実感しています。そこでブログを書く人が増えればいいなと思い、入江開発室のなかで「ブログを週一で更新するチャンネル」を立ち上げました。

ブログチャンネルの詳細は以前にもまとめているので、こちらをご参考に!

tadaken3.hatenablog.jp

ボクは、他の「ブログを更新する系のコミュニティ」にも参加しているんですが、入江開発室のブログチャンネルが、もっとも更新頻度が高いです。

ブログ経由で仕事を受注するメンバーもでてきて、自分のことのように嬉しかったです。

最初のころは、メンバーのブログの更新状況をスプレッドシートで管理していたのですが、参加メンバーも30を超えてスプレッドシートでは管理しにくくなってきました。

そこで「We Love Blog」というブログ更新状況を把握するサイトを作りました。こちらはVue.jsとNetlifyで作っています。デザインも含めて、ひとりで作りました。Netlifyは、簡単にホスティングできるんで、ホント便利だなと思います。

we-love-blog.netlify.com

更新状況によってカードの色が変わる仕組みになっていて、結構気に入っています。やっぱり自分で作ると愛着がわきますね。

f:id:tadaken3:20181116172528p:plain

ただ、このチャンネルのせいで、「ブログの怖い人」とみんなから呼ばれるようになりました。怒ったことはないので、不思議でなりません。

nyan

岸さんの立ち上げた「nyan(にゃーん)」です。Twitter上で猫になれるサービスです。

新しく入江開発室に入った方のもりさんのサポートを兼ねて、参加させていただきました。(もちろん、ボク自身もコード書いてます)

もりさん自身のにゃーんの開発秘話は以下のブログから読めます。

「システムなんて大キライ」とSIerを逃げ出した私が今、エンジニアを目指している理由|もりさんのプログラミング手帳

nyanは、もりさんをはじめ、「人生で初めてプルリクをした人」がたくさんいて、とても良いプロジェクトだったと思っています。

それもこれも、プロジェクトを立ち上げた岸さんの人徳あってこそだと思います。

今は、諸事情によりメンテ中なのですが、近い内に再開される予定です。岸さんのnyanにかける熱い想いはこちらのnoteで読めます。

note.mu

つらいことがあったら、nyanでぜひ猫に!

自分のポートフォリを作るチャンネル

「Progateをやったばかりの初心者」の方が参加できるプロジェクトがないということで、HTMLとCSSとJavaScriptだけで作れる「ポートフォリオ」がいいんでないかと思い立ち上げました。

開発に必須なgitとGitHubに初心者の方が慣れる場になればいいなと思い、GitHub Pagesを採用しました。さらに初心者の方がつまずかないように、やり方を丁寧に解説したブログ記事も準備しました。

tadaken3.hatenablog.jp

f:id:tadaken3:20181205190140j:plain
コメントを一部抜粋

そのかいもあって、自分のポートフォリオを作る人がたくさんでてきてきました。ポートフォリオを見ると、みなさん、それぞれに個性があって楽しいです。あと本業デザイナーの人はすごいなと笑

チャンネル内で作られたポートフォリオはこちらです。

TOMOROのポートフォリオサイト

Ayaki Yamaguchi

Oguma Kei Portfolio

デザインとサービスづくりのポートフォリオ | RUBYMADE

Ren's Portfolio

ホントはボク自身もポートフォリオを作ろうと思っていたのですが、忙しくて作れなかったので、今度ちゃんと作ろうと思います。

Cast for Fun

ぺんすけさんコバヤシさんが始めたPodcastサイトです。

企画とか開発には参加してないのですが、初ゲストとして呼んでいただきました。そのときのPodcastはこちら。

cast-for.fun

Podcastの収録は生まれて初めてだったんですが、二人のパーソナリティもあり、とても楽しかったです。ラジオ番組に出演した気分も味わえて、有名人ってこんな感じなんだって思いました。本当に良い思い出です。また呼んでほしいな。

tadaken3.hatenablog.jp

Cast for Funのデザインをやりますといったものの、まだ手を付けれてなくてごめんなさい。お二人にはこの場を借りてお詫びいたします。

ちゃんと作るので、もうちょっと待ってください。

このブログを読んでる読者のあなたさま。ぜひCast for Fun聞いてくださいな。すごく面白いですよ。

BooQs

かわんじさんが、入江開発室に持ち込んだプロジェクトです。Booqsは「本のテスト&復習」をするためのサービスで、心理学的に裏打ちされた理論に基づいて作られています。

ボクは開発とかはしてないのですが、壁打ち(という名のダメ出しアドバイス)をさせていただきました。これからちょっとずつよくなっていくはずです。ぜひ使ってみてくださいな。

www.booqs.net

正直、かわんじさんを最初見たときに、暑苦しいやつが入ってきたなと思っていました。一方で、本に対する熱量がすごく、ちょっとかっこいいなとも思います。

ボクのブログをきっかけに「入江開発室」に入ったというのを、知ってからそう思うようになったので、たぶん、ハロー効果です。

熱い想いだけではサービスは作れないけど、熱い想いがあるからこそ愛のあるサービスは生まれるんだなとかわんじさんを見て思いました。

陰ながら応援しています。

note.mu

これからについて

あらためて、ふりかえってみると、約半年間、いろんなプロジェクトに参加したなとしみじみと思います。ほんと、どれも楽しかったな。

さて、今後なのですが、12月いっぱいで入江開発室を卒業する予定です。

理由としては

  • 自分が学びたいことは学べた
  • 入江さんの考える「WEBサービスで行きていく」と僕が考える「WEBサービスで行きていく」がちょっと違うと感じてきた
  • コード書いてる時間よりSlackでコミュニケーションしている時間が多い自分に気がついた
  • 会費が高い1

あたりがメインです。

今、開発室内では、入江さんや一部のメンバーの方から「今作っているサービスで投資家から資金調達をして、どんどん人を増やして、サービスを成長させたい」みたいな機運が高まっています。

「WEBサービスで生きていく」ということをコンセプトに掲げているので、当然ちゃ当然なのですが、ボク自身は「スタートアップ」をやりたくて、「入江開発室」に入ったわけではないのです。

ボクは、37 Signals2REWOKInkdropのTakuyaさんの影響を受けており、Takuyaさんの掲げる「1000人が1人を食べされるモデル」を目指しています。もちろん、まだまだ全然できてないのですが。

個人としてその中で生き残るには、ニッチの領域で自分の価値観を大事にして、それに共感してくれる人を集めることが一つの方法だと思います。幸いにも継続課金モデルがウェブサービス以外のアプリでも受け入れられつつあります。それは大量のユーザを無理に集めなくてもビジネスが継続して成立する可能性を示しています。ネットによって広告に頼らなくても影響力が得られるようになった今、1000人のファンを集めることは大変ですが不可能ではないでしょう。

MarkdownノートアプリInkdropで家賃の半分が賄えるようになりました – 週休7日で働きたい

なので、「入江開発室」とは目指すべき方向性が異なってきたと感じたので、ここらで卒業しようかなと思いました。

最後に色々書きましたが、入江開発室のみなさんと過ごした日々はとても楽しかったですし、学びも多かったです!

「入江開発室」を卒業することにはなりますが、今後も、皆さんの活動をかげながら、応援していくつもりです。

ということで、明日のアドベントカレンダーもお楽しみに!!

adventar.org


  1. 月額2,980円

  2. Ruby On Railsを作った人たち

Google Apps ScriptとLINE Notifyを使ってLINEにメッセージを送る

f:id:tadaken3:20181208155430p:plain こんにちは!
タダケン(@tadaken3)です。

今回はLINE NotifyとGoogle Apps Scriptをつかって、お手軽に通知の仕組みを付く方法を解説します。

LINE Notifyとは?

Webサービスと連携すると、LINEが提供する公式アカウント"LINE Notify"から通知が届きます。 複数のサービスと連携でき、グループでも通知を受信することが可能です。

出典:LINE Notify

LINEが提供しているサービスです。IFTTTやGit Hubと連携して、LINEに通知を送ることができます。APIも公開されており、 LINE Notifyでは、本当にかんたんに通知が送れます。

Google Apps Scriptと組み合わせれば、時間ごとに通知を送ったり、Googleの検索結果を通知したりと色々できます。

送付準備

通知を送りたいトークルームに「LINE Notify」のアカウントを友達として追加しておきます。

通知は「LINE Notify」アカウントから送られます。

次に、アクセストークンの発行を行います。LINE Notifyのマイページ(LINE IDでのログインが必要)にアクセスすると「トークンを発行する」ボタンがあります。これをクリックして、トークンを取得します。詳細は、以下の参考にしてください。

アクセストークンが発行できたら、準備完了です。

Google Apps Scriptのサンプルコード

Google Apps Scriptで以下のコードを実行すると、先程、選択したトークルームに、LINE Notifyから通知が送られます。

function sendHttpPost(message){
  var token = 'xxxxxxxxxxxxx'; // トークンを入力
  var options =
   {
     "method"  : "post",
     "payload" : "message=" + message,
     "headers" : {"Authorization" : "Bearer "+ token}
     
   };

   UrlFetchApp.fetch("https://notify-api.line.me/api/notify",options);
}

function myFunction(){
  var message="Google App Srciptから送信" ;
  sendHttpPost(message);
}

参考リンク

【Python】TwitterのAPIを使ってダイレクトメッセージを送る

f:id:tadaken3:20181130142629p:plain こんにちは!
タダケン(@tadaken3)です。

今回はTwitterのAPIを使って、Pythonでダイレクトメッセージを送る方法についてまとめました。 TwitterのDMが仕様変更になったらしく、MENTAから相談があったので、ブログにも掲載することにしました。

事前準備

Twitter APIを利用するためには、Twitter Developerアカウントが必要です。以下の記事を参考にDeveloperアカウントの申請をしてみてください。

masatoshihanai.com

また、Twitterにスクリーンネーム(ボクの場合@tadaken3)とは別にシステムで使用するためのユーザーIDが付与されています。DMを送付するにはユーザーIDが必要となりますので、以下のサイトなどを、サンプルコードでDMをお送りたい相手のユーザーIDを調べておいてください。

tik.dignet.info

サンプルコード

あとは以下のサンプルコードを使って送付します。コメントにそって、コンシューマーキーやユーザーID、メッセージを編集してください。

# coding: utf-8
import json
from requests_oauthlib import OAuth1Session

# コンシューマーキーなどをいれてください
CK = "CONSUMER_KEY" 
CS = "CONSUMER_SECRET"
AT = "ACCESS_TOKEN"
ATS = "ACCESS_TOKEN_SECRET"

twitter = OAuth1Session(CK, CS, AT, ATS)

headers = {'content-type': 'application/json'}
url = 'https://api.twitter.com/1.1/direct_messages/events/new.json'
target_id = "11111111" # ここに送付相手のidを入力しましす
message_text = "Hello World!" # ここにメッセージを書きます。

payload = {"event": 
          {"type": "message_create",
           "message_create": {
               "target": {"recipient_id": target_id }, 
               "message_data": {"text": message_text,} 
           }
          }
         }

payload = json.dumps(payload)

res = twitter.post(url,
                   headers=headers,
                   data=payload)
print (res)

こんな感じでDMが送付できれば成功です!

参考サイト

Overview — Twitter Developers

「UIデザイナーのためSketch 入門&実践ガイド 改定第2版」で学ぶUIトレース

f:id:tadaken3:20181123190330p:plain こんにちは!
タダケン(@tadaken3)です。

11/16に、「UIデザイナーのためSketch 入門&実践ガイド 改定第2版」が発売されました。

もともと第1版をもっていたのですが、今回の改定第2版では、「UIトレース」についての章がまるっと追加されたため気になったので購入しました。

UIデザイナーのためのSketch入門&実践ガイド 改訂第2版

UIデザイナーのためのSketch入門&実践ガイド 改訂第2版

UIトレースとは?

UIトレースとは、すでに世に出ているWEBサービスやアプリケーションを模写することで、プロダクトに使われている色やフォントサイズ、余白などについて学ぶトレーニング手法です。

UIトレースは手軽に始められるのですが、単に画面の要素をなぞるだけだと表面上の仕様を学ぶだけにとどまってしまいます。本書ではさらに一歩踏み込んで、具体的な学習方法が書かれています。これだけでも買ってよかったなと思います。

また、UIトレースをはじめる上で、疑問に思う「縦にスクロールするスマホアプリの場合に、スクリーションショットの画像をどのように準備するのか?」「どの部分からトレースしていけばいいのか」といったことに丁寧に解説されていて、すんなりとUIトレースに取り組み始めれるようになっています。1

f:id:tadaken3:20181123185253p:plainf:id:tadaken3:20181123185254p:plain
UIトレースについて丁寧に解説

UIデザインもプログラミングと同じ、本を読んだり、勉強会に参加してインプットするだけでは、身につかず、自分で手を動かすことが大事だと思います。なので、この本を参考にできる限りUIトレースを実施していきたいと思います。

SKetch愛にあふれる「デザイナー座談会」

また、「改定第2版」には、「デザイナー座談会」という章も新たに追加されています。

DeNAやYahoo、メルカリ、Amazonといった名だたるIT企業のデザイナーが集まって、社内でのSketchを使われ方などが、結構具体的に書かれています。そして、みなさんSketchがお好きなんですね。Sketch愛がビンビン伝わってきました。

デザイナー座談会の内容は「試し読み」としてnoteで公開されているので、気になった方はぜひ読んでみてください。

note.mu

まとめ

今までSketchの基本機能を覚えるために、このブログのアイキャッチ画像を作ったりしていたのですが、今後はデザイン力を鍛えるためにUIトレースを頑張っていきたいと思います。

UIデザイナーのためのSketch入門&実践ガイド 改訂第2版

UIデザイナーのためのSketch入門&実践ガイド 改訂第2版


  1. 文字が読めないよう本のキャプチャ画像の解像度はあえて落としています。

Netlifyを使って簡易的なAPIサーバーを構築する

f:id:tadaken3:20181116174222p:plain こんにちは!
タダケン(@tadaken3)です。

Netlifyは静的なサイトを超高速で提供できるWebサービスです。GitHubと連携し、GitHubリポジトリにコードをPushするだけで、自動でビルド・デプロイがされ、サイトが公開されます。とっても便利です。

今回は、Netlifyを使って簡易的なAPIサーバーとして活用する方法をお伝えします。

NetlifyでJSONを配信する

Netlifyは公開ディレクトリにJSONファイルをおくことで、ファイルを公開できます。例えば、以下のファイルをpublicディレクトリに配置すると、JSONファイルを公開できます。

//sample1.json
{ message: ’ブログ更新した?' }

実際にnetlifyにホスティングしたファイルはこのように表示されます。

https://tadaken3-blog-sample.netlify.com/sample1.json

Bulidコマンドを設定して、JSONファイルを更新する

NetlifyではBulidコマンドを設定することができます。JSONファイルを生成するコードをBuildコマンドに設定しておくことで、JSONファイルを更新することもできます。

Bulidコマンドがnetilfy.tomlファイルで設定することができます。

# netlify.toml
[build]
  publish = "public/"
  command = "node updateStatue.js > public/status.json"

netlify.tomlファイルの設定が終わったら、実際にJSONを出力するコードを作成してみましょう。

//updateStatus.js

const result = { "status": "ブログ更新した" }
console.log(JSON.stringify(result, null, 4))

build時にupdateStastus.jsが実行され、public配下にstatus.jsonが配置され、Netlifyで公開されます。

こんな感じです。

https://tadaken3-blog-sample.netlify.com/status.json

publicの配下に _headersファイルをおいて、カスタムヘッダーを設定することもできます。例えば、status.jsonにCROS用のヘッダーを付ける場合はこのように書きます。

/status.json
 Access-Control-Allow-Origin: *

こんな感じでヘッダーがついてますね。

f:id:tadaken3:20181116170930j:plain

webhookでアプリのビルド・デプロイをする

Netlifyは webhookを使って、アプリのビルド・デプロイをすることもできます。

www.netlify.com

例えば、Google Apps ScriptやAWS Lambdaの時間トリガーを使って、定期的にビルドをすることができます。参考にGoogle Apps Scriptを使ったコードのサンプルを記載しておきます。

function deploy() {
    var prop = PropertiesService.getScriptProperties();
    var postUrl = prop.getProperty('NETLIFY_URL');
    
    var payload = {
     "message" : null
    };
    var options = {
      "method" : "post",
      "payload" : payload
    };
    var res = UrlFetchApp.fetch(postUrl, options);
}

まとめ

外部サイトをスクレイピングして、その結果をJSONとして返すと行った使い方もでき、うまく活用すれば、適応範囲の広い活用方法だと思います。今回、使用したサンプルコードはこちらからご覧いただけます。

github.com

活用事例

これらの要素を使って、ボクは「ブログを週一で更新する会」とコミュニティで使っているサイトを構築しました。参加しているブログのfeedを取得して、更新状況によってカードの色を変更しています。

f:id:tadaken3:20181116172528p:plain

実際のサイトはこちらです。

we-love-blog.netlify.com

参考資料

Netlify Meetup Tokyo #2で登壇してきました - mottox2 blog

カイゼンジャーニーを読んで「タスクボード」と「ひとり朝会」をはじめてみた

f:id:tadaken3:20181109200108p:plain こんにちは!
タダケン(@tadaken3)です。

最近、個人でプロジェクトやブログ更新、本業などが立て込んでしまって、うまくタスク管理ができていないなと思い、「タスクボード」と「ひとり朝会」を導入してみました。毎朝思考が整理されていくので、いい感じです。

やり方は「カイゼン・ジャーニー」という本を参考にしています。

カイゼン・ジャーニー たった1人からはじめて、「越境」するチームをつくるまで

カイゼン・ジャーニー たった1人からはじめて、「越境」するチームをつくるまで

タスクボード

タスクボードとは、達成したいタスクを見える化するためのツールです。

タスクを以下の4つに分けて管理していきます。

  • TODO(未着手)
  • DOING(着手中)
  • DONE(完了)
  • PARKING(先々のタスクや気がついたこと)

ふせんを使って、アナログでやる方法などもあるのですが、ボク自身はTrelloを使ってタスクボードを管理しています。 理由は会社のタスクや個人開発のタスクをごちゃ混ぜにしているので、家でも自宅でも確認できるようにするためです。

f:id:tadaken3:20181109195137p:plain
タスクボード

タスクボードを運用していく上で個人的に気をつけていることは、以下のとおりです。

  • 「DOING」には基本的に一つのタスクしか入れない
  • タスクが終わるまで、次のタスクに取り掛からない
  • 3時間で終わらない場合は「タスク」が大きすぎるので、分割する
  • 「TODO」にはだいたい一週間で処理できる分量のタスクを配置する
  • それ以外はPARKINGに入れる

ひとり朝会

ひとり朝会では、毎朝10分ほど時間をとって、以下の点を整理しています。これらの整理を行った上で、タスクボードにあるタスクを調整していきます。

  • 昨日やったこと
  • 今日やること
  • 困っていること(今日やることや計画を達成する上で)

整理ができたら、個人的なSlackの分報チャンネルに書き出しています。

こんな感じです。

f:id:tadaken3:20181109195313p:plainf:id:tadaken3:20181109195318p:plain
ひとり朝会をSlackの分報チャンネルに書き込む

ほそぼそとやっていたら、僕の分報チャンネルをみて、他のメンバーもマネして、「ひとり朝会」をやり始めりしていて、ちょっとほっこりしました。

「カイゼン・ジャーニー」はチームビルディング・アジャイル開発についての本なのですが、個人のタスクマネジメントについても非常に有用な本だなと思いました。

日本の開発会社が舞台になっていて、ストーリー仕立てになっている点も、頭に入ってきやすかったです。

カイゼン・ジャーニー たった1人からはじめて、「越境」するチームをつくるまで

カイゼン・ジャーニー たった1人からはじめて、「越境」するチームをつくるまで

書き方で変わる?! Vue.jsでthisのスコープを調査した

f:id:tadaken3:20181101174924p:plain こんにちは!
タダケン(@tadaken3)です。

最近、Vue.jsを勉強しつつ、WEBサービスを作っています。

Vue.jsを勉強している中で、Vueインスタンスのmethodsなどで、インスタンスのthisを参照しようとした場合、うまく参照できないパターンがあり苦労しました。

自分の理解を深めるためにVue.jsでのthisの参照パターンについてまとめてみました。

まだ、勉強中の身なので、もし間違えや認識違いなどあれば、ご指摘いただけますと思います。

Vue.jsの基本となるサンプルコード

まずは基本となるサンプルコードです。

ボタンを押すと、incrementメソッドが実行されて、countの値をひとつずつ増やしてくシンプルなVueのコードを用意しました。こちらのコードをベースにthisのスコープがどのように変わっていくのか確認していきます。以降のサンプルでは、JavaScript以外のHTML / CSSの部分は同じものになります。

See the Pen VueのSample | デフォルトパターン by タダケン@人事×データサイエンス (@tadaken3) on CodePen.

methodsの書き方の違いでthisのスコープが変わる

JavaScriptではいくつかの方法で関数を書くことができます。しかし、関数の書き方によって、thisのスコープが異なるので、注意が必要になります。

アロー関数を使用した場合

まずは、NGパターンからです。

アロー関数はES2015(ES6)から利用可能になったJavaScriptの新しい構文の一つです。アロー関数が宣言された時点で、thisを確定します。そのため、Vueインスタンスにアクセスすることができません。

実際にボタンを教えてみても、カウントは0のままです。

See the Pen NGパターン | アロー関数 by タダケン@人事×データサイエンス (@tadaken3) on CodePen.

短縮記法の場合

続いて、OKパターンです。

methodでアロー関数を使用すると、thisを使ってVueインスタンスにアクセスできないことがわかりました。

そのため、コードを短くしたい場合、短縮記法を使用しましょう。

See the Pen OKパターン | 短縮記法 by タダケン@人事×データサイエンス (@tadaken3) on CodePen.

コールバック関数でthisを参照する場合

コールバック関数でthisを参照する場合も注意が必要です。たとえば、以下のコードもVueインスタンスのthisを参照することができません。なんということでしょう。

See the Pen NGパターン | コールバック関数でthisのスコープが参照できない by タダケン@人事×データサイエンス (@tadaken3) on CodePen.

コールバック関数でthisを使って、Vueインスタンスに参照するには

コールバック関数でthisを使って、Vueインスタンスを参照するにはどうしたらいいのでしょうか。この場合、いくつかの方法があります。

パターン①

まずはあらかじめthisを別の変数に代入しておくパターンです。

See the Pen OKパターン | 変数にthisを代入 by タダケン@人事×データサイエンス (@tadaken3) on CodePen.

パターン②

bindでthisを紐づけた関数を作成するパターンも期待通りの動作をします。

See the Pen OKパターン | bindでthisを紐付ける by タダケン@人事×データサイエンス (@tadaken3) on CodePen.

パターン③

また、少しややこしいですが、コールバック関数で、アロー関数を使う場合も、Vueインスタンスを参照することができます。

See the Pen OKパターン | コールバック関数でアロー関数を使う by タダケン@人事×データサイエンス (@tadaken3) on CodePen.

パターン④

無名関数ではなく、Vueインスタンスのメソッドとしてする方法でもthisにアクセスできます。ただ、こちらも少しややこしいので、基本的にはあまり使わないほうがいいかもしれません。

See the Pen OKパターン | Vueインスタンスのメソッドを指定 by タダケン@人事×データサイエンス (@tadaken3) on CodePen.

まとめ

Vueを使用した場合のthisのスコープについて、あらためて、まとめてみます。

Vueインスタンスのthisを参照したい場合は

  • アロー関数は使えない
  • コードを短くしたい場合は短縮記法を使う。

また、コールバック関数からVueインスタンスのthisを参照したい場合は、

  • ①変数に代入する
  • ②bindする
  • ③アロー関数を使う

とするのが良さそうです。Vue.jsを学び始めた人の参考になればと思います!

↓Twitterもやっています。 twitter.com

参考書籍

基礎から学ぶ Vue.js

基礎から学ぶ Vue.js

PythonでSlackにメッセージを送る方法

f:id:tadaken3:20181027004418p:plain こんにちは!
タダケン(@tadaken3)です。

最近、仕事もプライベートもタスクが溢れていてあたふたしています。 とはいえ、週1ブログを更新するというのきちんと継続していきます。

ということで今回は軽めの記事です。

個別にSlackでリマインダーを送るタスクが発生したので、PythonからSlackにメッセージを送る方法をまとめました。

例えば、アンケートを実施していていて、まだ回答していない場合に、リマインダーを送るという使い方ができますね。

Botの作成とAPI トークンの取得

まずSlack側で準備をしていきます。今回は、ボットを作成して、ボット経由でメッセージを送ります。

ボットを作成するには以下のサイトにアクセスしてください。

Slack API: Applications | Slack

アプリの作成

サイトにアクセスすると、以下の画面が表示されると思いますので、Create New Appを押します

f:id:tadaken3:20181025202249j:plain

「App Name」と「Development Slack Team」を設定します。「App Name」はお好きな名前、「Development Slack Team」は先程作成したSlackのワークスペースを入力します。入力がおわったら「Create App 」を押します。

f:id:tadaken3:20181025202301j:plain

ボットの設定、ワークスペースにインストール

Basic Informationから「Bots」「Permissions」を選択します。 f:id:tadaken3:20181025202317j:plain

続いて、ボットの表示名を入力します。たとえばDisplay nameに「samplebot」と入力します。※こちらはお好きな名前で大丈夫です。 f:id:tadaken3:20181025202331j:plain

作成したbotをワークスペースにインストールします。 f:id:tadaken3:20181025203751j:plain

APIトークンの取得

「OAuth & Permissions」からSlack botを操作するためのTokenを取得します。取得したトークンは、あとで使用しますので、保存しておいてください。これでSlack側の準備が完了しました。

f:id:tadaken3:20181025202350j:plain

この画面の下の方に「Scopes」という箇所があるので、こちらに「bot」が付与されているかご確認ください。

f:id:tadaken3:20181025203915j:plain

PythonでSlackにメッセージを送る

さて、ここからはPythonでSlackにメッセージを送信していきます。

channel 内のユーザーの発言に応答するタイプの Bot ではなく、外部から Slack に投稿するだけであれば、 REST API を叩くだけで実現できます。 簡単ですね。

url = 'https://slack.com/api/chat.postMessage'
token = "xoxb-hogehogehogeghogehoge" # あなたのAPI Tokenを入れてくださいな
headers = {"Authorization" : "Bearer "+ token}
channel = "<channel or user to alert>" #ユーザーを指定するとDMが送られる
 payload = { 
        'channel': channel,
        'text': message,
        'as_user': True
}
r = requests.post(url ,headers = headers, data=params)

パラメータの詳細は API document を参照してみてくださいな。

Tech系Podcast「Cast for Fun」に出演してブログについて熱く語ってきた

f:id:tadaken3:20181018095206p:plain こんにちは!
タダケン(@tadaken3)です。

今回は機会があって、「Cast for Fun」というTech系Podcastにゲストとして出演させていただきました。祝Podcast初出演!Podcastでは結構いろいろ語らせてもらったのですが、Podcastで語れなかったことを出演後記(?)的な感じでまとめています。

Cast for Funとは?

WEBサービス開発者集団「入江開発室」に所属している現役エンジニアのぺんすけさんと営業職からエンジニアを目指しているコバヤシさんの2人が運営するPodcastです。

Cast for Fun | ただ楽しく、プログラミング界隈のことを話すPodcast

「Cast for Fun」という名前は、Linuxカーネルを作ったリーナス・トーバルズさんの「Just for Fun」という言葉から来ています。「Just for Fun」は「それがぼくには楽しかったから」と言う風に日本語で翻訳されていて、リーナス・トーバルズさんの自伝のタイトルにもなっています。

それがぼくには楽しかったから 全世界を巻き込んだリナックス革命の真実 (小プロ・ブックス)

それがぼくには楽しかったから 全世界を巻き込んだリナックス革命の真実 (小プロ・ブックス)

  • 作者: リーナストーバルズ,デビッドダイヤモンド,風見潤,中島洋
  • 出版社/メーカー: 小学館プロダクション
  • 発売日: 2001/05/10
  • メディア: 単行本
  • 購入: 20人 クリック: 282回
  • この商品を含むブログ (139件) を見る

「Cast for Fun」はその名の通り、プログラミング初心者、エンジニア界隈に興味のある人向けに、プログラミングやIT技術について、楽しくわいわい語っているPodcastになります。

「Cast for Fun」についての想いは、ぺんすけさんのブログにて熱く書かれていますので、こちらも読んでみると「Cast for Fun」がどんなPodcastを目指しているのか知ることができます。

【Cast-for-Fun】Podcast公開しました

Cast for Funで話したことについて

今回はブロガー枠でゲストに呼んでいただいたということで

  • タダケンにとってのブログとは?
  • ブログを書き続けるコツ

といったことを熱く語らせていただきました。

あと、ボク自身は、個人で複業(副業)をしつつ、サラリーマンとして生活もしているので、そのあたりの「二足のわらじ」を履くメリットなんかも、ちょっとお話しています。

内容についてあんまり書きすぎると、「Cast for Fun」を聞いていただく楽しみが減ってしまうので、この辺にしておきます笑

また、Podcastを聞いていただ方がTwitterに感想コメントをアップしていただいているのでいくつか掲載させていだきます。

「Just for Fun」が気になった方は、ぜひ聞いてみてもらえるとうれしいです。

Cast for Fun | ただ楽しく、プログラミング界隈のことを話すPodcast

Podcastに出演してみて

Podcastに出演してみて、ブログやYoutubeとはまた違った魅力のあるメディアだなということがわかりました。

楽しく話をしているだけで、コンテンツになる

ブログの場合、一つの記事を作成するのに3時間、下手すると5時間以上かかったりします。

けど、30分のPodcastを収録する場合、30分間しゃべるだけでコンテンツがほぼほぼ出来上がります。運営のお二人とゲストのボクという形なので、トークも発展しやすくて、30分という時間はあっという間に過ぎ去ってしまいました。ほんとに楽しいな時間でした。

もちろん、収録が必要なので、それはそれで時間を拘束されるのですが、適当にしゃべるだけである程度のコンテンツになるのが、Podcastの魅力の一つかなと思います。Youtubeよりも手軽ですし。あと、とにかく楽しかったです。

文字だけでは伝わらない雰囲気などを伝えることができる

Podcastを聞いてもらえるとわかるのですが、運営のお二人は癒し系ボイスで聞いていて和やかな気持ちになります。Podcastを聞くだけで、お二人の人柄が何となく伝わってきます。こういった雰囲気を文章で伝えることはとても難しいです。

コレは仮説なのですが、ブログ記事を1つ読んでもらうのと、Podcastを1つ聞いてもらうのでは、Podcastの方がコンテンツ制作者に対して親近感を覚えてもらえるのではないかなと思っています。

少し話が脱線しますが、inkdropを個人で開発しているTakuyaさんも開発者自身のストーリーを伝える重要性を以下のように語られています。

作者はプロダクトの一部です。なので、ブログの記事は他の誰かではなくあなた自身のストーリーである必要があります。すると記事を読んだ人は、あなたに興味を持ちます。数人のユーザさんが言っていました — 彼らは僕のプロダクトというよりもむしろ僕自身を応援したいのだと。
引用:月5ドルの自作サービスで最初の500人を集めるまでにやったこと – 週休7日で働きたい

雰囲気を含めて開発者の背景・ストーリーを伝えるのに、Podcastはちょうどよいメディアだなと気が付きました。

まとめ

たぶん、ブログだけではこの雰囲気は伝わらないので、ぜひPodcastを聞いてくれるとうれしいです。

これからどんどん発展していくと思いますので、このブログとともに「Cast for Fun」をよろしくお願いいたします。「Cast fou Fun」は毎週土曜日の夜18時ごろに更新予定!

また、「Cast for Fun」にも出演できるといいな。

Cast for Fun | ただ楽しく、プログラミング界隈のことを話すPodcast

10分でできる!GitHub Pagesで静的サイトを公開する方法

f:id:tadaken3:20181012133942p:plain こんにちは!
タダケン(@tadaken3)です。

今回は、GitHub Pagesを使って、静的サイト公開する方法をお伝えします。GitHub のアカウントがあれば10分ほどで自分のサイトを公開できます。

GitHub Pagesとは

GitHub Pages とは、GitHub による静的サイトのホスティングサービスです。とても簡単でお手軽です。しかも無料です。

例えば、自分のポートフォリオサイトやプロフィール、職務経歴書などを、GitHub Pages を使って公開しておくと、自己紹介をするときに便利です。また、ポートフォリオサイトやプロフィールを見て、思わぬところから声がかかるかもしれませんね。

とっても簡単!GitHub Pagesの作り方

では、早速、GitHub Pagesを利用して、サイトを公開してみましょう。まずはGitHubのアカウントを作ります。まだ、アカウントがない方は以下の記事などを参考にアカウントを作成してください。

Githubのアカウント作成方法

リポジトリを作る

ますは置くリポジトリを作成します。ここにサイトのソースコードを保存していきます。ここで設定したリポジトリ名がサイトのURLにも使われるので、かっこいい名前を考えましょう!

f:id:tadaken3:20181012125737p:plain

index.htmlファイルを作成する

ここからはローカルでの作業になります。Macユーザーを想定していますのが、Windowsの方も大きくは変わらないと思います。

まずは先程、作成したリポジトリをgitを使ってクローンします。

クローンするには

$ git clone 【GitHubリポジトリのアドレス】

を実行します。

たとえば、先ほど作成したリポジトリをクローンしたい場合は以下のように実行します。

$ git clone https://github.com/tadaken3/github-page-sample.git

クローンできたら、リポジトリに移動して、index.htmlファイルを作成します。

$ cd github-page-sample
$ touch index.html

これで空っぽのindex.htmlファイルができました。

index.htmlに、サイトの中身をコーディングしていきます。今回はサンプルで以下のHTMLファイルを用意してますので、こちらをコピーして使ってみてください。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>タダケンのEnjoy Tech GitHub Pages Sample</title>
    <!--今回はサンプルのためMarxというシンプルでそれでいて小奇麗なCSSを使っています-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/marx/2.0.4/marx.css">
  </head>

  <body>
    <main>
      <h1>GitHub Pages のサンプルです</h1>
      
      <a href="https://tadaken3.hatenablog.jp/"><button>タダケンのEnjoy Tech に行く</button></a>
      <a href="https://irie-dev.co/"><button>入江開発室 に行く</button></a>
      
   </main>
   <script>
     <!--JavaSciptの動作確認のため、console.logに出力しています-->
     console.log('JavaScriptも動きます');
   </script>
  </body>
</html>

HTMLファイルができたら、作成したコードをPushしていきます。リポジトリにコードをアップすることをPushといいます。

以下のコマンドを実行して、リポジトリにコードをpushします。

$ git add index.html
$ git commit -m "index.htmlファイルの作成"
$ git push  origin master

すると、こんな感じでリポジトリにindex.htmlファイルが追加されているはずです。

f:id:tadaken3:20181012104932j:plain

GitHub Pagesの公開設定をする

では、GitHubのサイト上で公開設定をしていきます。settingsタブを開きます。

f:id:tadaken3:20181012130306p:plain

下の方にある GitHub Pages までスクロールします。

あとは、Source のところで、master branch を選択し、その後 Save ボタンを押します。

f:id:tadaken3:20181012125833p:plain

これで公開設定が終わりました!

公開したサイトにアクセスしてみる

URLは https://ユーザ名.github.io/リポジトリ名 となります。今回のサンプルだと https://tadaken3.github.io/github-page-sample/ です。

サイトがこのように表示されていたら成功です。

f:id:tadaken3:20181012131253p:plain
GitHub Pages で 公開したサイト

consoleをみると、JavaScriptが動作していることもわかります。 f:id:tadaken3:20181012130838p:plain

まとめ

今回はGitHub Pages を活用して、無料で静的サイトを公開する方法をお伝えしました。ほんとに簡単にサイトを公開できるので、ポートフォリオサイトやプロフィールサイトをぜひ作ってみてくださいな。

最後に少しお願いです。

ここまで読んでいただきありがとうございます。

最後にあなたに少しお願いがあります。この記事が少しでも役に立った、気付きがあったという方は、ぜひこの記事をTwitterにシェアしていただきたいです。

はてなブックマークをしていただく形でも大丈夫です。コメント付きだと、もっと嬉しいです。

ぜひ、よろしくお願いいたします。

参考

明日、開催予定の「技術書典5」で販売される技術書から気になるものをまとめてみた!

f:id:tadaken3:20181007182804p:plain こんにちは!
タダケン(@tadaken3)です。

明日、10/8に池袋サンシャインシティにて技術書典5が開催されます。技術書典とは、「技術書」をテーマとする同人イベントです。「技術書典ってどんな感じなのって?」って方は、前回の参加レポートをまとめていますので、こちらをご覧になってくださいな。

tadaken3.hatenablog.jp

技術書典の本は30ページ〜100ページ前後のものが多く、サクッと読めるのがいいところだと思っています。ニッチな分野や比較的新しい技術の本があったりするので、其のあたりを物色するのが楽しかったりします。

AIメーカーを作成された2zさんが、技術書典のサークルリストから気になる技術書をピックアップされていたので、自分もマネしてまとめてみました。

www.sukimanote.com

最近はWEBサービスづくりのために、フロントエンド・デザイン周りをできるようになりたいなと思っているので、そのあたりの本を中心に購入しようかなと思っています。

フロントエンド・デザイン

techbookfest.org

「Try PWA」「知らないと損するChrome Developer Tools」「マテリアルデザインをかじる本」の3冊が販売される模様です。全部欲しいです。

techbookfest.org

「機能するUI」って気になりますよね。色んな人に使ってもらうには、使いやすいUIにしたいと思っていますし。

techbookfest.org

Chrome Developer Toolsを使いこなせてないので、使いこなせるようになりたいので!

techbookfest.org

ちょうどVueでWebサービスを作っているので、ドンピシャすぎます。絶対買うぞ!!

techbookfest.org

最近、CSSをきちんと勉強していて、わかったつもりになっていたなと認識させられたので、あらためてちゃんと理解したいなと思っています。

techbookfest.org

自分なりにJavaScriptの歴史はまとめたことがあるのですが、フロントエンド技術はほんとに進化のスピードが早いなと思うので、きちんと抑えておきたいなと感じてピックアップしています。

tadaken3.hatenablog.jp

firebase

techbookfest.org

iOSはまったくわからないですが、Firebaseは、いまちょうど、自分がいちばん興味があるところなので、この本を読んで知識を深めたいなと思っています!



Netlify

techbookfest.org

いま、Firebaseを勉強中なので、Netlifyに手を出すのは少し先になりそうですが、研究も兼ねて購入予定です。

techbookfest.org

静的サイトジェネレータGatsbyJSは前々から気になっていたので、これを機会に勉強したいなと。

AI・人工知能

techbookfest.org

ミニ四駆とAIの組み合わせがすごそうだなと。こういうマニアックな本にであるのが技術書典のいいところですね。

techbookfest.org

こちらはポケモンとAIの組みあせです。じつは昔、ポケモン廃人でした。11月に新しいポケモンが出るので、予習(?)も兼ねて笑

チームビィルディング

techbookfest.org

目次を見て、すごい良さそうだなと感じました。最近、コミュニティ運営を考えることが多いので、是非参考にしたいなと。

  • 本当にそう?心理学から学ぶ、"教える"人がハマる罠
  • OJTの学習学
  • 勉強したことをチームに持ち込むための障害と対策を考える
  • 人の仕組みを理解するための学術情報を参照した文献を読む意義
  • 教育心理学を利用して、日常の学びを改善し、課題を解決する
  • 人が理解する仕組みから考えるチームビルディングのコツ

まとめ

最後に技術書典の開催要項を記載いたします。ぜひ足を運んでみると新たな技術との出会いがあるかもしれません。

  • 日時 2018/10/08 (月) 11:00〜17:00
  • 場所 池袋サンシャインシティ2F 展示ホールD(文化会館ビル2F)

techbookfest.org

2018年10月9日追記

無事に購入できました!

ブログ更新を支える技術

f:id:tadaken3:20181004173547p:plain こんにちは。
タダケン(@tadaken3)だよ。

ブログってはじめるのは簡単。だけど、続けるのは難しい。1年以上続くブログは3割しかいないというデータもある。

上記の記事は、いかにブログの継続が難しいか物語っている。そこで今回はボクが実践しているブログ更新を支える技術をお伝えする。ちょっとしたTipsだが参考になれば幸いだ。

ブログを書くためのマインドセット

ブログを書く上で、ぜひ、読んでほしいのがカカカカックさんの「ブログを書く技術」だ。カカカカックさんは10年にも渡って、技術ブログを書き続けている猛者中の猛者だ。

kakakakakku.hatenablog.com

詳細はぜひ記事を読んでいただくとして、ボクが記事を読んで心に刺さった部分はこの3つ。

  • 「ブログを書く前提で」タスクに着手すること
  • いつ誰が「ブログより仕事が重要」と決めたの?
  • 3ヶ月はKPIなんて考えず、とにかくブログを書き続ければよい

とくに「仕事よりもブログのほうが重要」と言い切るカカカカックさんは本当に強い。まずは、上記の記事を読んでブログを書くマインドセットをアップデートしてほしい。

ブログ仲間を作る

最近、すごく実感しているのがブログ仲間がいると頑張れるということ。このブログをデザインしてくれたろくぜうどんさんからのお誘いで、「週一でブログ更新をする会」」というFacebookグループに入っている。

「週一でブログ更新をする会」ではスプレッドシートに参加メンバーの

  • ブログ名
  • 最終更新日
  • ブログをどれくらい更新していないのか

などの項目が、まとめられている。ブログ更新をしていないとスプレッドシートの色が黄色→赤→黒と変化していって、更新してないことがすぐにわかる。このスプレッドシートの色が変わるとすごく煽られるのだ。

幸い、継続してブログ更新ができているので、今のところ、ボクは煽られたことがない。けど、他の人が煽られているのをみると、頑張って更新しようと思う。

上記のメソッドを色んな人に共有したく、ボクがいま所属している入江開発室のSlackで「週1ブログで更新するチャンネル」を作った。「週一でブログ更新をする会」と同じようにスプレッドシートを使って、お互い励まし合いながらブログを更新している。

f:id:tadaken3:20181004095215p:plain

ちなみにスプレッドシートのテンプレートはこれ。もし使ってみたい方はコピーして使って。スプレッドシートの関数を使って、自動で最終更新日などを取得している。

【公開用】週1でブログを更新する - Google スプレッドシート

チャンネルの様子は、こちらの記事を読むとよくわかるはず。メンバーのもりさんがまとめてくれた。

www.excel-prog.com

「週一でブログ更新をする会」に参考にwrite-blog-every-weekというSlackの運営はじめた人も見つけた。ブログ仲間がほしい人は、こちらに参加するというの良さそう。

kojirooooocks.hatenablog.com

ブログ仲間がいることの重要性

自分の経験を振り返ってみても、仲間がいることがとてつもなく大きい。

ボクはもともと「いつも隣にITのお仕事」というブログで、記事を執筆していた。「いつも隣にITのお仕事」では運営者のタカハシさんのもと、メンバーみんなで一つのブログを運営していく。「いつも隣にITのお仕事」で学んだ経験をもとに始めたのがこのブログだ。

いままで何度もブログに挑戦し、その度挫折を繰り返していたボクだったけど、「いつも隣にITのお仕事」ではブログを継続して更新することができた。それはシンプルだけど

  • 締切があったこと
  • フィードバックしてくる仲間がいたこと

がとても大きかったんだと思う。その時のことは以下の記事にまとめているで、興味がある人はぜひ。

tadaken3.hatenablog.jp

自分のブログがシェアされた通知する

ブログ書いている人はわかると思うが、ブログを書くのって実はむちゃくちゃ時間がかかる。ボクの場合、記事の構成、必要な画像素材の準備、アイキャッチ画像の作成なども含めて、ひとつの記事を書くのに少なくとも2〜3時間はかかっている。



だから、上記でも書いたようにシェアしてもらうとすごく嬉しい。とくにコメント付きでシェアしてくれた人なんかにはメンションして感謝の気持ちを伝えたりもする。

f:id:tadaken3:20181004135609p:plain
シェアしてくれた人にリプライする様子

そのため、Twitterでブログをシェアしてくれた人を検知できるようIFTTTを使って、Slackに通知させるようにしている。やり方は以下の記事を参考に。

starhoshi.hatenablog.com

設定するとこんな感じで通知される。

f:id:tadaken3:20181004140009p:plain
IFTTT経由でSlackにエゴサーチの結果が通知される

参考までに、ボクの検索キーワードを載せておく。ちょっとだけ工夫してあって、自分のアカウントのツイートは除くようにして「ブログのドメインを含むツイート」を通知するようにしている。

tadaken3.hatenablog.jp -from:@tadaken3

苦労して書いた記事を、どんな人が読んでくれていて、どんな風に思われているかを知ることはモチベーションにつながる。これはちょっとした工夫で知ることができる。

どの記事が読まれているのかを毎朝、確認する

基本的にPVなんかはほとんど見ていないのだが、毎朝、どんな記事が読まれているのかは確認するようにしている。どんな記事がよく見られているかを確認して、ブログ運営のヒントにしている。これもSlackに通知するようにしている。

f:id:tadaken3:20181004134710p:plain
毎朝Slackに前日のランキングを通知

こちらの記事を参考に毎朝、ブログ記事別のランキングを通知する。

tonari-it.com

元記事はチャットワークに通知しているが少し改良して、Slackに通知。コードはこちら。

function main(){
  var message = getData();
  sendSlack(message);
}

function getData(){
  var mySS = SpreadsheetApp.getActiveSpreadsheet();
  var sheetRanking = mySS.getSheetByName("rankingHatenaBlog");
  var yDate = sheetRanking.getRange("C16").getValue();
  yDate = Utilities.formatDate(yDate,'JST','yyyy/MM/dd')
  
  //header
  var message = "はてなブログのランキング(" + yDate + ")\n\n";
  
  //body
  for(var i =1; i<=5; i++){
     var rank = "[" + i + "]"
     var pv = sheetRanking.getRange(i+15 ,4).getValue();
     var title =sheetRanking.getRange(i+15 ,1).getValue();
     message = message + rank + pv + " / " + title + "\n\n";
  }
 
  //footer
  var sheet_url = mySS.getUrl()
  message = message  + sheet_url
  return message
}

function sendSlack(message) {
  var prop = PropertiesService.getScriptProperties();
  var postUrl = prop.getProperty('SLACK_POST_URL');
  var username = 'blog-ranking';  // 通知時に表示されるユーザー名
  var icon = ':hatching_chick:';  // 通知時に表示されるアイコン
  
  var jsonData =
  {
     "username" : username,
     "icon_emoji": icon,
     "text" : message
  };
  var payload = JSON.stringify(jsonData);

  var options =
  {
    "method" : "post",
    "contentType" : "application/json",
    "payload" : payload
  };

  UrlFetchApp.fetch(postUrl, options);
}

まとめ

以上がブログの更新を続ける上でボクが実践したり、意識していることになる。

  • ブログを書くマインドセットをアップデートする
  • ブログ仲間を見つけて励ましあう
  • ブログをシェアしてくた人を発見してモチベーションにつなげる
  • どんなブログ記事が読まれているかチェックしてブログ運営の参考にする

基本的なことだったりするけど、基本的なことを情熱を持ってやるのが大事。今後も継続してブログ更新を続けていきたい。

おまけ / ブロガー仲間のご紹介

ぼくと関わりのあるブロガー皆さんをご紹介。お仕事などでご縁があったり、上記のブログ更新チャンネルでの仲間をリストアップした。気になるブログがあればぜひ、ブログを読んで感想をTwitterなどでコメントしてほしい!

ご縁のあるブロガーの皆さん

いつも隣にITのお仕事 | 毎日の業務が楽チンに!

Google Apps ScriptやExcel VBAを活用した仕事を効率よく進める技術をノンプログラマー向けにまとめているブログ。僕のブログ師匠であるタカハシさんが運営している。ブログで大切なことはすべてタカハシさんに教わった。

LOGzeudon

僕のブログのデザインをしてくれたデザイナーのろくぜうどんさんのブログ。デザインに困ったらろくぜうどんさんに相談するといい。

teanote00|note

ご縁があってPythonを教えているマーケターのさとうさんのnote。マーケティングやUX・デザインについての記事がアップされている。イベントレポートも多いので楽しい。

好奇心の強い大学生のちょっとした情報発信

同じくご縁があってPythonやSQLを教えている大学生、はやとさんのブログ。すごいガッツのある学生さん。お役立ち情報が多い。

入江開発室 ブログ更新チャンネルのメンバー

IRITEC

入江開発室のまとめあげるいりえもんこと入江さんのブログ。WEBサービス開発の知見が惜しみなく公開されている。いりえもんって流行らせたい。

スキマノート

AIメーカーを作成された2zさんのブログ。AIメーカの開発話や2zさんが作ったサービスのことが 書かれている。倍プッシュ。

岸祐太 / Yuta Kishi|note

数学修士、認定スクラムマスターなどをお持ちの岸さんのブログ。入江開発室での学びを中心に記事を公開している。入江開発室のポートフォリオ制作にも携わった。

ブログ | RUBYDESIGN. (ルビーデザイン)

入江開発室で一番多くのプロジェクトに関与しているデザイナーのマツイさんのブログ。最近、プログラミングも勉強し始めてたそうです。個人的には、初学者視点でのLaravelの記事が好き。

ぺんすけブログ

メンタリングがとても上手なPHPerなぺんすけさんのブログ。とにかく初心者向けに教えるのがとても得意。最近はLaravelの記事を書くのに注力しているらしい。あとポエムにもハマっている。

コバヤシ リョウタ|note

営業からエンジニアに転職しようと決意して入江開発室に飛び込んだコバヤシさんのnote。毎日、「早さこそジャスティス」と叫んでいる。

育児しながら転職する! - 育児と仕事を両立したい!理想の働き方を求めてSESからWEB企業への転職を目指します!

ぺんすけさんのメンティさんのあきさんのブログ。ブログタイトルにもあらわれている通り「育児しながら転職する!」というすごい決意!応援したくなる。

Koushi Kagawa|note

美味しそうな秋刀魚を自慢してくるWEBエンジニアの賀川さんのnote。音楽フェスの話題なども幅広く扱っている。秋刀魚がとにかくうまそう。

基礎から学ぶVBAプログラミング教室

タカハシさんが運営しているノンプロ研究会の一員であるもりさん。最近、入江開発室に入ってきたので、ブログ更新チャンネルに引きずり込んだ。VBAの記事が中心。

よしたく blog

最近、入江開発室に入ったエンジニアのよしたくさんのブログ。よしたくさんはカカカカックさんのブログメンティだったそうで、もちろんブログ更新チャンネルに引きずり込んだ。

kou|note

カカカカックさんからプログラミングを教わったKouさんのnote。カカカカックさんのメンティなので当たり前のように週一で更新してくれると期待。

arutega.jp

最近、入江開発室に入ったデザイナーの平尾さんのブログ。本業デザイナーのブログはやっぱりおしゃれ。海外エンジニアリングとWebデザインについて発信されている。

NARI_Creator - Qiita

入江開発室の「ポートフォリオサイト」を牽引していたNARIさんのQiita。最近、フリーランスになったらしい。

Junjungroove|note

「起業戦闘力」で開発をはじめたエンジニアのたがじぇさんのnote。とにかくエモい。今後はPythonや統計の記事を書くいてく予定とのこと。

B-minor. | フリーランス × エンジニア

入江開発室の「起業戦闘力」プロジェクトでリーダーだったまっきーさんのブログ。フリーランス視点での生きた知識・知恵が公開されている。たぶん。自分からブログ更新チャンネルに入ったのにお尻を叩くと文句を言う。

以上だ。ぜひ皆さんも楽しいブログライフを!

データサイエンティストが選んだ!データ分析を仕事に活かしたい人へオススメの本18選

f:id:tadaken3:20180930021912p:plain こんにちは!
タダケン(@tadaken3)です。

新宿のとあるIT企業でデータサイエンティストとして働いてます。1

データ分析を学びたい人、データ分析でビジネスを改善したい人へ、おすすめの本を紹介していきます。初心者データサイエンティストや、エンジニアさん、マーケターさん、独学でやってたけど基礎を学びたい人などもどうぞ!

ジャンル別に紹介しています!

データ分析を始める前に読む本 / マインドセット

会社を変える分析の力

会社を変える分析の力 (講談社現代新書)

会社を変える分析の力 (講談社現代新書)

  • 作者:河本 薫
  • 発売日: 2013/07/18
  • メディア: 新書

大阪ガスのチーフデータサイエンティストの河本さんの書籍。「なんのためにデータ分析をするのか?」ということを気付かされてくれる一冊です。

ビジネスの現場において、

  • ビジネスにプラスのインパクトを与えるか
  • 正しい意思決定にどれだけ貢献できたか

がいかに重要かということを教えてくれます。難しい数値計算してもビジネスインパクトがゼロの分析だと意味がないですよね。

本物のデータ分析力が身に付く本

続けて大阪ガスの河本さんの本。こちらはワークショップ形式の本で、実際に手を動かしながら読み進めていく、いわば実践の書です。

この本では「課題設定の方法」「データの前処理をきちんとする」ということに紙面の多く割かれています。

実際に分析に使うのはExcelだけなのですが、「課題設定」さえ正しくおこなって、「データの前処理」をきちんとおこなえば、精度の高い分析ができることを実感できると思います。

Google流資料作成術

Google流資料作成術

Google流資料作成術

最初に紹介した2冊が「課題設定」に関する本であるならば、「Google流資料作成術」はデータを使って「いかに人を動かすか」ということにフォーカスした本です。日本語の書籍名だと小手先の資料作成のテクニック本に感じられますが、全く違います。

原題は「Storytelling with data」となっており、

  • データを使って人を動かすストーリーをつむぐ方法
  • そのストーリーを最大限伝えるためのグラフ作成術

について書かれています。今回紹介した本のなかでどれか1冊を選ぶとしたら、間違いなくこの本です。

本ブログでも以前、書評を書いているので詳しく知りたい方はこちらもご覧になってくださいな。

tadaken3.hatenablog.jp

ちなみにTHE GUILDのAndoさんにも、こちらの本を紹介したところ、以下のコメントいただきました。

SQL編 / データを自在に集計するために

10年戦えるデータ分析入門 SQLを武器にデータ活用時代を生き抜く

分析用のSQLを勉強するとしたらこの1冊がすごくオススメ。SQLの基本から始まり、具体的で実務レベルで使えるSQLの書き方を学ぶことができます。

データ分析といえばPythonやRじゃないの?と思われた方がいるかもしれません。ですが、企業が取り扱うデータはほとんどの場合、データベースに格納されています。データベースに入ったデータをいちいち開発エンジニアに頼んでいて、データを出してもらっていては、分析も一向に進みません。そのため、データ分析においては、SQLはほぼ必須といっても過言ではありません。

いまやメルカリピクシブクックパッドなどのIT企業ではディレクター・プランナーやマーケターなどの非エンジニアの方が自分でSQLを書いてデータ分析をしています。

逆に言うと非エンジニア職でも、まずはSQLさえかければ、自在にデータを扱えます。大丈夫。この1冊を読めばあなたもSQLが書けるようになるはずです。

ビッグデータ分析・活用のためのSQLレシピ

ビッグデータ分析・活用のためのSQLレシピ

ビッグデータ分析・活用のためのSQLレシピ

こっちのSQL本はデータ分析でよく使うテクニックがまとめられています。中級者向け。「10年戦えるSQL本」を読んでから読むのがおすすめです。

この本の良いところは、Google Big Query・Redshift・HIVE・Spark・PostgreSQLなど、多様なデータベースに対応したSQLがまとめられているところです。コードの検証作業むちゃくちゃ大変だったんだろうなと思わせる一冊。

また、SQLだけでレコメンドエンジンを実装するところまで学べます(若干、やりすぎ感もありますが)。SQL上級者でも、きっと参考になるテクニックが見つかるとお思います。

Python 入門編

みんなのPython

みんなのPython 第4版

みんなのPython 第4版

  • 作者:柴田 淳
  • 発売日: 2016/12/22
  • メディア: 単行本

みんなだいすきPythonさん!Pythonブームが来ているので、巷ではPython関連の入門書がたくさん出版されていますが、この本が一番わかりやすいし、内容も過不足ないと思います。

初版は2006年8月26日に発売されましたが、Pythonのバージョンアップに合わせて、現在は第4版までアップデートされています。歴史の波に揉まれて第4版となっていることもあり、内容はほんとに洗練されています。

Python初心者の方はまずこの1冊を読んで、手を動かしてみることをおすすめします。

Pythonによるデータ分析入門

Pythonによるデータ分析入門 第2版 ―NumPy、pandasを使ったデータ処理

Pythonによるデータ分析入門 第2版 ―NumPy、pandasを使ったデータ処理

  • 作者:Wes McKinney
  • 発売日: 2018/07/26
  • メディア: 単行本(ソフトカバー)

Pythonで、データ分析をする際によく使うNumpyやPandasについて解説した本。ちょっと分厚い本なので、手元においておいて、リファレンス的に読むのがいいです。最近、第2版が発売されたばかりというのも熱いです。

統計学 入門編

「マンガでわかる統計学」シリーズです。

マンガでわかる統計学

マンガでわかる統計学

マンガでわかる統計学

マンガでわかる統計学 回帰分析編

マンガでわかる統計学 因子分析編

マンガだからといって侮ってはいけません。専門書だと読む気がなくすような内容も、イラストとストーリーのおかげで比較的楽に読み終えることが出来きるはずです。難しい専門書を読んで理解できずに挫折するぐらいなら、この本を繰り返し読んで、基礎を固めるほうがずっといいです。

3冊とも全部オススメなのですが、3冊のなかでどれか1冊だけ選ぶとすれば「回帰分析編」です。気になる方はまず、「回帰分析編」を読んでみてくださいな。

完全独習 統計学入門

完全独習 統計学入門

完全独習 統計学入門

  • 作者:小島 寛之
  • 発売日: 2006/09/28
  • メディア: 単行本(ソフトカバー)

「これ以上何かを削ったら、統計学にならない」というコンセプトで書かれた本です。といいつつも平均や標準偏差からはじまり、カイ二乗分布、t分布といったところまで網羅されています。

この本を読めば「偏差値70」といわれて、その人がどれぐらいの位置にいるのか、具体的に理解できるようになると思います。

統計学 手を動かして学ぶ

心理統計学の基礎

「統計学をきちんと使えることを目指して初歩から勉強する」場合のテキストとして、この本は「神レベル」だと思います。「統計学的なものの考え方」を身につけるための解説と「実際の分析の方法」を身につけるための解説が、いい感じにミックスされています。数式の解説もすごく丁寧です。

「マンガでわかる統計学」「完全独習 統計学入門」と比べて、少し難しいところもあるかと思いますが、じっくり読むことで、データ分析を進めていく上ので基礎を固めることができる1冊です。

Rによるやさしい統計学

Rによるやさしい統計学

Rによるやさしい統計学

よくわかる心理統計 (やわらかアカデミズム・わかるシリーズ)」の内容を統計用のプログラミング言語Rで実践する本です。

「心理統計学の基礎」が統計の解説書だとすれば「Rによるやさしい統計学」はRの実践書になります。Rを使って統計を学びたい方は「Rによるやさしい統計学」を読みながら、手を動かしてみるとすごく力つきます。

データ分析の実務で役に立つ一冊

統計学が最強の学問である[ビジネス編]

ベストセラーとなった「統計学が最強の学問である」の続編です。

このブログを読んでいる方は「統計学が最強の学問である」を読んだことがあるかもしれませんね。この「ビジネス編」は「統計学が最強の学問である」の内容をビジネスの現場に落とし込んだ1冊です。

「経営戦略・人事・マーケティングなどでの領域でどうやって統計学を活かすのか」といったことに踏み込んで書かれています。また、「統計学が最強の学問である」は統計手法の中でも「回帰分析」に特化していおり、実践しやすいのも良いところです。

前処理大全

データ分析において、前処理は全行程の8割を占めます。その前処理について書かれた本です。

精度の高い分析をするには、データの前処理を丁寧にやることが本当に重要です。

データ分析のさしすせそは

  • さ:さっさと前処理しろ
  • し:しっかり前処理しろ
  • す:素早く前処理しろ
  • せ:正確に前処理しろ
  • そ:早急に前処理しろ

とも、いわれています。何度も言いますが、それぐらい前処理大事です。

GoogleのデータサイエンティストであるTJOさんもこのようにおっしゃています。

この本には、SQL・R・Pythonのそれぞれでデータの前処理をどのようにしたらいいのかまとまられています。読むためにはコードが理解できるぐらいの知識は必要ですが、手元においておくとすごく便利です。

仕事ではじめる機械学習

仕事ではじめる機械学習

仕事ではじめる機械学習

「機械学習をどうやってシステムに落とし込んで設計していくのか」をイメージできる良書です。

この本のいいところは、機械学習の本なのに「機械学習をせずに分析を進めることができない」かがきちんとかかれていることです。上司や取引先に「AIとか機械学習でなんか」と言われたときに読んでおくとすごく助かります。

正直、「機械学習はコストになりやすい技術」です。機械学習をシステム化を検討する場合、負債化させないためにどうしたらいいのかということまで書かれていてとても勉強になります。

番外編

改訂2版 データサイエンティスト養成読本

データサイエンティストの業務領域をさらっと理解するのに適した1冊です。モックなのでサラッと読めるのもよいところです。

数字のモノサシ

数字のモノサシ

数字のモノサシ

イラストレーターの寄藤文平さんが書いた絵本です。この本は統計学の本でもプログラミングの本でもありません。絵本です。

ですが、数量感覚を磨く上でこれ以上の本はないと思っています。例えば、1と100と10000の違いって体感的に把握できていますか?

ナンノコッチャと思いますが、数字に対して、苦手意識がある人はぜひ手にとって読んでみてください。あとイラストが箱庭感あってすごくかわいいです。

まとめ

データ分析に関するオススメの書籍18冊をまとめてみました。

今回、紹介した本を読んで手を動かして実践することで、データ分析のスキルを身につけることができると思います。

最後はとにかく実践です。

最後に少しお願いです。

ここまで読んでいただきありがとうございます。

最後にあなたに少しお願いがあります。この記事が少しでも役に立った、気付きがあったという方は、ぜひこの記事をTwitterにシェアしていただきたいです。

ぜひ、よろしくお願いいたします。 Twitterもやっています。 twitter.com


  1. どんな仕事をしているかは、日経産業新聞のインタビュー記事をご覧ください。tadaken3.hatenablog.jp

Mackerelで部屋のコンディションを監視する

f:id:tadaken3:20180926195437p:plain こんにちは!
タダケン(@tadaken3)です。

季節が変わり目で少し肌寒くなってきましたね。

部屋のコンディション(気温・湿度など)はパフォーマンスに強く影響します。

例えば、ジメジメしていると汗が気になって仕方がなかったり、部屋が寒すぎて集中できなかったり。

今回はMackerelNature Remoを使って部屋のコンディションを監視する方法をまとめました。

Mackerelを採用した背景

部屋のコンディションを監視する上で、やりたかったことは、大きく以下の2つです。

  • 自分の部屋の温度や湿度などのコンディションを数分ごとに記録してグラフで可視化すること
  • 温度や湿度などがコンディションが変化したら通知をすること(湿度が高すぎるなど)

とくに大事なのが2つ目の「部屋の状態が変化したら自動でアラートする」という部分です。部屋の温度や湿度を監視するだけなら、Google Apps Scriptとスプレッドシートだけでも実現できます。

しかし、グラフにして計測するだけとなると、都度、自分でグラフを見にいかなければなりません。快適な環境を維持して、プログラミングやブログ執筆に集中したいのに、それはとてもめんどうです。

そこでサーバー管理・監視ツールのMackerelを使うことにしました。Mackerelには、「サービスメトリックス」という機能があり、サーバーに紐付かないあらゆるメトリックを記録・可視化できます。

mackerel.io

サービスメトリックは利用するのも簡単で、メトリックの投稿はシンプルなHTTP+JSON APIで行えます。投稿してしまえばメトリックは自動的にでグラフ化されて、すぐにMackerelのWEBサービスから確認できます。

もともと、サーバー管理・監視のためのサービスなので、しきい値を設定してSlackやチャットワーク、LINEに通知することも簡単にできます。

また、Mackerelは最初の2週間は無料のトライアルプランで利用でき、その後も(機能は制限されるものの)Free プランに自動的に移行するので、コスト面でも安心です。

単純にMackerelはグラフを見ているだけで楽しいというのもあります。ほんとにMackerelは神サービスですね。

湿度や温度の取得は、Nature Remoで行っています。「温度・湿度」のセンサー部分は、ラズパイや他のセンサーデバイスに置き換えることも可能です。

Nature Remo APIからの湿度・気温データの取得とMarkerelへの投稿については、このためにサーバーを用意するのも大変なので、Google Apps Scriptで実装することにしました。ほんとGASは便利ですね。

システム概要をまとめるとざっくりこのような感じです。

f:id:tadaken3:20180926172948p:plain

必要なアカウントの取得など

今回、必要なのはNature RemoのアクセストークンとMackerelのアカウントです。

Nature Remoのアクセストークンを取得する

まずは以下のサイトにログインして、Nature Remoのトークンを取得します。取得したトークンはどこかにメモしておきます。

home.nature.global

Mackerel のアカウントを作成する

次に、Mackerel のサイトに行きアカウントを作成します。Mackerel ではGoogleやGithubのアカウントでサインアップすることもできます。

mackerel.io

Mackerel のAPIトークンを取得する

アカウントが作成できたら、xメトリックを投稿するためにMackerelのAPIキーを取得します。APIキーはダッシュボードの「APIキータブ」で確認できます。

f:id:tadaken3:20180926144505p:plain

Google Apps ScriptでNatureRemoからデータを取得してMackerelに投稿する

それでは、Google Apps Scriptで実装していきます。NatureRemo APIからデータの取得して、整形して、Mackerel投げるという流れです。Nature RemoとMackerel の認証情報は、スクリプトのプロパティに保存してください。

あとは、このスクリプトを時間トリガーで5分毎に実行するだけです。

function main() {

   var prop = PropertiesService.getScriptProperties();
   var natureRemoApiToken = prop.getProperty('NATURE_REMO_TOKEN');
   var mackerelApiKey = prop.getProperty('MACKEREL_API_KEY');
   var serviceName = 'room-condition';//Mackerelのサービス名を入力
   
   var data = getNatureRemoData(natureRemoApiToken)
   var payload = formatToPayload(data);
   postMackerelServiceMetric(mackerelApiKey, serviceName, payload);
}

//Nature Remo APIから部屋のデータを取得する
function getNatureRemoData(apiToken){
  url = 'https://api.nature.global/1/devices';
  var options = {"headers" : {"Authorization" : "Bearer "+ apiToken}};
  res = UrlFetchApp.fetch(url,options);
  return res
}

//Mackerel用にデータを整形する
function formatToPayload(data){
  var jsonData = JSON.parse(data);
  var te = jsonData[0]['newest_events']['te']['val'];
  var hu = jsonData[0]['newest_events']['hu']['val'];
  var epoch = Date.now() / 1000;
  
  var payload = [
    {
      'name' : 'room.temperature',
      'time' : epoch,
      'value' : Number(te)},
    {
      'name' : 'room.humidity',
      'time' : epoch,
      'value' : Number(hu)},
      
  ];
  return payload 
}

//Mackerelに送る
function postMackerelServiceMetric(apiKey, serviceName, payload) {
  return UrlFetchApp.fetch(
    'https://mackerel.io/api/v0/services/' + serviceName + '/tsdb',
    {
    'contentType' : 'application/json',
    'method' : 'post',
    'headers' : {
      'X-Api-Key' : apiKey
    },
    'payload' : JSON.stringify(payload),
    'muteHttpExceptions' : true
    }
  );
}

まとめ

スクリプトを可動させるとMackerelに気温・湿度のデータが溜まっていきます。こんな感じで、グラフを見たり、しきい値を設定してアラートを飛ばすことができます。

f:id:tadaken3:20180926145042p:plainf:id:tadaken3:20180926145045p:plain
部屋の気温・湿度をグラフで確認したり、しきい値を設定してアラートを飛ばしたりできる

Mackerelをうまく使えば、50行ちょっとのコードで部屋のコンディションを管理できて素敵ですね。みなさんも、季節の変わり目で体調を崩さぬようお気をつけくださいな。

最後に少し宣伝です

本ブログでは、プログラミングやIT技術に関するブログ記事を公開しております。もしよければ、Twitterアカウントをフォローもしくは、ブログの読者登録していただけるとうれしいです!

ぜひ、よろしくお願いいたします。

参考サイト

Mackerel サーバ監視[実践]入門

Mackerel サーバ監視[実践]入門

  • 作者: 井上大輔,粕谷大輔,杉山広通,田中慎司,坪内佑樹,松木雅幸
  • 出版社/メーカー: 技術評論社
  • 発売日: 2017/08/26
  • メディア: 単行本(ソフトカバー)
  • この商品を含むブログを見る