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

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

conference2019.laravel.jp

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

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

PHPテストワークショップ

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

fortee.jp

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

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

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

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

当日の感想

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

当日の問題

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

github.com

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

よしたく Twitter​

当日のスライド

当日のスライドです!

まとめ

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

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

【追記】

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

fortegp05.hatenablog.com

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

f:id:yoshitaku_jp:20190215120725p:plain

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

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でいろいろやるシリーズ

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

yoshitaku-jp.hatenablog.com

yoshitaku-jp.hatenablog.com

yoshitaku-jp.hatenablog.com

yoshitaku-jp.hatenablog.com

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

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実行することで解決に至りました。

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

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

インストール

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

npm install @google/clasp -g

ログイン

claspでログインをし、Googleの認証を行います。

clasp login

無事に認証が完了すると.clasprc.jsonが作成されます

プロジェクトの作成

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

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

作成が完了すると.clasp.jsonappsscript.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

よくつかいそうな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年1月を振り返る

yoshitaku-jp.hatenablog.com

Keep

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

実施できています。

ブログの質にこだわる

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

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

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

yoshitakujp-firebase-portfolio.firebaseapp.com

月1本LTする

実施できています

yoshitaku-jp.hatenablog.com

Problem

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

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

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

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

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

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

Try

振り返りの時間の確保

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

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

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

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

寒いけど頑張る

2月のチャレンジ企画

週1でサシ飲みをする

選んだ理由

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

振り返りおしまい。

Google Apps ScriptをWeb APIとして使う

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から取得するようにしています。

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

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

自分自身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

yoshitaku-jp.hatenablog.com

yoshitaku-jp.hatenablog.com

write-blog-every-week.netlify.com

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

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.

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

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

f:id:yoshitaku_jp:20190116174925p:plain

tl;dr

  • Flexbox FroggyFlexbox を楽しく学ぼう

内容

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

flexboxfroggy.com

特徴

Flexbox Froggyは3つの特徴があります。

  • 面倒な登録が必要なし
  • 24問でサクッと終わる
  • ヒントと答えがある

Flexbox Froggyは、画面を開いてすぐに問題を解くことが出来ます。そして自分は1時間ほどで終わりました。最終問題は自信がなく時間もかかってしまったのですが、ヒントを見たりして無事に解くことが出来ました!

実際の画面

画面の左側にCSSを書き、画面の右側にいるカエルをハスの葉に移動させてあげます。

f:id:yoshitaku_jp:20190116161032p:plain
カエルが可愛い

1問目では、justify-content: flex-end;を記述すれば正解です。

f:id:yoshitaku_jp:20190116163434p:plain
カエルが動きました

各プロパティで何が使えるのかわからない場合は、カーソルを合わせるとヒントが出ます。

f:id:yoshitaku_jp:20190116171342p:plain
ヒントが出て優しい

他にも色違いのカエルが出てきたり、

f:id:yoshitaku_jp:20190116165954p:plain
カラフル

難しくなるとこんなにもぐちゃぐちゃな配置のカエルを、移動させてあげる問題が出てきます。

f:id:yoshitaku_jp:20190116170042p:plain
離れカエル

まとめ

今回はFlexbox Froggy を紹介しました。難易度も問題数も初学者にとってはちょうどいいですし、繰り返し解いたり、自身のサイトで躓いたときに気分転換としてカエルを動かしにきてもいいんじゃないかと思います。