チームビルディング日記 -google apps script と ソリューションアーキテクトと SQLと-

100DaysOfCode 64日目
今日は勉強盛り沢山でした。

まずはgoogle apps scriptの勉強。

こちらはドットインストールで行いました。
こちらは情報システムチームで行いました。
Google Apps Script入門 全20回のうちの#05まで完了しました。
一年間、チームでコツコツとJavascriptの勉強をし続けてきたおかげで、taguchiさん(dotinstall)の怒涛の責めにもなんとか食らいつくことができました。この調子でGoogle Apps Scriptの勉強を続け、社内の事務仕事を効率化できるようになりたいです。

次は、SQLの勉強。

こちらも情報システムチームで行いました。
ドリル的な勉強はひと段落ついていて、概念の勉強が中心となりました。
具体的には、BEGINで始めて COMMITで一括り(トランザクション)にする方法だったり。

この本は本当に秀逸で、この本一冊でもうそろそろ半年ぐらい勉強していますが、ドリルもあって実際手を動かして理解できるし、概念に関しても丁寧ねにまとめてあったりするのでSQLの勉強を始める方には絶対にオススメします。

次は、AWS認定ソリューション アーキテクト[アソシエイト]の勉強。

こちらはエンジニアチームとの初の勉強会になりました。
教材はこの本を使ったのですが

まだ一章までしか勉強していませんがなかなか良さそうです。

勉強方法として、それぞれがバラバラに勉強した内容を発表し合う方法も検討したのですが、全員で、一つの本を一ページずつ音読する方法を選びました。
個人で本を読むと集中力が続かないことが多いし、気になったところはその都度、チームで内容を確認できるのでおすすめです。

今日の勉強のまとめ

初めてエンジニアの方と一緒に勉強したので、うまくゆくか心配でしたが、良い雰囲気だったのでホットしました。
また、こんなに沢山勉強できる日はなかなかないので今日は大満足でした。

チームビルディング日記 -誰がなんの勉強をするか-

私がみている組織は大きく分けて二つあり、情報システム部門とシステム開発部門だ。
毎日、両方の組織のメンバーに勉強してもらいたいと考えているのだが、どんな風に割り振りをすれば良いか結構悩んでいた。
考えた結果、どんなアウトプットを期待しているかで、勉強の内容を分けることができたので記載します。

情報システム部門のメンバーには、HTML/CSS/JavaScript/SQLなどを学んでもらい、biツールをSQLを使って自在にコントロールできるようになってもらったり、G-suite内で GoogleAppScriptなどを駆使して、各事業部の事務仕事の業務改善してもらったりしてもらえれば嬉しいので、そっちの勉強に集中してもらうようにした。

そしてシステム開発メンバーには、AWS認定ソリューションアーキテクト[アソシエイト]の勉強と現在、業務で使用しているフレームワークを学んでもらうことにした。

AWS認定ソリューションアーキテクト[アソシエイト]の勉強のために購入した本はこちら

勉強する時間が多くて実務をこなす時間が少なくなりがちだが、誰に媚びたところでその人は僕を幸せにしてくれるわけではないので、チームメンバーと一緒に粛々と実力を付けにゆきたいと思っている。

チームビルディング日記 -aws ソリューションアーキテクトアソシエイト-

新しくシステム開発会社を立ち上げることになり、2020年から2名のエンジニアが入社した。
一人は経験者で、もう一人はプログラミングスクール出の未経験者です。
これから社内のシステムがどうやって動いているかなどを教えてゆきます。

ちなみに、みんなでAWSの勉強をしようということになりました。
AWSにはいくつか資格試験があるようで、その中で「AWS 認定ソリューションアーキテクト – アソシエイト」を取得しようということになった。

これから毎日みんなでこの資格取得のための勉強を進めてゆきます。
難易度はまだわからないのですが、3ヶ月で資格が取得できるように目標を設定しました。

初めてのエンジニアの採用なのでこっちもドギマギしていますが、二人がこの会社に入って良かったと言ってもらえるように頑張ってゆきたいです。

行と列が混乱した時、一度覚えたら絶対に忘れない方法

社会人になって会議などに参加していると、時々、堂々と「行(ぎょう)」と「列(れつ)」を間違って言っている人を見かけます。
まぁ、その場で伝われば細かいことはどうでも良いのかもしれませんが、確り覚えている人からすると「間違ってるし。。。」と言った風に思われてしまうかもしれません。
私も行と列を間違えて発言してしまっている人を見かけると、ついつい「絶対忘れない行と列の覚え方、教えてあげようか?」と声をかけてしまいます。
覚え方は簡単で、
サムネイル画像にもあるように漢字の行と列に付いている二重線が縦横どちらに向いているかを見れば一目瞭然です。
行は二重線が「二」となっているので横に向かうときに使う。
列は二重線が「リ」となっているので縦方向に向かう時に使う。
です。
これさえ覚えておけばテンパった時にも大丈夫です。

ちなみに私も社会人になって10年以上行と列を混同していましたが、これを知ってから二度と忘れなくなりました。

インストールしたvscodeが開ない時の対処法

vscodeをmacにインストールした時に何故がvscodeが開なくてイライラする時があります。そんな時の対処法を記載します。

エラー画面を確認する


“visual Stadio Code”が悪質なソフトウェアかどうかをAppleでは確認できないため、このソフトウェアは開ません。というポップアップメッセージを確認したら、「Finderに表示」を選択する。

アプリケーションへvscodeを移動する


finderにvscodeが表示されたら、vscodeのアイコンがついたソフトウェアだけをドラックしてアプリケーションに移動します。(この時に管理者のIDとPASSを聞かれますので入力してください。)

アプリケーションの画面でvscodeを右クリックする


アプリケーションに移動したらvscodeのアイコンがあるので、そのアイコンをクリックして開くのではなく、右クリックでメニューを表示し、そこの「開く」からvscodeを開ます。

ポップアップの開くからvscodeを開く


一番最初と似たポップアップの警告画面が出ますが、今度は「開く」がついているのでここからvscodeを開ます。これで無事にvscodeを開くことができました。

macで日本語入力できない時の対処法

macで新しいユーザーを作った時など、「英数」と「かな」ボタンを押しても日本語入力に切り替わらないことがあります。
その時の対処法を記載します。

システム環境設定を開く


システム環境設定を開いたら「キーボード」を選択します。

入力ソースタブを選択


「入力ソース」タブを選択したら左下の「+」ボタンを選択します。この時、管理者のIDとPASSの入力を求められる場合があります。

日本語の入力ソースを選択し追加する


左のカラムから日本語を検索し、「追加」ボタンで日本語の入力ソースを追加します。

入力ソースに「日本語」が追加されていることを確認


日本語のキーボードが表示されているのを確認したら完了です。これで、「英数」と「かな」ボタンで半角英数と日本語を切り替えることができるようになります。

sendgrid利用時のメールが届かない場合の対処法

メールの到達率を上げるためにsendgirdを使っているが、それでもメールが届かないという問い合わせを受けることが多々ある。
今回の対処法を備忘録として残しておきます。

対象のメールアカウントをsendgrid内のActivity(アクティビティー)で検索する。
検索できるのは過去7日分なので注意が必要。
検索した結果、対象のメールアカウントへの送信履歴が全て「Drop」になっていたので、一番右のiのマークからREASONを確認するとbounced addressになっていることを確認する。
次にSuppressionsの中からbouncesを選択し、改めて該当のメールアカウントを検索すると、REASONが、550 Invalid recipientになっている事を確認する。
550 Invalid recipientをネットで調べてみると、メールアドレスが存在しない、または迷惑メールの設定により拒否されている可能性があります。と出てきたので、問い合わせ者にメールアドレスが合っているかの疎通確認を行い、bouncesから該当のメールアカウントを削除してあげる。

これでメールが届くようになるか様子をみる。
以上です。

spam reportに振り分けられている場合は、メールの受信者が送信元のメールを迷惑メール報告し、そのことを受信者側のメールプロバイダがSendGridにフィードバックしたときに発生するようです。
このメールアカウントにメールを再度送れるようにする場合も同じように一覧から削除してあげれば再びメールを送れるようになります。

Photoshopで視差効果(パララックス)のある画像を作ってみた。

Photoshopでブログ記事のサムネイル画像を自由に作れるようになりたく、独習を始めたので自分用にメモを残しておきます。

ビルと星空の画像を使って視差効果(パララックス)のあるGIF画像を作りました。

GIF画像を作るのは、今回が初体験なので、ワクワクして作業に入りました。ビルがズームアウトしながら星空が流れてゆく画像を作りたいと思います。

素材1

素材2

  1. 「素材1」(ビル)の写真の空の部分をクイック選択ツールで選択する。
  2. 選択した部分をdeleteで削除する。
  3. 上のメニューの「選択範囲」から「選択を解除」を選んで選択を解除しておく。

  4. 素材の写真を二つとも「スマートオブジェクト」に変換しておく。
  5. ビルの写真を「command」+「T」で拡大しておく。
  6. 空の写真も「command」+「T」で拡大し、流れる元の方法にずらしておく。
  7. 上のメニュー「ウィンドウ」→「タイムライン」を押下し、タイムラインメニューを開く
  8. 「ビデオタイムラインを作成」を選択する。
  9. ビルの写真のレイヤー▽を押下し、ストップウォッチアイコンを押したら、スライダーを0秒から5秒まで動かす。
  10. ビルの写真を「command」+「T」で縮小させる。
  11. 5秒にいるスライダーを0秒に戻す。
  12. 夜空の写真のレイヤー▽を押下し、ストップウォッチアイコンを押したら、スライダーを0秒から5秒まで動かす。
  13. 夜空の画像を右から左に流す。
  14. ファイル→書き出し→Web用に保存(従来)を選択する。
  15. 「カラー」「劣化」「画面サイズ」を調整し、ファイルサイズを縮小させる。

完成!

画像サイズを大きく保って、カラーや劣化で画質を下げたバージョン


画像を劣化させたところ、思いもしない幻想的なエフェクトがかかったようなGIF画像になりましたが、これは意図したものではなく、仕方なく残像が残る感じになってしまった状態です。演出としてわざと劣化させるテクニックもありそうですね。

画像サイズを小さくして、カラーを256にしたバージョン


WebにアップされてるGIF画像って結構小さいサイズのものが多いなと思っていたのですが、画像サイズの都合上、しょうがなかったんですね。今回、初めてGIF画像を作ってみて理解できました。(もっと賢くGIF画像を圧縮する方法もあると思うのですが。。。)小さい画像なら滑らかに書き出すことができました。

画像サイズの調整について

そのままの状態で書き出すと、ファイルサイズが20M程度になり、WordPressのアップロード上限の5Mを大きくオーバーしてしまっていたので、画像サイズを変えたり、劣化させたり、色を少なくしたりしながら、なんとか5M以内にファイルサイズを抑えることが出来ました。

元ネタはこちら

「写真1枚で奥行きがあるアニメーションを作る方法」を参考に作りました。
https://helpx.adobe.com/jp/photoshop/how-to/animation-from-photo-parallax.html
youtubeで動画のマニュアルもありました。

タイムラインの使い方が今ひとつ理解できなかったのですが、動画のマニュアルをみてスッキリしました。
ただ、書き出しの方法などは書かれていないので両方のマニュアルを参考にすることをおすすめします。

Photoshopで猫を笑わせてみた。

Photoshopでブログ記事のサムネイル画像を自由に作れるようになりたく、独習を始めたので自分用にメモを残しておきます。

猫の写真を笑わせてみました。

今回は、猫の写真を人間のように笑わせてみたいと思います。

素材1

  1. 写真を開いたらレイヤーの複製をする。
  2. 投げ縄ツールを選択し、上部のメニューから「選択範囲」→「選択範囲を変更」→「境界をぼかす」を選択。(ぼかしを50%に設定)
  3. 複製されたレイヤーの猫の目の部分を「投げ縄ツール」で選択する。
  4. 上のメニューの「編集」→「パペットワープ」を選択。
  5. 目のラインに合わせてピンを複数打ち、目の形を笑っているように変形させる。
  6. 投げ縄ツールを選択し、上部のメニューから「選択範囲」→「選択範囲を変更」→「境界をぼかす」を選択。(ぼかしを100%に設定)
  7. 口とあご周りを「投げ縄ツール」で選択する。
  8. 上のメニューの「編集」→「パペットワープ」を選択。
  9. 笑っているように見せるため、口角を上げてゆく。

完成!

笑う猫_完成
最初、目がぱっちり開いている猫の写真で加工してみましたが、眼球が変な感じになってしまい、目を上手く笑わせることが出来ませんでした。目を瞑っている猫の写真の場合、割と簡単に加工することが出来ました。まじまじとみられると不自然な部分がたくさんありますが、ブログの挿絵に使う程度ならこれで十分かと思います。

元ネタはこちら

step4-13を参考に作りました。
https://helpx.adobe.com/jp/photoshop/how-to/gbn03-cat-puppet-warp.html?playlist=/jp/ja/ccx/v1/collection/product/photoshop/topics/j-project/collection.ccx.js?ref=helpx.adobe.com