Laravel JP ConferenceでPHPテストワークショップを開催しました！

Laravel JP Conferenceにスタッフとして参加してきました！そして、PHPテストワークショップに参加してくださった皆様ありがとうございました！

conference2019.laravel.jp

（たぶん）初めてのカンファレンスで、初スタッフとして参加でした。

f:id:yoshitaku_jp:20190217150242j:plain — 記念に

PHPテストワークショップ

自分が参加したのはこちらのPHPテストワークショップです。

【はじめに】
皆さん、普段ユニットテストコードを書いていますか？
テストは私たちが実装するプログラムが期待通りの動作をしていない場合に自動検知することができ、「間違ったコードを書かない」ために必要不可欠といえます。
しかし、正しいテストを書くには、どの程度のテストコードを書けば必要十分かを学び、同値分析や境界値分析などの専門知識を身につける必要があり、簡単なスキルとはいえません。
このワークショップではまずテストの基礎知識やメリット・デメリットを再確認し、その後に堅牢なWEBアプリケーションを作成するためのテストの書き方をハンズオン形式で学びます。

という感じで、ワークショップを実施させていただきました。
実はPHPを一度も書いたことがなかったんですが、テスト問題作成と資料作成頑張りました…メンバーがたくさんフォローしてくださったおかげです。ありがとうございます。そして当日のプレゼンはテンパってしまい、資料を読むのが早くなってしまったりして申し訳ありませんでした！！！反省します。。。

ワークショップ中の質問も大変ありがたく、自分が考えもしなかったような考え方を学べて非常に良かったです。調べたりして勉強いたします！

個人的には反省ばかりで、至らぬ点ばかりだったかと思いますが参加された皆様がなにか気づきを得て帰っていただけたのでしたら幸いです。

当日の感想

当日の感想です！本当に嬉しいです！ #engineers_lt ハッシュタグで追えた範囲内ですが貼らせていただきます！！

PHPテストワークショップに参加！！！#laraveljpcon
— 𝔎𝔞𝔧𝔦@魔人ママチャリライダー (@Anorlondo448) 2019年2月16日

やっぱり手を動かすと頭に入ってくる量が違いますね！
とても良いWorkShop#laraveljpcon #engineers_lt
— 𝔎𝔞𝔧𝔦@魔人ママチャリライダー (@Anorlondo448) 2019年2月16日

前半戦参加しただけでもう参加してよかったの気持ちになっている#laraveljpcon #engineers_lt
— ごま@エンジニアしたいお母さん (@gomaaburamax) 2019年2月16日

PHPUnitのアノテーションっての知らなかった・・・ためになる#laraveljpcon #engineers_lt
— 𝔎𝔞𝔧𝔦@魔人ママチャリライダー (@Anorlondo448) 2019年2月16日

問３でtestケースをもそもそ書いていて「配列の中に文字列が入ってたらどうする」みたいなのに気づいて、模範解答にもないし、これが仕様の抜け漏れに気づくということか！！！みたいなアレになっている。最初に言ってた仕様把握のためにもテスト書くべきの意味わかった#laraveljpcon #engineers_lt
— ごま@エンジニアしたいお母さん (@gomaaburamax) 2019年2月16日

問6のテストコードを書くの面倒すぎて諦めてしまい、テスト対象のブラックジャックゲームを遊び始めてしまった件。#laraveljpcon #engineers_lt
— SofPyon(そーじの開発系) (@sofpyon) 2019年2月16日

控えめに言って最高のWorkShopでした#laraveljpcon #engineers_lt
— 𝔎𝔞𝔧𝔦@魔人ママチャリライダー (@Anorlondo448) 2019年2月16日

当日の問題

当日の問題になります！問題について、間違っているところ・わからないこと・改善点・PRなどがあればぜひお知らせください。せっかく作ったのでもっと広く使っていただけるものになっていただければ嬉しいので、拡散もよろしくおねがいします！！

github.com

エンジニアの登壇を応援する会 Slack ワークスペース
エンジニアの登壇を応援する会 Twitter

よしたく Twitter

当日のスライド

当日のスライドです！

まとめ

いろいろ大変でしたけど終わってみれば本当にやってよかったなぁって思いますし、「いろんな人の役に立てばいいなと思いつつ、一番役に立ったのは自分への経験だなぁ」となりました。またスタッフ側で参加してみたいです！！ありがとうございました！

いろんな人の役に立てばいいなと思いつつ、一番役に立ったのは自分への経験だなぁ
— よしたく (@yoshitaku_jp) 2019年2月16日

最後まで一緒に駆け抜けてくれたメンバーにも感謝です。一人だったらくじけていたと思います。ありがとうございました！！！！！！

【追記】

一緒にワークショップを開催したFORTEさんの記事です！

fortegp05.hatenablog.com

2019-02-15

Google Apps ScriptでBASIC認証をして、はてなブログの記事一覧を取得する

Google Apps Script

f:id:yoshitaku_jp:20190215120725p:plain

現在、自分自身のはてなブログの記事をランダムでつぶやくボットを作成したら面白そうだなと考えています。本当にランダムで自分の記事へアクセスして呟くだけだけでもいいのですが、同じ記事をつぶやくのを防いだり、PVが低い記事を優先してつぶやかせたりしたいなと思い始め、まずははてなブログの記事一覧を取得しGoogle スプレッドシートに記録しようとなりました。そこで今回は、Google Apps ScriptでBASIC認証をして、はてなブログの記事一覧を取得するところまでを実施したので記事に残しておきたいと思います。

Hatena Developer CenterとはてなブログAtomPubの紹介
はてなブログAtomPubを利用する
はてなブログAtomPubを利用するためにBasic認証をする
- AtomPubのAPIキー取得方法
まとめ
Google Apps Scriptでいろいろやるシリーズ

Hatena Developer CenterとはてなブログAtomPubの紹介

今回はてなブログの記事一覧を取得する方法は、Hatena Developer Center にて公開されているはてなブログAtomPubを利用します。

developer.hatena.ne.jp

Hatena Developer Centerでは、これらのAPIを扱うための開発者向け情報を公開しています。APIを使うことで、はてなが持つ情報・機能を利用した様々なアプリケーションやサービスを作ることができるようになります。
開発者の皆様のアプリケーション/サービスにおいて、より豊かなユーザー体験を提供するために、はてなのAPIをご活用ください。

developer.hatena.ne.jp

Atom Publishing Protocol(以下 AtomPub) はウェブリソースを公開、編集するためのアプリケーション・プロトコル仕様です。はてなブログのAtomPubと通じて、開発者ははてなブログのエントリを参照、投稿、編集、削除するようなオリジナルのアプリケーションを作成できます。

はてなブログAtomPubを利用する

https://blog.hatena.ne.jp/{はてなID}/{ブログID}/atom/entry にアクセスすることで記事の一覧が取得できます。

各項目は下記に置き換えてください

はてなID
- あなたのはてなid
- yoshitaku_jpの場合はyoshitaku_jp
ブログID
- ブログのドメイン (例: hoge.hatenablog.com)
- yoshitaku_jpの場合はyoshitaku-jp.hatenablog.com

しかし残念なことに1度に取得できる件数は7件までと制限があるようで、7件以降は<link rel="next" href="https://blog.hatena.ne.jp/{はてなID}/{ブログID}/atom/entry?page=hogehoge" />に再度アクセスすることで取得できます。

はてなブログAtomPubを利用するためにBasic認証をする

はてなブログAtomPub を利用するために、クライアントは OAuth 認証、WSSE認証、Basic認証のいずれかを行う必要があります。

今回は、Google Apps ScriptでBASIC認証をします。 Google Apps ScriptでBASIC認証はとても簡単です。Utilities.base64Encodeが標準で用意されていてすぐに使うことができるので、簡単にBasic認証を実行することができます。

BASIC認証に利用する情報

ユーザID
- あなたのはてなid
- yoshitaku_jpの場合はyoshitaku_jp
パスワード
- AtomPubのAPIキー

AtomPubのAPIキー取得方法

AtomPubのAPIキーは自身のブログの詳細設定内にあります。取得しておきましょう。

f:id:yoshitaku_jp:20190215114936p:plain — 設定 > 詳細設定

f:id:yoshitaku_jp:20190215115024p:plain — AtomPub > APIキー( 赤の部分）

実際のコードです。 urlは自身のブログのものに変更し、さらにプロジェクトのプロパティにUSER_ID（あなたのはてなid）とPASSWORD （先程取得したAtomPubのAPIキー）を設定しておきましょう！

function doGet() {
  // アクセス先の情報
  const url = "https://blog.hatena.ne.jp/yoshitaku_jp/yoshitaku-jp.hatenablog.com/atom/entry";
  const USER_ID = PropertiesService.getScriptProperties().getProperty("USER_ID");
  const PASSWORD = PropertiesService.getScriptProperties().getProperty("PASSWORD");

  // GETメソッドのオプション
  const options = {
    "method" : "GET",
    "headers" : {"Authorization" : " Basic " + Utilities.base64Encode(USER_ID + ":" + PASSWORD)},
    "muteHttpExceptions" : true
  }

  // GETメソッドのリクエスト
  var response = UrlFetchApp.fetch(url, options);
  var xml = XmlService.parse(response.getContentText());
  var atom = XmlService.getNamespace("http://www.w3.org/2005/Atom");
  var entries = xml.getRootElement().getChildren("entry", atom);    
  Logger.log(entries[0].getChild("title", atom).getText());
}

ログ

[19-02-14 18:43:26:506 PST] Google Apps ScriptでBASIC認証をして、はてなブログの記事一覧を取得する

ログの中でentries[0]としているので最新のものだけが表示されていますが、これをループして7件以降は再アクセスをしていけば良さそうです！これで、Google Apps ScriptでBASIC認証をして、はてなブログの記事一覧を取得することができました！

まとめ

Google Apps ScriptでBASIC認証をして、はてなブログの記事一覧を取得することができた
Google Apps ScriptでBASIC認証は、Utilities.base64Encodeが標準で用意されているので簡単
Google Apps Scriptでいろいろやるシリーズにまた一つ追加された

Google Apps Scriptでいろいろやるシリーズ

Google Apps Scriptでいろいろやるシリーズです

yoshitaku-jp.hatenablog.com

2019-02-12

【解決】npm install -g @vue/cli で、Unexpected end of JSON input while parsing nearが発生した

node.js

tl;dr

npm install -g @vue/cli でエラーが発生
npm cache clean --forceで解決した
再び、npm install -g @vue/cli で無事にインストールができた

エラー内容

npm ERR! Unexpected end of JSON input while parsing near '...XAWVO\n+/4j+zc2nz6uaW'

発生の状況

`npm install -g @vue/cli` を実行

npm install -g @vue/cli を実行したところ、下記のエラーが発生

npm ERR! Unexpected end of JSON input while parsing near '.........'

解決までの過程

`Unexpected end of JSON input while parsing near` で検索

Unexpected end of JSON input while parsing near で検索したところ、下記のissueにたどり着いた

github.com

npm cache clean --forceで解決したというコメントがあった

下記のコメントがあったのでnpm cache clean --forceコマンドを実行した。

npm cache clean --force

that solved

解決策

`npm cache clean --force`を実行し、`npm install -g @vue/cli`を実行すると正常に終わった

キャッシュされているファイルが破損していたために起きたようでした。 npm cache clean --forceでキャッシュを削除し再度npm install -g @vue/cli実行することで解決に至りました。

2019-02-10

claspをインストールしてから「こんにちは世界」するまで

Google Apps Script

Google Apps Scriptはブラウザからいじることが多いかと思いますが、claspを導入することでローカルでも開発することができます。今回はインストールから「こんにちは世界」するまでの手順をまとめておきます。

インストール
ログイン
プロジェクトの作成
デプロイ
ブラウザ側で修正したくなったら？
おまけ

インストール

npmでインストールをおこないます。

npm install @google/clasp -g

プロジェクトの作成

認証が無事に完了したのでプロジェクトの作成します。新規で作成する場合は clasp create clasp-demo

すでにフォルダが存在する場合は clasp create .

作成が完了すると.clasp.json と appsscript.json が作成されます。

デプロイ

src/sample.js を作成し、デプロイをしましょう。シンプルにHello Worldです。

function main(){
    Logger.log('Hello World');
}

作成したら、clasp push をして送信し、clasp open でブラウザを立ち上げ中身を見てみましょう

無事にソースコードが上がっていることが確認できます。

f:id:yoshitaku_jp:20190207151743p:plain — Hello World

ブラウザ側で修正したくなったら？

アップロードしてから、ブラウザにて修正したくなることもあるかも知れません。編集しましょう。

f:id:yoshitaku_jp:20190207153427p:plain — こんにちは世界

編集できました。この編集結果をローカルにも反映させたいです。そこで、clasp pullを使います。実行すると…

f:id:yoshitaku_jp:20190207153623p:plain — こんにちは世界 at ローカル

無事に反映されました。

おまけ

既存にあがっているプロジェクトはどうやってローカルに持ってくればいいでしょうか。

clasp clone プロジェクトIDの形で可能です。

プロジェクトIDは、図の黒く塗りつぶしてある部分です。

f:id:yoshitaku_jp:20190207155231p:plain — URLが塗りつぶされています

以上で基本的なclaspのコマンドを学び、ローカルで開発することができるようになりました。 Google Apps Scriptでも、PrettierやESLintなどを使いきちんとしたコードを書きたくなってきたので、ブラウザでの開発を中止しローカルに移行していきたいと思います。

参考にさせていただきました。

github.com

kic-yuuki.hatenablog.com

2019-02-03

よくつかいそうなPrettierのデフォルト設定をまとめた

Prettier

2017年に登場したPrettierというコードフォーマッタがあります。自分はPrettierをmottoさんから教えていただいただきました。使ってみた感想ですが、デフォルト設定があるため非常に簡単に利用することができ、馴染みやすく大変重宝しています。今回はデフォルト設定に何が設定されているかを確認してみたいと思います。また、そのデフォルト設定をコマンドライン上ではどうやって変更するのかを記述しておきます。

github.com

Print Width

デフォルトは80文字に設定されています。 1行が80文字を超えると、自動的に折り返してくれるようです。 prettier --print-width 60 index.jsとすることでindex.jsの中身を60文字に変更することができます。一般的には100文字か120文字がいいようで、デフォルトで用意されている数は若干少ないようです。

Tab Width

デフォルトは2文字分のスペースを確保するように設定されています。 prettier --tab-width 4 index.jsとすることで4文字分のスペースを確保するように設定できます。

Tabs

スペースの部分をタブに置き換えます。デフォルトでは機能しません。 prettier --use-tabs index.jsで実行できます。半角スペース2文字分空いている部分に実行したら8文字分空きました。半角スペース4文字あけている部分に対して実行しても8文字分となりました。

Semicolons

行の最後にセミコロンを配置します。デフォルトで機能します。 prettier --no-semi index.jsでセミコロンをすべて排除します。

Quotes

すべてのクォートをダブルクォートに設定します。デフォルトで機能します。 prettier --single-quote index.jsですべてをシングルクォートに変更することができます。

Trailing Commas

末尾にカンマを設定するかどうかの機能です。デフォルトではカンマを設定しないようになっています。 prettier --trailing-comma es5 index.jsでes5に準拠した設定になります。具体的にはオブジェクトの末尾にカンマが設定されるようになります。

Bracket Spacing

キー・バリューペアの前後にスペースを挿入します。デフォルトは機能し、スペースが挿入されます。 prettier --no-bracket-spacing index.jsでスペースを排除します。 { foo: bar }となります。

参考

prettier.io

github.com

2019-01-31

2019年1月を振り返る

Keep

技術ネタで週1本ブログを書く

実施できています。

ブログの質にこだわる

OGPを整えたりして、見てもらえる動線の確保ができるようになってきていてよかったです。

自分で手を動かし試行錯誤する

ポートフォリオサイトを作りました。まだまだ直したいところがあるので直していきます。

yoshitakujp-firebase-portfolio.firebaseapp.com

月1本LTする

実施できています

yoshitaku-jp.hatenablog.com

Problem

週に1回振り返る時間を設けたが実施していない

まずベクトルが定まっていないので良くないと思います。近日1on1をしてもらうので方向性を確認しつつ、日曜の夜に予定を確保して振り返ろうと思います。

文章に対する重きが薄くなっていた

ブログの導線確保に夢中になっていて、中身が薄っぺらくなっていました。小手先のテクニックに踊らされないで中身の充実も図るべきでした。

運動の習慣がついていない

AppleWatchのリングを閉じることは出来ていますが、運動の習慣がついていませんでした。

Try

振り返りの時間の確保

日曜日の22時に開始とします。

ブログ本文の充実化を図る

ソースコードを除いた文字数で3000字超えないと投稿してはいけないルールとします

週に1回はランニングしようと思います。

寒いけど頑張る

2月のチャレンジ企画

週1でサシ飲みをする

選んだ理由

新しいお店の開拓
じっくり人と話す機会の欠如
新しい価値観の習得
仲良くなりたい

振り返りおしまい。

2019-01-27

Google Apps ScriptをWeb APIとして使う

Google Apps Script

Google Apps Scriptはすごく便利ですね。最近はなんでもかんでもコレを使って書いてしまっています。また一つ自分が知らなかった機能があったので、記事に書いてメモを残しておきます。 Google Apps ScriptをWebAPIとして使う 方法です。

準備

Google Apps Scriptで値を返すプログラムを書きます。これは、ContentServiceオブジェクトのcreateTextOutputメソッドを利用してfirst get api文字列を持つのTextOutputオブジェクトを生成しています。最後にretrunで生成した文字列を返しています。

function doGet(e) {
    
  var result = ContentService.createTextOutput("first get api");
  return result;
}

シンプルトリガー

突然出てきたdoGet は、Google Apps Scriptで使われているシンプルトリガーです。Getリクエストがおこなわれたときに実行されます。またdoPostもあり、こちらはPostリクエストがおこなわれたときに実行されるようになっています。

設定

Google Apps Scriptを設定していきます。

タブにある「公開」→「ウェブアプリケーションとして導入」を選択していきます。 f:id:yoshitaku_jp:20190127102307p:plain

「ウェブアプリケーションとして導入」が開いたら、最下部の「アクションにアクセスできるユーザ」を「全員（匿名ユーザを含む）」に変更し、導入ボタンをクリックします。 f:id:yoshitaku_jp:20190127101702p:plain

実行

コレでひとまず完了しました。「ウェブアプリケーションとして導入」画面のURLをコピーします。そして、ブラウザに貼り付けると… f:id:yoshitaku_jp:20190127101713p:plain

先程作成したプログラムが実行され、値が返ってきました！！ f:id:yoshitaku_jp:20190127101739p:plain

注意

プログラムを変更したら、再度「設定」と同じ手順を踏んで、URLを生成する必要があるようです。気をつけてください。

まとめ

非常に簡単にWeb APIを作成することができました。

Write Blog Every Week のサイトにブログ情報を表示していますが、情報を取得するためのプログラムをWebAPIにして、Netlifyから取得するようにしています。

2019-01-23

オタクが最新技術を追うライトニングトークイベント２回目　でLTをしてきた

LT アウトプット

2019年は技術内容でLTを月1でしていくぞ！という目標を立てまして、1月の下旬にはなってしまいましたが取り組んできたので報告です。LTさせていただいたのは、こちらの「オタクが最新技術を追うライトニングトークイベント２回目」です。

自分自身LTは3回目で、しかも技術的な内容に寄ったものは初だったので緊張しました。

yumenosora.connpass.com

~~考えすぎだとは思いますが個人的に~~ 「最新技術」の定義が難しく、「世間からすればどんなに古いものでも、自分自身が出会ったときが最新なのではないか」 と考え方を変えポジティブにLT資料を作成しました。業務がSESのため、お見せできるものが個人開発している趣味レベルのものばかりで、技術的に先を行っている方にはつまらなかったかも知れません。

スライド作成のこだわり

「オタクが最新技術を追う」というわけでゲームっぽくスライド作れたら面白いかなと思い、ドラクエ風スライドにして遊んでみました。作っている側の意見としては作っていて楽しかったですし、黒背景・白枠だけなので作るの楽でした。

f:id:yoshitaku_jp:20190123102041p:plain — ドラクエのスタート画面を思い起こさせるスライド

スライド内容について

内容については、自分が経験したことしか話せないので浅くなってしまいました。加えて、「一つの技術を深掘りするよりかは広く浅く」に振ってしまった分、話題があちこち飛んでわかりにくくなってしまったかもしれません。ここは自分の反省点です。質問タイムがありましたが、自分のFirebaseの理解が浅く、的確な答えができなかったのも反省です。せっかく質問していただいたのに申し訳ないです。

個人的には落ち込むほうが大きいLTとなってしまいましたが、懇親会では「LTよかった！」とか「バズった記事見ました！」とか、声をかけていただいて嬉しくなりました。このLTで学んだことを次のLTにしっかり活かしていきたいと思います！（ポジティブ

雑なまとめですが、聞いている方に何か単語が引っかかって「自分もなにか取り組んでみよう！」と思わせることが出来たら自分は嬉しいと思います。

本日の感想フォームです。今後の励みになりますので、ご回答よろしくお願いいたします。

docs.google.com

記事の中で紹介のあった記事は下記です。

yoshitaku-jp.hatenablog.com

write-blog-every-week.netlify.com

2019-01-21

Firebase Meetup #9 Cloud Functions Day に参加してきた

Firebase Cloud Functions for Firebase

Firebase Meetup #9 Cloud Functions Day に参加してきました！少し前にFirebaseのHostingやRealtimeDatabaseをたくさん触りましたが、残念ながら「Cloud Functions」だけは触る機会がありませんでした。なので、この「Firebase Meetup #9」に参加し知見を得れたことは本当に良かったです！話を聞いている間にもアイデアがたくさん出てきてワクワクしました！

firebase-community.connpass.com

GincoにおけるCloud Funcionsの利用事例と開発tipsの紹介

speakerdeck.com

わかりやすいトリガーの説明と、なによりもパフォーマンスとコストについて包み隠さず具体的な数字が出して話していただいたのが良かったです！開発tipsもわかりやすかったです。

Cloud Functions と Cloud Scheduler で作るお手軽バッチ処理

docs.google.com

「Cloud Fuctions」 と 「Cloud Fuctions for Firebase」の比較をしていたのが勉強になりました！ありがとうございます！「指定した時間で発動するトリガーがない」という切り口から、「Cloud Scheduler」を使って解決すること勉強になりました！

Cloud FunctionsでURL短縮サービスを作ろう

speakerdeck.com

こういう現実的に使えるプロダクトから考えるのは嬉しいですね。自分でもササッと作れそうなので試してみようと思います。実行回数が不安だったらcacheを使おうというアプローチもなるほどと思いました！

Cloud Functions × BigQuery

speakerdeck.com

配信はなかったものなので会場で聞くことが出来てよかったです。個人プロダクトで無料枠で収まりそうとは言え、料金のことまでしっかり考えられていて素晴らしいなと思いました。自分も見習わなくては…

まとめ

どのプレゼン資料も簡潔にまとまっていてわかりやすかったです！ Firebase Meetup #10の開催も決定しましたし、機会があれば是非参加したいです！

firebase-community.connpass.com

ps.

一般参加で外れてブログ枠に切り替えていたことを失念しておりました。レポート遅くなったことお詫びします。

2019-01-16

遊んでCSS Flexboxを覚える / Flexbox Froggy をやってみた

CSS Flexbox

f:id:yoshitaku_jp:20190116174925p:plain

tl;dr
内容
- 特徴
- 実際の画面
まとめ

tl;dr

Flexbox Froggy でFlexbox を楽しく学ぼう

内容

CSS触ってますか？？CSSって思っているとおりに動かなくて難しくないでしょうか？自分は全く使いこなせません。そして、何から学んだらいいかわからず途方に暮れていました。画面の 見た目 に関することですし、ゲーム感覚で動いて楽しく学べるものがないかなぁと思ったらありました。Flexbox Froggyです。

flexboxfroggy.com