Carbonとはソースコードをきれいな画像として作成しシェアすることのできるサービスです。プレゼン資料でソースコードをきれいに見せたい時に使えます。今のところ同じようなサービスは見つけられておらず、他にソースコードをきれいに見せるテクニックが自分では思いつかないのでCarbonを利用する一択となっています。
Webサイトにアクセスし、ソースコードを打ち込むか、ファイルをドラッグアンドドロップすることで利用できます。プレゼン資料に載せるということもあり抜粋したコードを使うことが多く、今回はソースコードを打ち込み方法で画像をつくってみます。
では、画像として保存してみます。 右上にあるExportをクリックします。
Save asのPNGを選びます。
これで保存できました。 実際に作成されたものは下記のものです。きれいに作成されました。
Carbonを使って、プレゼン資料のソースコードをきれいに見せましょう！
おしまい。
Laravel JP Conferenceにスタッフとして参加してきました！そして、PHPテストワークショップに参加してくださった皆様ありがとうございました！
https://conference2019.laravel.jpconference2019.laravel.jp
（たぶん）初めてのカンファレンスで、初スタッフとして参加でした。
自分が参加したのはこちらのPHPテストワークショップです。
【はじめに】
皆さん、普段ユニットテストコードを書いていますか？
テストは私たちが実装するプログラムが期待通りの動作をしていない場合に自動検知ができ、「間違ったコードを書かない」ために必要不可欠といえます。
しかし、正しいテストを書くには、どの程度のテストコードを書けば必要十分かを学び、同値分析や境界値分析などの専門知識を身につける必要があり、簡単なスキルとはいえません。
このワークショップではまずテストの基礎知識やメリット・デメリットを再確認し、その後に堅牢なWEBアプリケーションを作成するためのテストの書き方をハンズオン形式で学びます。
という感じで、ワークショップを実施させていただきました。
実はPHPを一度も書いたことがなかったんですが、テスト問題作成と資料作成頑張りました…メンバーがたくさんフォローしてくださったおかげです。ありがとうございます。 そして当日のプレゼンはテンパってしまい、資料を読むのが早くなってしまったりして申し訳ありませんでした！！！反省します。。。
ワークショップ中の質問も大変ありがたく、自分が考えもしなかったような考え方を学べて非常に良かったです。調べたりして勉強いたします！
個人的には反省ばかりで、至らぬ点ばかりだったかと思いますが参加された皆様がなにか気づきを得て帰っていただけたのでしたら幸いです。
当日の感想です！本当に嬉しいです！ #engineers_lt ハッシュタグで追えた範囲内ですが貼らせていただきます！！
PHPテストワークショップに参加！！！#laraveljpcon
— かじおやじ (@Anorlondo448) 2019年2月16日
やっぱり手を動かすと頭に入ってくる量が違いますね！
— かじおやじ (@Anorlondo448) 2019年2月16日
とても良いWorkShop#laraveljpcon #engineers_lt
前半戦参加しただけでもう参加してよかったの気持ちになっている#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
— Soji (@sofpyon) 2019年2月16日
控えめに言って最高のWorkShopでした#laraveljpcon #engineers_lt
— かじおやじ (@Anorlondo448) 2019年2月16日
当日の問題になります！ 問題について、間違っているところ・わからないこと・改善点・PRなどがあればぜひお知らせください。 せっかく作ったのでもっと広く使っていただけるものになっていただければ嬉しいので、拡散もよろしくおねがいします！！
エンジニアの登壇を応援する会 Slack ワークスペース
エンジニアの登壇を応援する会 Twitter
当日のスライドです！
いろいろ大変でしたけど終わってみれば本当にやってよかったなぁって思いますし、「いろんな人の役に立てばいいなと思いつつ、一番役に立ったのは自分への経験だなぁ」となりました。またスタッフ側で参加してみたいです！！ありがとうございました！
https://twitter.com/yoshitaku_jp/status/1096770047588982784
最後まで一緒に駆け抜けてくれたメンバーにも感謝です。一人だったらくじけていたと思います。ありがとうございました！！！！！！
【追記】
一緒にワークショップを開催したFORTEさんの記事です！
現在、自分自身のはてなブログの記事をランダムでつぶやくボットを作成したら面白そうだなと考えています。本当にランダムで自分の記事へアクセスして呟くだけだけでもいいのですが、同じ記事をつぶやくのを防いだり、PVが低い記事を優先してつぶやかせたりしたいなと思い始め、まずははてなブログの記事一覧を取得しGoogle スプレッドシートに記録しようとなりました。 そこで今回は、Google Apps ScriptでBASIC認証をして、はてなブログの記事一覧を取得するところまでを実施したので記事に残しておきたいと思います。
今回はてなブログの記事一覧を取得する方法は、Hatena Developer Center にて公開されているはてなブログAtomPubを利用します。
Hatena Developer Centerでは、これらのAPIを扱うための開発者向け情報を公開しています。APIを使うことで、はてなが持つ情報・機能を利用した様々なアプリケーションやサービスを作ることができるようになります。
開発者の皆様のアプリケーション/サービスにおいて、より豊かなユーザー体験を提供するために、はてなのAPIをご活用ください。
Atom Publishing Protocol(以下 AtomPub) はウェブリソースを公開、編集するためのアプリケーション・プロトコル仕様です。はてなブログのAtomPubと通じて、開発者ははてなブログのエントリを参照、投稿、編集、削除するようなオリジナルのアプリケーションを作成できます。
https://blog.hatena.ne.jp/{はてなID}/{ブログID}/atom/entry にアクセスすることで記事の一覧が取得できます。
各項目は下記に置き換えてください
しかし残念なことに1度に取得できる件数は7件までと制限があるようで、7件以降は<link rel="next" href="https://blog.hatena.ne.jp/{はてなID}/{ブログID}/atom/entry?page=hogehoge" />に再度アクセスすることで取得できます。
はてなブログAtomPub を利用するために、クライアントは OAuth 認証、WSSE認証、Basic認証のいずれかを行う必要があります。
今回は、Google Apps ScriptでBASIC認証をします。 Google Apps ScriptでBASIC認証はとても簡単です。Utilities.base64Encodeが標準で用意されていてすぐに使うことができるので、簡単にBasic認証を実行することができます。
BASIC認証に利用する情報
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でいろいろやるシリーズです
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にたどり着いた
下記のコメントがあったので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実行することで解決に至りました。
Google Apps Scriptはブラウザからいじることが多いかと思いますが、claspを導入することでローカルでも開発することができます。 今回はインストールから「こんにちは 世界」するまでの手順をまとめておきます。
npmでインストールをおこないます。
npm install @google/clasp -g
claspでログインをし、Googleの認証を行います。
clasp login
無事に認証が完了すると.clasprc.jsonが作成されます
認証が無事に完了したのでプロジェクトの作成します。
新規で作成する場合は
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 でブラウザを立ち上げ中身を見てみましょう
無事にソースコードが上がっていることが確認できます。
アップロードしてから、ブラウザにて修正したくなることもあるかも知れません。 編集しましょう。
編集できました。この編集結果をローカルにも反映させたいです。
そこで、clasp pullを使います。実行すると…
無事に反映されました。
既存にあがっているプロジェクトはどうやってローカルに持ってくればいいでしょうか。
clasp clone プロジェクトIDの形で可能です。
プロジェクトIDは、図の黒く塗りつぶしてある部分です。
以上で基本的なclaspのコマンドを学び、ローカルで開発することができるようになりました。 Google Apps Scriptでも、PrettierやESLintなどを使いきちんとしたコードを書きたくなってきたので、ブラウザでの開発を中止しローカルに移行していきたいと思います。
参考にさせていただきました。
2017年に登場したPrettierというコードフォーマッタがあります。自分はPrettierをmottoさんから教えていただいただきました。使ってみた感想ですが、デフォルト設定があるため非常に簡単に利用することができ、馴染みやすく大変重宝しています。今回はデフォルト設定に何が設定されているかを確認してみたいと思います。また、そのデフォルト設定をコマンドライン上ではどうやって変更するのかを記述しておきます。
デフォルトは80文字に設定されています。
1行が80文字を超えると、自動的に折り返してくれるようです。
prettier --print-width 60 index.jsとすることでindex.jsの中身を60文字に変更することができます。
一般的には100文字か120文字がいいようで、デフォルトで用意されている数は若干少ないようです。
デフォルトは2文字分のスペースを確保するように設定されています。
prettier --tab-width 4 index.jsとすることで4文字分のスペースを確保するように設定できます。
スペースの部分をタブに置き換えます。デフォルトでは機能しません。
prettier --use-tabs index.jsで実行できます。半角スペース2文字分空いている部分に実行したら8文字分空きました。半角スペース4文字あけている部分に対して実行しても8文字分となりました。
行の最後にセミコロンを配置します。デフォルトで機能します。
prettier --no-semi index.jsでセミコロンをすべて排除します。
すべてのクォートをダブルクォートに設定します。デフォルトで機能します。
prettier --single-quote index.jsですべてをシングルクォートに変更することができます。
末尾にカンマを設定するかどうかの機能です。デフォルトではカンマを設定しないようになっています。
prettier --trailing-comma es5 index.jsでes5に準拠した設定になります。具体的にはオブジェクトの末尾にカンマが設定されるようになります。
キー・バリューペアの前後にスペースを挿入します。デフォルトは機能し、スペースが挿入されます。
prettier --no-bracket-spacing index.jsでスペースを排除します。
{ foo: bar }となります。
参考
実施できています。
OGPを整えたりして、見てもらえる動線の確保ができるようになってきていてよかったです。
ポートフォリオサイトを作りました。まだまだ直したいところがあるので直していきます。
https://yoshitakujp-firebase-portfolio.firebaseapp.com/yoshitakujp-firebase-portfolio.firebaseapp.com
実施できています
まずベクトルが定まっていないので良くないと思います。 近日1on1をしてもらうので方向性を確認しつつ、日曜の夜に予定を確保して振り返ろうと思います。
ブログの導線確保に夢中になっていて、中身が薄っぺらくなっていました。 小手先のテクニックに踊らされないで中身の充実も図るべきでした。
AppleWatchのリングを閉じることは出来ていますが、運動の習慣がついていませんでした。
日曜日の22時に開始とします。
ソースコードを除いた文字数で3000字超えないと投稿してはいけないルールとします
寒いけど頑張る
週1でサシ飲みをする
選んだ理由
振り返りおしまい。
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を設定していきます。
タブにある「公開」→「ウェブアプリケーションとして導入」を選択していきます。
「ウェブアプリケーションとして導入」が開いたら、最下部の「アクションにアクセスできるユーザ」を「全員（匿名ユーザを含む）」に変更し、導入ボタンをクリックします。
コレでひとまず完了しました。「ウェブアプリケーションとして導入」画面のURLをコピーします。そして、ブラウザに貼り付けると…
先程作成したプログラムが実行され、値が返ってきました！！
プログラムを変更したら、再度「設定」と同じ手順を踏んで、URLを生成する必要があるようです。気をつけてください。
非常に簡単にWeb APIを作成することができました。
Write Blog Every Week のサイトにブログ情報を表示していますが、情報を取得するためのプログラムをWebAPIにして、Netlifyから取得するようにしています。
2019年は技術内容でLTを月1でしていくぞ！という目標を立てまして、1月の下旬にはなってしまいましたが取り組んできたので報告です。LTさせていただいたのは、こちらの「オタクが最新技術を追うライトニングトークイベント２回目」です。
自分自身LTは3回目で、しかも技術的な内容に寄ったものは初だったので緊張しました。
考えすぎだとは思いますが個人的に 「最新技術」の定義が難しく、「世間からすればどんなに古いものでも、自分自身が出会ったときが最新なのではないか」 と考え方を変えポジティブにLT資料を作成しました。業務がSESのため、お見せできるものが個人開発している趣味レベルのものばかりで、技術的に先を行っている方にはつまらなかったかも知れません。
「オタクが最新技術を追う」というわけでゲームっぽくスライド作れたら面白いかなと思い、ドラクエ風スライドにして遊んでみました。作っている側の意見としては作っていて楽しかったですし、黒背景・白枠だけなので作るの楽でした。
内容については、自分が経験したことしか話せないので浅くなってしまいました。加えて、「一つの技術を深掘りするよりかは広く浅く」に振ってしまった分、話題があちこち飛んでわかりにくくなってしまったかもしれません。ここは自分の反省点です。質問タイムがありましたが、自分のFirebaseの理解が浅く、的確な答えができなかったのも反省です。せっかく質問していただいたのに申し訳ないです。
個人的には落ち込むほうが大きいLTとなってしまいましたが、懇親会では「LTよかった！」とか「バズった記事見ました！」とか、声をかけていただいて嬉しくなりました。このLTで学んだことを次のLTにしっかり活かしていきたいと思います！（ポジティブ
雑なまとめですが、聞いている方に何か単語が引っかかって「自分もなにか取り組んでみよう！」と思わせることが出来たら自分は嬉しいと思います。
本日の感想フォームです。今後の励みになりますので、ご回答よろしくお願いいたします。
記事の中で紹介のあった記事は下記です。
Firebase Meetup #9 Cloud Functions Day に参加してきました！少し前にFirebaseのHostingやRealtimeDatabaseをたくさん触りましたが、残念ながら「Cloud Functions」だけは触る機会がありませんでした。なので、この「Firebase Meetup #9」に参加し知見を得れたことは本当に良かったです！話を聞いている間にもアイデアがたくさん出てきてワクワクしました！
firebase-community.connpass.com
わかりやすいトリガーの説明と、なによりもパフォーマンスとコストについて包み隠さず具体的な数字が出して話していただいたのが良かったです！開発tipsもわかりやすかったです。
「Cloud Fuctions」 と 「Cloud Fuctions for Firebase」の比較をしていたのが勉強になりました！ありがとうございます！ 「指定した時間で発動するトリガーがない」という切り口から、「Cloud Scheduler」を使って解決すること勉強になりました！
こういう現実的に使えるプロダクトから考えるのは嬉しいですね。自分でもササッと作れそうなので試してみようと思います。実行回数が不安だったらcacheを使おうというアプローチもなるほどと思いました！
配信はなかったものなので会場で聞くことが出来てよかったです。個人プロダクトで無料枠で収まりそうとは言え、料金のことまでしっかり考えられていて素晴らしいなと思いました。自分も見習わなくては…
どのプレゼン資料も簡潔にまとまっていてわかりやすかったです！ Firebase Meetup #10の開催も決定しましたし、機会があれば是非参加したいです！
firebase-community.connpass.com
ps.
一般参加で外れてブログ枠に切り替えていたことを失念しておりました。レポート遅くなったことお詫びします。
