メンチカツには醤油でしょ!!

AWS/Java/Node.js/Spreadsheets/Docker/Jenkins/コミュニティ・勉強会レポを主とした技術系ブログ

POSTするurlをブックマークしたい

最初にひとこと: POSTをブックマークすることはできません

経緯

最近また本業でWebサービスの開発とかやってます(しかもJava)。

で、Webサービスの画面って当然ログイン画面があって、開発中は対象の画面だけテストしたいんですが、毎回毎回ログインするのが大変なんですよね。

解決方法としては、PuppeteerでE2Eテストを自動化したり、デバッグ(開発中)モードであればログインをすっ飛ばすという仕組みを実装するというのもアリなんですが、そもそもユーザーIDとパスワードを付けてブックマークできたらクリックするだけで手軽なのになぁという考えから。

つまり
http://localhost:8080/your-apps/login?method=POST&user=admin&password=pass
みたいなことをやりたいって話です。
ただクエリストリングにmethod=POSTって書いてもPOSTにはなりません^^;

なので、POSTをブックマークすることは当然できないんですよね。

それなら、代わりにPOSTしてくれるページに、パラメーターをGETで渡してあげればいいじゃん、という発想から実装したものがコチラです。

 

github.com

 

細かいソースはGitHubを見てもらうとして。

file:///C:/your-local-directory/get-to-post/index.html#http://localhost:8080/your-apps/login?username=admin&password=pass

というようなURLでアクセスすれば、
#以降の内容を解釈してPOSTしてくれるというものです。
なお、formのパラメーターはクエリストリングで指定します。

また、デバッグモードも搭載しており

file:///C:/your-local-directory/get-to-post/index.html?debug#http://localhost:8080/your-apps/login?username=admin&password=pass

というような指定で、送信前のform内容可視化・自動submitオフ(submitボタン表示)で動作します。つまり、送信前のページにformが表示されるだけ。

注意

注意書きにも書きましたが、指定されたurlにどこへでもPOSTしますので、攻撃の踏み台にもなりかねないため、このindex.htmlをパブリックにアクセスできるような場所に配置・公開しないようにしてくださいね。

今、思っていること。+総括と今年買ってよかったもの 2020

たまにはポエムを

最初にちょっと総括を

世の中が大きくガラッと変わったり個人的にも変化があった一年です。さらに年齢のせいか自分のパフォーマンスが昔より低い気がして、ずっと頭の中で何かを考え続けるような一年でした。頭の中で答えを出すなとは言うけれど。

このブログとしては、今年は7本しか記事を書いてなくて、期待して購読されている方はごめんなさい。エンジニアとしてはNode-REDと少し関わっている程度で、実はあまり新しいことをやっていないです。それでも雑誌に記事を書かせていただくきっかけを頂いたり、登壇させて頂いたりは感謝しかありません。

2020年、今年の目標は何だったのか

例年、2月ぐらいには12月時点ぐらいの着地点を決めています。

ここのブログ記事を100本書くだとか、毎日GitHubの草を生やすだとか。

結構消耗しそうな目標しか立てられないのなんでだろう。

今年について言えば、1月時点での表目標は「今年は何もしない!」と決めて周囲に言いふらしており、何もせず消耗しないで余裕を持って世の中を見つめようと思っていたのですが、4月にはその世の中そのものが既に変わってしまいました。

「おうち時間」なんて言葉が今年の流行語にノミネートされていましたが、医療関係のような最前線の方々以外は、例年より自分の時間が少し多かったのではないでしょうか?新しいことを始めるにはもってこいですね。

「時間がたくさん!チャンスしかない!何を始めようか」と心変わり。多趣味で凝り性な自分ですが、昔は器用に色々できたのかもしれないけど、大きな時間の使い道があれやこれやと思い浮かんでは沈む。時間が増えた分だけ大小やりたいことがあれやこれやと。

情熱の注ぎ口は集中させないと

このブログって、エラーメッセージとかで検索すると出てくるサイトを目指しているところもありました。

そして、現在のサブタイトルは「AWS/Java/Node.js/Spreadsheets/Docker/Jenkins/コミュニティ・勉強会レポを主とした技術系ブログ」と設定してあるんですが、書ける機会が少なくなってきていることなど方向性についてもちょっと思う所があり、間口を広げて技術全般にしたいなだとか、もっと拡げてITを活用して身の回りの利便性を上げるだとか。過去のIFTTTの記事とかがそれに該当するかなと思います。

Node-RED Con Tokyo 2020 に登壇した際、プロフの「自動化大好き人間」の英訳が Automation Junkie と訳されていて、まさに自分のことをよく表していてとても気に入ってます。

そういった方向に舵を切る可能性があることを今年のうちに示唆しておきます。結局どうするかはまだ決めませんが、このブログとしては今こんなことを考えてます。

アウトプット; 何かを発信するということ

このブログもそうなんですが、何かをアウトプットすることは大事です。

YouTubeで動画を上げるようになったんですよ、内容は技術ではないのでさておき。

気づきがたくさんあったというか、初動に苦労してたくさん学びがありました。
ここらへんのスキルセットというか、考慮しなければいけないことを体系的にまとめた記事はコチラ。半年ぐらい苦労したといっても過言ではないです。今はこれに情熱を注いでいます。

ryoichi0102.hatenablog.com

そのうちこういうスキルが重なっていって何か独自の強みになったりするかなと思ってます。重ねるならなるべく違うものをって言うじゃない。

ワクワクするものを継続する、継続しているそれのワクワクを持続させる

はじめるのは簡単でも継続するのは本当に大変なことです。技術者として生きるには常に新しい技術を学び続けなくてはならないだとか、mustが無言の圧力としてかかっているような気がします。技術はもう飽きたのか?と言われるとソンナコトナイし、ワクワクすることだってあります。

最近Retweetでこんなものを見かけました。(内容はほぼ鬼滅関係ないです)

Amazonで「鬼滅の刃」のコミックを買ってしまったのに、どうしても読み始める気になれない。 | Books&Apps

内容は、子供心のワクワクと大人になって変わる心境を表しています。胸がキューっとなるシーンもありますが、いい話だなと思ったのでぜひ読んでみてください。ちょっと技術への向き合い方と重ね合わせてしまってドキッとしたのです。

エンジニアたるもの、ワクワクを継続させることって大事だよなと再認識。

私はIT技術に魅了されてから数えたら四半世紀も経つので、もうこれはほぼほぼ人生だなぐらいに思いこんでいましたが、それでも歳を重ねると視点って変わってくるもんだなとしみじみな2020年でした。

ホントに。

今年買ってよかったもの

さて、話は変わって今年買ってよかったもの・触れてよかったもののコーナーです!

Oculus Quest / Oculus Quest 2

技術的な要素でいえばこれぐらいですね。ただ、一家に一台はもうすぐそこに。そして一人一台の時代もそう遠くないですね。QuestでいえばケーブルレスかつPCレスで、いい画質という括りでこれ一択です。2020年に買って2が出てすぐ買い替えたぐらいです。未来はすぐそこです。

本棚

今まで本などの類は引き出しとか収納ボックスに入れてましたが、改めて良いなと思いました。本棚に入らない分量の本を持たないだとか、技術書とかを断捨離したりするいいきっかけになりましたね。

YouTube / HIKAKINさん

YouTuberをただのフザけた人たちだと斜に構えてましたが(言い過ぎ)、ひょんなことからHIKAKINさんの動画をたまに見るように。今更なんですが、この方は本当にすごい人ですね。人格者で努力の人って感じだというのが、サブチャンネルを見て判りました。

 

「技術は人なり」って言葉があって簡単に言えば、単に技術がすごいとかだけじゃなくて、まず人格者でありなさい的な意味なのですが、これからの時代は人柄であったりとかリスペクトできることであったり、マインドセットだとか意識や心の要素がより大事で、他人を理解することだとか自分をどうわかってもらうだとか、さらには自分と周囲の"一対多"をどう生きていくかが重要だと再認識しています。技術の世界でも心理的安全性だとかティール組織だとか言われるような時代ですからね。

突然スピリチュアルカウンセラーとか目指したりはしないのであしからず。

 

「継続は力なり」。努力できる人ってやっぱすごいんだよな、という一年でした。

 

・・・来年もがんばろ。

 

#YouTube に動画をアップする時にやるべきこと一覧

大変なのョ。。。

f:id:ryoichi0102:20201223202323p:plain

もしあなたが何か撮りたい動画の案を思い付いてYouTubeに動画をアップロードしようと考えたとき、またはYouTuberになろうと思った時に、ゼロスタートで何を考えればいいのか、ということを一覧にしました。

次に紹介する項目のひとつひとつで専用の記事が書ける内容ですが、この記事では一覧としてさらっと紹介します。

なお、動画アップロード系のYouTuberとライブ配信系のYouTuberでは必要なスキルが少し違いますので、内容にも依りますが下記を取捨選択していけばだいたい網羅できると思います。(配信系スキルのOBSとかについては書いてないです)

1. アカウント 編

「さぁYouTubeに動画を上げよう」と思った際にまずやることは、動画を撮ることではありません。

1-1. YouTubeチャンネル

GoogleアカウントとYouTubeチャンネルは、1:1、1:多、多:1、という3つの形式を取ることができますが、1:1はおすすめしません。メインアカウントですと「Googleにログインする時に使うアカウント」を使用することになるので、何かしらの理由で凍結されると不便です。Googleアカウントにサブチャンネルを増やすような形で開設するとよいでしょう。この場合でも、必ずしも新規でGoogleアカウントを作る必要はありません。

https://support.google.com/youtube/answer/4642409

1-2. SNSのアカウント

動画をアップロードしたらYouTube以外でもそれをお知らせするSNSが必要です。運用するチャンネルの内容によって、TwitterInstagramTikTokFacebookなど必要に応じて使い分ける感じかと思います。

1-3. アイコン

YouTubeと各種SNSのアカウントのアイコンを作る必要があります。YouTubeチャンネルのアイコンの規定サイズは800×800で、ご存知のとおり円形にクロップされます。また、細々デザインしても、表示はかなり小さいので、ひと目でわかるようなものが良いでしょう。

1-4. アカウント名

前述のようにSNSもある場合は、各SNSにおいて誰とも被っていない登録可能なアカウント名を考える必要があります。SNS毎に違うと視聴者にとってわかりにくいですよね。なお、YouTubeチャンネルのユーザー名の指定は登録者数が100人を超えないと指定できません。

https://www.youtube.com/c/【ここです】

最近ではYouTubeハンドルというものが登場しました。カスタムURLが今後生成できなくなるという話もあります。YouTubeハンドルは登録者数が100人を超えてなくても設定できますが、あまり大きなものを付けると拒否されることもあるそうです。また、コメント欄でのコメントなどもこのYouTubeハンドルが使えるようにもなるそうです。ブランディングのひとつとして捉えておきましょう。

https://www.youtube.com/c/@【ここです】

1-5. バナー画像

ヘッダー画像とかチャンネルアートという言い方をしている方も居ます。必須ではないですが、継続的に運用するのであればあったほうが良いでしょう。アップロードする画像にサイズと領域の決まりがあって、1つの画像でテレビ・PC・スマホとそれぞれ表示される領域が違うので、画像を作成するにあたって、画像の中でも訴求したいものの配置を気にする必要があります。

2. 撮影 編

さぁいざ撮影です。「編集でカバー」という、IT業界でいう「運用でカバー()」みたいなことを思って撮影を軽視すると、その分だけ編集に苦労して時間がかかります。また、撮影した動画は編集中に何度も何度も同じ箇所を見返すことになり、編集しやすいように撮れていないと最悪のケース自分自身のことが嫌いになることもあるので、撮影には愛着を持って無理のない範囲でこだわると良いと思います。

2-1. カメラ

iPhoneスマホ?ビデオカメラ?一眼レフ?ミラーレス?GoProのようなアクションカメラ?など何を撮るかによって向き不向きが違います。

2-2. マイク

カメラについているものをそのまま使うのか。外部マイクを使うのか。

外部マイクの場合はどこで録るのか何を録るかによって、ダイナミックマイクなのか、コンデンサーマイクが良いのか、ヘッドセットなのか、ピンマイクを付けるのか、ガンマイクが良いのか、指向性を考える必要が出てきます。マイクの電源は?端子はXLR?ミキサーから供給?ポップガードやウィンドジャマーは必要?などなど。

ナレーションを入れる場合は、後から録音する仕組みも必要です。編集ソフトの機能を使ってPCの内蔵マイクで録音?iPhoneで撮ってMacに転送?最近はPCにサウンドカード(audio in / LINE IN)が付いているものが少ない気がするので、こちらの流れも考えておくといいでしょう。

ライブ配信系で、PCや機器の音と、外部の音を取り込んで、合わせて配信する場合は、ミキサーなども必要になると思います。

2-3. 照明・ライティング

室内で撮ったり、日陰だったり、環境によってですが、意外と必要なんですよね。ライティングひとつ取っても立派なスキルとして成立するぐらい奥が深いです。

照明を当てるということは、対象を(画を)明るくすることだと思いがちですが、「影を作ること」ということを思い知りました。未だに試行錯誤します。

機材スペックでいえば、色温度とかCRI値とかを気にしないといけません。CRI値は95以上推奨。

2-4. スタンド(三脚)

カメラ・マイク・照明・グリーンバックなど、もろもろを立てて、角度を固定するものが必要です。ちなみに、普通の三脚とビデオ用の三脚はモノが違います。ビデオ用の三脚はパンやチルト(横や縦に並行に動かすこと)しやすいようになっていて価格差がかなりあります。ただ、カメラ固定で動画を撮るようなスタイルの場合は、普通の三脚でもカメラの重さに耐えられればそれで良いと思います。

2-5. グリーンバック

撮影スタジオなどで見かけるような後ろにある緑色の大きな布のことです。ブルーバックという青色のものもあります。

ゲーム実況系で自画像を入れたい場合などに使うと言ったら、わかりやすいでしょうか。このように作りたい動画でクロマキー合成をしたい場合は、グリーンバックが必要です。たぶん想像より高いです、笑。100均で作る猛者も居ますが、グリーンバックへのライティングがいい加減だと、背景が抜けないまたは一部しか抜けないなどの現象に遭遇します。

2-6. 背景・壁

ただの白い壁など単一色背景で、演者が1人で喋っている動画でもいいかも知れませんが、芸人ほどのトークスキルでもなければ、画に華が足りないと思うかもしれません。そんな時は壁や背景の装飾も検討しましょう。ただやりすぎは注意ですね。難しい場合はグリーンバックで抜いて、好みの画像をあててもいいかも知れません。実況系だとゲーミングチェアに座ってる人が多い印象です。

2-7. 自撮り棒

自撮り棒に一定の抵抗感を持つ方が殆どだと思いますが、あれは時と場合において必要なシロモノです。モノに罪はありません。外で自身を含めて撮影する場合などは特に。ロケなのに画が自分の顔のアップばかりだとせっかくの場所である背景がもったいないです。

ところで私は陽キャではありませんので、こんなもの使う機会ないと思っていたのですが、本当にナメてはいけません。自分の手の届かない所からの角度を撮りたい場合なども重宝します。最近ではBluetoothリモコンが付いてたり、三脚にもなる自撮り棒がありますので、それがおすすめです。

使用の際には当然ながらその場所のルールに従い、さらに周囲に配慮しながら使います。

2-8. 衣装

毎回同じTシャツを着るとか、そういうことです。必ずしも奇抜な格好をする必要はなく、suzuriとかでオリジナルTシャツを作ってそれを着て動画を撮れば、回を重ねるごとに「おなじみ感」が出るのではないでしょうか。

2-9. サムネ撮影

最近テレビでよくYouTuberが出演する時に、バズるにはこれだと頻繁に言っていますね。これ"だけ"ではないですが、本当に重要な要素だと思います。改めて別で撮らずに、動画の撮影のついでにサムネ用に撮って後で切り出すと楽だと思います。何も考えてないと後で必要になったときに後悔します。

2-10. 物撮り・撮影ボックス

レビュー系動画などにおいて、対象物を別で撮っておいて動画に挿入するということをやる場合、物撮りが必要になります。モノによっては撮影ボックスなどが欲しくなるかも知れません。

2-11. スキャナー

物撮りの一種ですが、対象が平面の場合は、スキャナーを使うと綺麗に画像化できて動画に埋め込めますね。私はScanSnap使っています。 

3. 内容

ここまでちゃんと読んでいただいた方はきっともう息切れしているかも知れません。しかし、想像の通りここが一番大事です。「1. アカウント 編」と「2. 撮影 編」は最初に始める時に検討することで、ある程度慣れてきたり型ができると同じ繰り返しで労力は軽減しますが、この「3. 内容」については継続的に新しいものをアウトプットし続けなければ、更新の止まったYouTuberとしてオワコン認定です(言い過ぎ)。

企画であったり、台本であったり、トークであったり。はたまたコラボであったり。

4. 編集 編

一番重要なのは「3. 内容」ですが、一番時間がかかるのが「4. 編集」です。職業にするにはなんとツラい仕事なんだYouTuberって、と思い知ります。

4-1. 動画編集ソフト

iMovie?Final Cut?Adobe Premiere?
Windowsでやる?Macでやる?使い勝手は?
スマホの動画編集アプリという猛者な選択もありかも知れません。

私は、最初にFilmoraとAdobe Premiere Elementsの試用版を試しました。ちょっと触って書き出して確認すれば良かったのですが、どちらも書き出した動画に透かし(試用版的なロゴ)が入っていて、せっかく時間をかけて編集した後にこの制限に気づいたので、そのままアップできず発狂しました。

Final Cut Proも90日試用できてこちらは機能制限がないみたいですが、私はWin/Mac両方で使いたかったので試してません。

画質は、1280x720の720p もしくは 1920x1080の1080p あたりでよいでしょう。

(2021/02/15 追記) 最近はカラーグレーディングができるDaVinci Resolve (無料)または、DaVinci Resolve Studio (有料)が気になってますが、まだ試してません。

4-2. BGM

これも悩みますね。邪魔しすぎず、内容に合っているものを。

だいたいの人は https://dova-s.jp/bgm/ もしくは https://amachamusic.chagasi.com/ から取っている印象です。ほとんどが商用利用可ですが、規約には目を通しましょう。

たくさんある中からひとつひとつ聴いて選ぶのが大変な作業です。

4-3. 効果音

最近はみなさんかなり多めに入れている印象。どれぐらいの頻度で入れるのか迷うところですが、動画の先頭に多くて、後ろの方に少ないと「ああ、編集疲れたんだな」と思っちゃいます。

だいたいみなさん https://soundeffect-lab.info/ から取ってます。商用利用可で、クレジット表記もリンクも不要という親切すぎるサイトです。最近テレビのバラエティ番組、も媚びてるのかここから使っているところが多いです。

4-4. テロップ・フォント

全部が全部に入れると本当に大変ですが、こちらも最近はかなりの多めに入れている方が多い印象です。いちいちフォントを探してきてサイズ合わせて色変えて…大変です。

文字入れの技術、フォントの選び方。表示タイミング、動画内の位置、切り方。

一連の中でいちばん誰かに代行してほしい作業かも知れません。

4-5. サウンドロゴ

一般的に"ロゴ"といえば、トレードマークのような画像のことを指しますが、それの音バージョンということです。フリー素材でもいいですし、組み合わせもいいですし、オリジナルでもいいですが、毎回同じにしておくとこちらもおなじみ感が出ると思います。

4-6. オープニング画像や動画

サウンドロゴに似ていますが、 5秒程度のオープニングの動画のことを言っています。無くても困りませんが、合ったほうがメリハリが付きます。

4-7. ブリッジ動画/画像

シーンの転換に利用する0.5~1秒程度の動画や画像です。流れるのは一瞬ですが、こういうのも作っておくとメリハリが出ます。

4-8. 終了画面

「Torn Jeans Long」でググってみてください。それを聴いてあなたが思い浮かべたものがこれですと言っても過言ではないです。動画をいくつかアップロードしないと設定できないので、後回しでもよいでしょう。

4-9. サムネ編集

動画編集ソフトだけでなく画像編集ソフトの使い方も覚える必要があります。

こちらもテロップ同様、フォントを探したり選んだり、色や太さを視認性を意識しながら作る必要があります。サイズは16:9で1280x720あればよいでしょう。

InkscapeGIMPかフォトショかイラレあたりでいいでしょう。

5. アップロード

これでやっとアップロード・・・と思いきやまだ少し考えることがあります。

5-1. タイトル

VSEOと言うらしいです。VideoのSEOということですね。キーワードをタイトルに含めます。60文字以内。

5-2. 概要欄

こちらもVSEO。もちろんキーワード入れます。自己紹介を書いたりコラボ相手のリンクを貼ったり、SNSへのリンクを貼ったり。大事な導線です。
チャプターの設定もここで行います。

5-3. ハッシュタグ

3つまで設定できます。概要欄に設定したテキスト郡の中から、登場順に先頭3つがその動画のハッシュタグとして設定されます。

5-4. 再生リストの設定

これもVSEOには重要な要素です。公式シリーズの設定も忘れずに。

6. プロモーション

ここでは1つ以上動画をアップしてから、どうやって広めてどうやって知ってもらうかなどの話です。ここは数々の方法があるのでさらっと。

6-1. SNSでの活動

6-2. 他のチャンネルとの交流

6-3. スポットライト動画の設定

チャンネル登録していないユーザー向けと、チャンネル登録者向けの動画の設定または制作。

6-4. 注目セクションの設定

6-5. アナリティクスの確認(登録者数、高評価数・コメント・再生数など)

以上、34項目!でした 

YouTubeって本当に大変ですね。