<p>今回は手軽に画面録画とそのまま編集できるブラウザのサービスを紹介していきます。<br />
専用のソフトなども必要なく、また無料で使用できる為とても便利なサービスとなっております。<br />
何よりも、編集部分に関してはアニメーション効果も多く用意されている為、マニュアル動画からプロモーション動画まで様々な用途に使用できます。</p>
<h3>「RecordCast」の特徴</h3>
<h4>
メリット</h4>
<p>
・有料プランなどなく、無料で使用できる<br />
・ブラウザで動作する為、インストールが不要<br />
・webカメラとスクリーンの映像が同時に録画可能<br />
・編集がしやすい(編集ソフトのみの使い方も可能)<br />
・マイクやシステム音も同時録音可能</p>
<h4>デメリット</h4>
<p>
・１回の録画時間が30分まで<br />
・保存できるプロジェクトが8つまで</p>
<h3>録画のやり方</h3>
<p>
「Create by Record」を選択することによって録画のモードを以下の３つから選びます。<br />
・Screen+Webcam<br />
・Screen Only<br />
・Webcam only</p>
<p><img loading="lazy" class="aligncenter size-full wp-image-6339" src="/uploads-archive/lc/2021/02/a2db1cc40a09b6643f57c2f5106771fa.png" alt="" width="1253" height="675" srcset="/uploads-archive/lc/2021/02/a2db1cc40a09b6643f57c2f5106771fa.png 1253w, /uploads-archive/lc/2021/02/a2db1cc40a09b6643f57c2f5106771fa-300x162.png 300w, /uploads-archive/lc/2021/02/a2db1cc40a09b6643f57c2f5106771fa-1024x552.png 1024w, /uploads-archive/lc/2021/02/a2db1cc40a09b6643f57c2f5106771fa-768x414.png 768w, /uploads-archive/lc/2021/02/a2db1cc40a09b6643f57c2f5106771fa-600x323.png 600w" sizes="(max-width: 1253px) 100vw, 1253px" /></p>
<p>次は録音設定でこちらも以下の４つから選びます。<br />
・マイク+システム音<br />
・マイク<br />
・システム音<br />
・なし</p>
<p><img loading="lazy" class="aligncenter size-full wp-image-6340" src="/uploads-archive/lc/2021/02/8730212cd62c33d0a63b145ab43247a5.png" alt="" width="1206" height="644" srcset="/uploads-archive/lc/2021/02/8730212cd62c33d0a63b145ab43247a5.png 1206w, /uploads-archive/lc/2021/02/8730212cd62c33d0a63b145ab43247a5-300x160.png 300w, /uploads-archive/lc/2021/02/8730212cd62c33d0a63b145ab43247a5-1024x547.png 1024w, /uploads-archive/lc/2021/02/8730212cd62c33d0a63b145ab43247a5-768x410.png 768w, /uploads-archive/lc/2021/02/8730212cd62c33d0a63b145ab43247a5-600x320.png 600w" sizes="(max-width: 1206px) 100vw, 1206px" /></p>
<p>これで「Start Recording」を押し、全画面・ウィンドウ・Chromeタブを選択し録画開始になります。<br />
分かりにくい設定などほとんどなく、ストレスフリーに録画をすることが可能です。</p>
<p>&nbsp;</p>
<h3>
編集の仕方</h3>
<p>
・録画後、すぐに編集する場合<br />
　「Edit and Export in MP4」を押すとそのまま編集画面に飛びます。</p>
<p><img loading="lazy" class="aligncenter size-full wp-image-6342" src="/uploads-archive/lc/2021/02/703efb268ebe18b9190d12f092348fab.png" alt="" width="1200" height="775" srcset="/uploads-archive/lc/2021/02/703efb268ebe18b9190d12f092348fab.png 1200w, /uploads-archive/lc/2021/02/703efb268ebe18b9190d12f092348fab-300x194.png 300w, /uploads-archive/lc/2021/02/703efb268ebe18b9190d12f092348fab-1024x661.png 1024w, /uploads-archive/lc/2021/02/703efb268ebe18b9190d12f092348fab-768x496.png 768w, /uploads-archive/lc/2021/02/703efb268ebe18b9190d12f092348fab-600x388.png 600w" sizes="(max-width: 1200px) 100vw, 1200px" /><br />
・プロジェクトから開く場合<br />
　RecordCastのトップに飛ぶとMy Projectsがあるので保存したプロジェクトを再度編集する場合はこちらから</p>
<p><img loading="lazy" class="aligncenter size-full wp-image-6343" src="/uploads-archive/lc/2021/02/ff151397572aa1512cc2fa72b9fa8ffe.png" alt="" width="1253" height="566" srcset="/uploads-archive/lc/2021/02/ff151397572aa1512cc2fa72b9fa8ffe.png 1253w, /uploads-archive/lc/2021/02/ff151397572aa1512cc2fa72b9fa8ffe-300x136.png 300w, /uploads-archive/lc/2021/02/ff151397572aa1512cc2fa72b9fa8ffe-1024x463.png 1024w, /uploads-archive/lc/2021/02/ff151397572aa1512cc2fa72b9fa8ffe-768x347.png 768w, /uploads-archive/lc/2021/02/ff151397572aa1512cc2fa72b9fa8ffe-600x271.png 600w" sizes="(max-width: 1253px) 100vw, 1253px" /></p>
<p>&nbsp;</p>
<h3>編集で「Create by Record」を使うべきメリット</h3>
<p><img loading="lazy" class="aligncenter size-full wp-image-6344" src="/uploads-archive/lc/2021/02/91d0a0b4f40e2acbc9620fe4dad6895a.png" alt="" width="1241" height="794" srcset="/uploads-archive/lc/2021/02/91d0a0b4f40e2acbc9620fe4dad6895a.png 1241w, /uploads-archive/lc/2021/02/91d0a0b4f40e2acbc9620fe4dad6895a-300x192.png 300w, /uploads-archive/lc/2021/02/91d0a0b4f40e2acbc9620fe4dad6895a-1024x655.png 1024w, /uploads-archive/lc/2021/02/91d0a0b4f40e2acbc9620fe4dad6895a-768x491.png 768w, /uploads-archive/lc/2021/02/91d0a0b4f40e2acbc9620fe4dad6895a-600x384.png 600w" sizes="(max-width: 1241px) 100vw, 1241px" /><br />
このサービスにおいて一番便利だと思った部分が編集にあるアニメーションコンテンツのバリエーションの多さと素材の挿入(編集画面から直接録画開始可能)という事です。<br />
編集画面の左にあるタブには<br />
・Media<br />
・Text<br />
・Background<br />
・Element<br />
・Overlay<br />
があり、Mediaタブは挿入と録画をすることが可能。<br />
Textに関してはノーマルのベタのものからアニメーションが元々付いているものがあり、バリエーションも多くある為いろんな場面で使えるものとなっています。<br />
Elementは動くスタンプみたいなもので自社snsアカウントの紹介やボタンなどお洒落なものが気軽に配置することが出来ます。<br />
Overlayに関してもクオリティの高いアニメーションを使った動画の切り替えが可能となるものが多くあります。<br />
プレミアプロ の様に細かいアニメーションの調整は出来ないですが、その分編集が苦手な人でも問題なく使えると感じました。</p>
<h3>まとめ</h3>
<p>
同じ様な編集が必要なマニュアル作成やオンライン授業、Web会議の録画などの用途にこのサービスはとても向いていると感じました。<br />
またブラウザ上で動作している為、動作も他の編集ソフトに比べ軽く感じました。<br />
簡単な編集・急ぎの動画編集などはこれらのサービスを利用してみても良いかと思いました。</p>


ブラウザのみで画面録画＆編集可能な「RecordCast」

LaunchCartで直属の子カテゴリー一覧を取得する

<p>こちらは人工知能(AI)を研究するOpenAIという団体が2021年1月5日に自然言語処理と画像生成を組み合わせたAIとして「DALL・E(デリー)」という愛称で発表しました。<br />
同団体より開発された、人間の様に高精度な文章を生成することができる「GPT-3」のパラメータを使用し、それによって文章からイラストや写真といった画像を生成することが可能となりました。</p>
<p>ここで使用されている「GPT-3」とは1750億個のパラメータで動作し、いくつかのキーワードを与えると人間が書いたような文章を生成する。その為か、「この言語モデルは危険すぎる」や「新たなブレイクスルーだ」などの議論を生むほどのもので、実際に技術者のマヌエル・アラオス氏が投稿したGPT-3に関するブログを、実は人間ではなくGPT-3が書いたものであることが話題を呼びました。</p>
<p>その言語モデルでありGPT-3を使用した今回の「DALL・E」は学習と推論を経て見たことがないものを予測できる様な技術となっている。</p>
<p><a href="https://openai.com/blog/dall-e/">https://openai.com/blog/dall-e/</a></p>
<h3>画像生成例</h3>
<p>「ネオンサイン」「openAI」というキーワードを使う事によって下記の様な画像を生成した。</p>
<p>原文：a neon sign that reads &#8216;openai&#8217;.(openaiと読むネオンサイン)</p>
<p><img loading="lazy" class="aligncenter size-large wp-image-6085" src="/uploads-archive/lc/2021/01/b043e10fd7d10dbcef65ad59c05b4c0a-1024x702.png" alt="" width="1024" height="702" srcset="/uploads-archive/lc/2021/01/b043e10fd7d10dbcef65ad59c05b4c0a-1024x702.png 1024w, /uploads-archive/lc/2021/01/b043e10fd7d10dbcef65ad59c05b4c0a-300x206.png 300w, /uploads-archive/lc/2021/01/b043e10fd7d10dbcef65ad59c05b4c0a-768x526.png 768w, /uploads-archive/lc/2021/01/b043e10fd7d10dbcef65ad59c05b4c0a-600x411.png 600w, /uploads-archive/lc/2021/01/b043e10fd7d10dbcef65ad59c05b4c0a.png 1278w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>「OpenAI」というネオンサインは現実には存在せず、すべてAIが文章をレンダリングし、作り上げています。</p>
<p>しかし、求められる文字列が長いほど画像生成の成功率は低くなる様です。</p>
<p>その他にもプロダクトデザイン、街の背景や手書きの様なスケッチも生成することが可能となっている。</p>
<p><img loading="lazy" class="aligncenter size-full wp-image-6089" src="/uploads-archive/lc/2021/01/28d8b388e1fe0cd702a462e0939813c1.png" alt="" width="769" height="815" srcset="/uploads-archive/lc/2021/01/28d8b388e1fe0cd702a462e0939813c1.png 769w, /uploads-archive/lc/2021/01/28d8b388e1fe0cd702a462e0939813c1-283x300.png 283w, /uploads-archive/lc/2021/01/28d8b388e1fe0cd702a462e0939813c1-600x636.png 600w" sizes="(max-width: 769px) 100vw, 769px" /></p>
<p>この様に文章で画像を生成する技術が進歩する事によって起こる社会的影響も多く、特定の業種やサービスにとって将来的に与える影響は重要なものと考えられる。</p>
<p>また、これら社会的影響に関してはopenAIは認識しており、この技術が示唆する長期的な倫理的課題などの社会的課題とどのように関連しているかを分析する予定との事でした。</p>


言葉の説明によって自動生成するイラストAI「DALL・E(デリー)」

Reactを部分導入する場合にReact root外の要素と連携する

<p>主な動画編集ソフト：Adobe Premiere Proなどがあり、近年YouTube等で動画を個人で制作し、アップするという事が日常的に行われる様になってきた為、より動画制作が身近なものとなりました。</p>
<p>その為、動画編集ソフトも様々なものが出て来ました。<br />
今回はその中の一つとして、「DaVinci Resolve」という動画編集ソフトを紹介していこうと思います。</p>
<p><a href="https://www.blackmagicdesign.com/jp/products/davinciresolve/whatsnew">https://www.blackmagicdesign.com/jp/products/davinciresolve/whatsnew</a></p>
<h2>DaVinci Resolveとは</h2>
<p>Windows/Mac/Linuxに対応するフリーソフト(有償版有り)で、高機能な動画編集ソフトになります。<br />
カット編集、音声入力、テロップなどの編集に必要な基本的な機能を備えている上、Ultra HD解像度（3,840×2,160ピクセル）に対応しており、他の有償ソフトにも引けを取らないものとなっております。</p>
<h2>無償版でできる事</h2>
<p>・Ultra HD解像度での出力<br />
・60fpsまでのフレームレート<br />
・ほぼ全ての編集機能<br />
・ほぼ全てのカラー機能<br />
・ほぼ全てのFairlight機能<br />
　→ミキサー、EQ、ダイナミクス、サンプルレベルの編集機能、ADRツール、サウンドライブラリのサポート、FairlightFXオーディオプラグインなどを利用してオーディオミキシングを行えます。<br />
・ほぼ全てのFusion機能<br />
　→Adobe After Effectsの様な、映像にVFX(視覚効果)や3DCGを合成することができます。<br />
・ほぼ全てのファイルフォーマット</p>
<p><img loading="lazy" class="aligncenter size-full wp-image-5888" src="/uploads-archive/lc/2020/12/speed-md.jpg" alt="" width="1000" height="500" srcset="/uploads-archive/lc/2020/12/speed-md.jpg 1000w, /uploads-archive/lc/2020/12/speed-md-300x150.jpg 300w, /uploads-archive/lc/2020/12/speed-md-768x384.jpg 768w, /uploads-archive/lc/2020/12/speed-md-600x300.jpg 600w" sizes="(max-width: 1000px) 100vw, 1000px" /></p>
<p>などなど、たとえ無償であっても動画編集に対して十分な機能が備わっております。<br />
アップデートはもちろん、商用利用なども認められております。</p>
<p>&nbsp;</p>
<h3>最新版では</h3>
<p>最新版となるDaVinci Resolve 17(2020年12月現在)では100種類以上の新機能および200種類の改良点を提供するメジャーアップデートが行われました。<br />
使える機能がかなり多くなる為、その中でもいくつかを紹介します。</p>
<p>
・Magic Maskを使ったターゲットグレーディング<br />
　→的を絞った補正を行うために、人物を選択・トラッキングする作業が今まで以上に簡単になり、人物全体のマスク、または顔や腕など特定の部位のマスクを自動的に作成します。</p>
<p><img loading="lazy" class="aligncenter size-full wp-image-5885" src="/uploads-archive/lc/2020/12/tracking.jpg" alt="" width="490" height="262" srcset="/uploads-archive/lc/2020/12/tracking.jpg 490w, /uploads-archive/lc/2020/12/tracking-300x160.jpg 300w" sizes="(max-width: 490px) 100vw, 490px" /></p>
<p>
・ベクトルシェイプをカスタマイズ<br />
　→モーショングラフィックスの作成を容易にし、アニメーションをカスタマイズできます。</p>
<p><img loading="lazy" class="aligncenter size-full wp-image-5886" src="/uploads-archive/lc/2020/12/nodes.jpg" alt="" width="493" height="262" srcset="/uploads-archive/lc/2020/12/nodes.jpg 493w, /uploads-archive/lc/2020/12/nodes-300x159.jpg 300w" sizes="(max-width: 493px) 100vw, 493px" /></p>
<p>&nbsp;</p>
<p>まだまだここでは伝え切れない程の気になる機能がたくさんありますので機会があればぜひ皆さんもさわってみて下さい。</p>
<p>&nbsp;</p>
<p>参考サイト</p>
<p>・YouTubeへの動画アップロードも可能！ 無料で多機能の動画編集ソフト「DaVinci Resolve」　<a href="https://forest.watch.impress.co.jp/docs/review/1287693.html">https://forest.watch.impress.co.jp/docs/review/1287693.html</a></p>
<p>・DaVinci Resolve 無償で高機能な動画編集ソフトについて</p>
<p>  <a href="https://www.pc-koubou.jp/magazine/37640">https://www.pc-koubou.jp/magazine/37640</a></p>
<p>・DaVinci Resolveの無償版と有償版の違いは？　<a href="https://vook.vc/n/224">https://vook.vc/n/224</a></p>


高性能の動画編集ソフト「DaVinci Resolve」の紹介

<h3>はじめに</h3>
<div style="padding-left: 15px;">
  最後の投稿は技術から離れてマインドの投稿です。<br />
  自身の持論と経験に基づく考えですので<br />
  一般的ではなく役に立つかどうかは不明ですが綴っておきたいと思います。</p>
<p>  大きく分けて以下を記述します。</p>
<ul>
<li>定義</li>
<li>&#8220;成功&#8221;時と&#8221;失敗&#8221;時の違い</li>
<li>道筋が大事</li>
</ul>
</div>
<h3>定義</h3>
<div style="padding-left: 15px;">
  以下に記述していく「成功」「失敗」の定義です。</p>
<p>  シンプルに<br />
<strong>  「思い描いた通りの結果になる」<br />
  「思い描いた通りの道筋を描く」</strong><br />
  というのを&#8221;成功&#8221;パターンとし、<br />
  その逆を&#8221;失敗&#8221;パターンと定義します。
</div>
<h3>&#8220;成功&#8221;時と&#8221;失敗&#8221;時の違い</h3>
<div style="padding-left: 15px;">
  自他共に経験的に違うものとして大きなものが</p>
<p><strong>  「成功すると思っていない」<br />
  「成功イメージが出来ていない」<br />
  「成功時と&#8221;現在&#8221;の違いを認識出来ていない」</strong></p>
<p>  という傾向が多かったです。</p>
<p>  1つ目は何となくやっていたり<br />
  自信がなく「本当に出来るかなぁ」などと<br />
  確信を持たずに行動して上手くいくケースは稀です。</p>
<p>  2つ目は「成功した時の像を描いていない」というケース。<br />
  「どういう状態であれば成功しているだろう」<br />
  と言う未来の自分を描くことなく、これも何となく進んでいることで<br />
  実際は進んでおらず変わらない、あるいは後退することがある。</p>
<p>  3つ目は「成功イメージに対して&#8221;今の自分&#8221;に何が足りていないか」<br />
  を正確に認識出来ていないケース。</p>
<p>  成功するにはシンプルに「成功」してる<strong>未来の自分</strong>と<br />
  <strong>「今現在の自分」</strong>を結びつけてあげれば良いのですが<br />
  その違いを埋めて行く際に「違い」そのものの認識が誤っている、<br />
  あるいは「違い」が埋まっていないなどの問題が生じるケースもあります。</p>
<p>  すべての共通解決方法として<br />
<strong>  「何に向かっていくべきか」<br />
  「その到達地点にあって今は無いものは何か」<br />
  「到達地点に向かっていく過程において、本当に向かっているか」</strong><br />
  をしっかりイメージ出来れいれば多少の知識・経験の不足などは問題ではないと考えています。</p>
<p>  実際、自分自身が上手く行かなった時を思い返すと<br />
  「成功する」という確信はなく、未来の像を具体的にイメージ出来ておらず<br />
  進んでいる過程が「前進している」という感覚が無いときがほとんどでした。
</p></div>
<h3>道筋が大事</h3>
<div style="padding-left: 15px;">
  自分がよく<br />
<strong>  「出来ると思っていれば出来る。出来ないと思っていたら出来ない」</strong><br />
  と言うことを言います。</p>
<p>  とある有名な小説家の体験談で言うと</p>
<blockquote><p>  「私が運が良いのは『私は運が良いと思っている』からなんだ」</p></blockquote>
<p>  というものに近いです。</p>
<p>  「結果」を確信していると勝手にそこにたどり着くし<br />
  「結果」を信じていなければ、途中で無意識に<br />
  「そうならなくても良いかも」「諦めよう」と道をそれることで「結果」に辿り着かないという理論だと思います。</p>
<p>  そのためには<br />
  「意志」ではなく「意思」が大事なのではないでしょうか。</p>
<p>  何か達成したり成功するのはただ単純に<br />
  ゴールと今現在を結ぶ、という認識と状況の変化だけではないのでしょうか。
</p></div>


イメージを繋げる話

Reactの状態管理ライブラリー「Recoil」で非同期通信によるデータ読み込み

<h3>はじめに</h3>
<div style="padding-left: 15px;">
  ビジネス自己啓発本とかによるあるタイトルで投稿してみました。<br />
  今でも流行っているかは定かではありませんが。</p>
<p>  今回は、日頃<u>簡単なドキュメント作り</u>で使わせてもらっている<br />
  <strong>HackMD</strong><br />
  のあまり使っていなかった(知らなかっただけ)<br />
  機能についてご紹介します。
</div>
<h3>Book機能</h3>
<div style="padding-left: 15px;">
  所謂<strong>目次機能</strong>です。<br />
  既に作成済みの<strong>Hackmd</strong>の<strong>索引的役割を果たす</strong>ので<br />
  <u>「HackMDのDocumentゼロ状態」<br />
  では役に立ちません</u>。</p>
<p>  見出しを大項目から順番に<br />
  「###」「&#8212;」で段落を区切ります。</p>
<p></p>

		<div id="crayon-64954036ec544722253280" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">XHTML</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
  ドキュメントタイトル
  ===

  Aについて
  ---
   - [] aについて(/省略url?view)
   - [] bについて(/省略url?view)

  Bについて
  ---
   - [] xについて(/省略url?view)
   - [] yについて(/省略url?view)</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64954036ec544722253280-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954036ec544722253280-2">2</div><div class="crayon-num" data-line="crayon-64954036ec544722253280-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954036ec544722253280-4">4</div><div class="crayon-num" data-line="crayon-64954036ec544722253280-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954036ec544722253280-6">6</div><div class="crayon-num" data-line="crayon-64954036ec544722253280-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954036ec544722253280-8">8</div><div class="crayon-num" data-line="crayon-64954036ec544722253280-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954036ec544722253280-10">10</div><div class="crayon-num" data-line="crayon-64954036ec544722253280-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954036ec544722253280-12">12</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64954036ec544722253280-1"><span class="crayon-h">&nbsp;&nbsp;</span>ドキュメントタイトル</div><div class="crayon-line crayon-striped-line" id="crayon-64954036ec544722253280-2"><span class="crayon-h">&nbsp;&nbsp;</span>===</div><div class="crayon-line" id="crayon-64954036ec544722253280-3">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-64954036ec544722253280-4"><span class="crayon-h">&nbsp;&nbsp;</span>Aについて</div><div class="crayon-line" id="crayon-64954036ec544722253280-5"><span class="crayon-h">&nbsp;&nbsp;</span>---</div><div class="crayon-line crayon-striped-line" id="crayon-64954036ec544722253280-6"><span class="crayon-h">&nbsp;&nbsp; </span>-<span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-sy">]</span><span class="crayon-h"> </span>aについて<span class="crayon-sy">(</span>/省略url<span class="crayon-sy">?</span>view<span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-64954036ec544722253280-7"><span class="crayon-h">&nbsp;&nbsp; </span>-<span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-sy">]</span><span class="crayon-h"> </span>bについて<span class="crayon-sy">(</span>/省略url<span class="crayon-sy">?</span>view<span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954036ec544722253280-8">&nbsp;</div><div class="crayon-line" id="crayon-64954036ec544722253280-9"><span class="crayon-h">&nbsp;&nbsp;</span>Bについて</div><div class="crayon-line crayon-striped-line" id="crayon-64954036ec544722253280-10"><span class="crayon-h">&nbsp;&nbsp;</span>---</div><div class="crayon-line" id="crayon-64954036ec544722253280-11"><span class="crayon-h">&nbsp;&nbsp; </span>-<span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-sy">]</span><span class="crayon-h"> </span>xについて<span class="crayon-sy">(</span>/省略url<span class="crayon-sy">?</span>view<span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954036ec544722253280-12"><span class="crayon-h">&nbsp;&nbsp; </span>-<span class="crayon-h"> </span><span class="crayon-sy">[</span><span class="crayon-sy">]</span><span class="crayon-h"> </span>yについて<span class="crayon-sy">(</span>/省略url<span class="crayon-sy">?</span>view<span class="crayon-sy">)</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>  のような記述方法で書きます。</p>
<p>  HackMD公式サンプル (urlも任意に指定可能)<br />
  <a href="https://hackmd.io/c/book-example/%2Fs%2Ffeatures">https://hackmd.io/c/book-example/%2Fs%2Ffeatures</a>
</div>
<h3>Slide機能</h3>
<div style="padding-left: 15px;">
  スライド機能。<br />
  <strong>PowerPoint</strong>, <strong>Google Slide</strong>のような機能です。<br />
  結構これが目から鱗。</p>
<p>  サンプルで作ったのはこちら<br />
  <a href="https://hackmd.io/@batHz9KeR_eAjIqRdJgXjA/HyY2RdsYP#/">https://hackmd.io/@batHz9KeR_eAjIqRdJgXjA/HyY2RdsYP#/</a></p>
<p>  スライドに枝と言う概念があり<br />
  スライドは横に進んでいくのに対して<br />
  縦方向に枝分かれして詳細を述べることが出来ます。</p>
<p>  <strong>MarkDown記法</strong>に慣れている方で<br />
  凝ったプレゼンではなく、ささっと簡単なアニメーションを入れて<br />
  箇条書きベースのを少し魅せたい、という方にオススメかと思います。</p>
<p>  HackMD公式サンプル<br />
  <a href="https://hackmd.io/p/slide-example#/">https://hackmd.io/p/slide-example#/</a>
</div>

hackmd.png

HackMDで知っておくべきたった2つの機能

<h3>ある日のこと</h3>
<p><span style="font-weight: 400;">ミャンマー支店から連絡があり、PDFで出力したミャンマー語が文字化けしている！とのこと。<br />
</span></p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-16725" src="/uploads-archive/2020/11/スクリーンショット-2020-11-09-18.08.24-300x22.png" alt="" width="519" height="38" srcset="/uploads-archive/2020/11/スクリーンショット-2020-11-09-18.08.24-300x22.png 300w, /uploads-archive/2020/11/スクリーンショット-2020-11-09-18.08.24-228x16.png 228w, /uploads-archive/2020/11/スクリーンショット-2020-11-09-18.08.24.png 346w" sizes="(max-width: 519px) 100vw, 519px" /></p>
<p><span style="font-weight: 400;">日本人の私では判別不能ですが文字化けしてるらしいのです。<br />
</span><span style="font-weight: 400;">詳細を聞くと、前回は別の箇所で文字化けが起こったため、その対応として別のフォントをサーバにインストールしたところ今度は別の箇所が文字化けしたという経緯のようでした。</span></p>
<h3><span style="font-weight: 400;">ビルマ語のフォント、UnicodeとZawgyiについて</span></h3>
<h4><span style="font-weight: 400;">Unicodeとは？</span></h4>
<p><span style="font-weight: 400;">コンピュータで使用する文字はUnicodeという国際規格で決められています。<br />
</span><span style="font-weight: 400;">平仮名であれば以下のように「あ」は「U3042」というようにコードが割り振られており、これに基づいて日本語のフォントも作成されています。</span></p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-16727" src="/uploads-archive/2020/11/スクリーンショット-2020-11-09-18.26.25-300x125.png" alt="" width="648" height="270" srcset="/uploads-archive/2020/11/スクリーンショット-2020-11-09-18.26.25-300x125.png 300w, /uploads-archive/2020/11/スクリーンショット-2020-11-09-18.26.25-228x95.png 228w, /uploads-archive/2020/11/スクリーンショット-2020-11-09-18.26.25.png 694w" sizes="(max-width: 648px) 100vw, 648px" /></p>
<p><span style="font-weight: 400;">明朝体で書いた文章をゴシック体にしても文字化けが起こる事がありません。<br />
</span><span style="font-weight: 400;">これはフォントがUnicodeに準拠しているおかげです。</span></p>
<p><span style="font-weight: 400;">・・・・が</span></p>
<p><span style="font-weight: 400;">Unicodeに準拠していない国が、そうミャンマーなのでした。</span></p>
<h4><span style="font-weight: 400;">従来の主流Zawgyi、国際化対応のUnicode</span></h4>
<p><span style="font-weight: 400;">ミャンマーの実情についてはこちらで詳しく書かれており参考にさせていただきました。<br />
</span><a href="https://enjoy-yangon.com/ja/enyanblog/351-change-myanmar-font-zawgyi-to-unicode" target="_blank" rel="noopener noreferrer"><span style="font-weight: 400;">https://enjoy-yangon.com/ja/enyanblog/351-change-myanmar-font-zawgyi-to-unicode</span></a><br />
<span style="font-weight: 400;"><br />
ミャンマーは歴史的、政治的な背景からコンピュータ技術の発展から取り残されUnicodeに準拠していないZawgyi(ゾージー)フォントが主流となっていましたが、昨年から国際化に対応しようと国が動き始めUnicodeの使用も徐々に広まっているようです。</span></p>
<p><span style="font-weight: 400;">ちなみに両者の見た目の違いはこんな感じ。<br />
</span><span style="font-weight: 400;">全然違います・・・</span></p>
<p><span style="font-weight: 400;">・Zawgyi<br />
</span><img decoding="async" loading="lazy" class="alignnone wp-image-16731" src="/uploads-archive/2020/11/スクリーンショット-2020-11-09-18.54.50-300x33.png" alt="" width="390" height="43" srcset="/uploads-archive/2020/11/スクリーンショット-2020-11-09-18.54.50-300x33.png 300w, /uploads-archive/2020/11/スクリーンショット-2020-11-09-18.54.50-228x25.png 228w, /uploads-archive/2020/11/スクリーンショット-2020-11-09-18.54.50.png 315w" sizes="(max-width: 390px) 100vw, 390px" /><br />
<span style="font-weight: 400;">・Unicode<br />
</span><img decoding="async" loading="lazy" class="alignnone wp-image-16732" src="/uploads-archive/2020/11/スクリーンショット-2020-11-09-18.55.01.png" alt="" width="387" height="43" srcset="/uploads-archive/2020/11/スクリーンショット-2020-11-09-18.55.01.png 297w, /uploads-archive/2020/11/スクリーンショット-2020-11-09-18.55.01-228x25.png 228w" sizes="(max-width: 387px) 100vw, 387px" /></p>
<p><span style="font-weight: 400;">ちなみに意味は「世界人権宣言」です<br />
</span></p>
<h3><span style="font-weight: 400;">文字化けの原因</span></h3>
<p><span style="font-weight: 400;">ここまで調べたところで文字化けの原因はZwagyiとUnicodeが混在する内容のPDFを出力したために、Unicode対応のフォントではZwagyiで書かれた箇所が文字化けし、Zwagyi対応のフォントではUnicodeで書かれた箇所が文字化けするのだろうと推測しました。</span></p>
<h3><span style="font-weight: 400;">Zwagyi&lt;=&gt;Unicode変換を行いフォントを統一する</span></h3>
<p><span style="font-weight: 400;">ミャンマー語がZwagyiかどうかを判定できるライブラリ「<a style="color: blue;" href="https://github.com/google/myanmar-tools" target="_blank" rel="noopener noreferrer">Myanmar-tools</a>」がGoogleから出ていました。</span></p>
<p><span style="font-weight: 400;">以下のように使用します。</span></p>

		<div id="crayon-64954036ec1a9764701083" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">PHP</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
$detector = new ZawgyiDetector();
$input1 = 'အျပည္ျပည္ဆိုင္ရာ လူ႔အခြင့္အေရး ေၾကညာစာတမ္း';
$score1 = $detector-&gt;getZawgyiProbability($input1);
// score is 1.0 (The input is definitely Zawgyi)

$input2 = 'ချယ်ရီ';
$score2 = $detector-&gt;getZawgyiProbability($input2);
// score is 0.0 (The input is definitely Unicode).</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64954036ec1a9764701083-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954036ec1a9764701083-2">2</div><div class="crayon-num" data-line="crayon-64954036ec1a9764701083-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954036ec1a9764701083-4">4</div><div class="crayon-num" data-line="crayon-64954036ec1a9764701083-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954036ec1a9764701083-6">6</div><div class="crayon-num" data-line="crayon-64954036ec1a9764701083-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954036ec1a9764701083-8">8</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64954036ec1a9764701083-1"><span class="crayon-v">$detector</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-e">ZawgyiDetector</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954036ec1a9764701083-2"><span class="crayon-v">$input1</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-s">'အျပည္ျပည္ဆိုင္ရာ လူ႔အခြင့္အေရး ေၾကညာစာတမ္း'</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64954036ec1a9764701083-3"><span class="crayon-v">$score1</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-v">$detector</span>-<span class="crayon-h">&gt;</span><span class="crayon-e">getZawgyiProbability</span><span class="crayon-sy">(</span><span class="crayon-v">$input1</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954036ec1a9764701083-4"><span class="crayon-c">// score is 1.0 (The input is definitely Zawgyi)</span></div><div class="crayon-line" id="crayon-64954036ec1a9764701083-5">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-64954036ec1a9764701083-6"><span class="crayon-v">$input2</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-s">'ချယ်ရီ'</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64954036ec1a9764701083-7"><span class="crayon-v">$score2</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-v">$detector</span>-<span class="crayon-h">&gt;</span><span class="crayon-e">getZawgyiProbability</span><span class="crayon-sy">(</span><span class="crayon-v">$input2</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954036ec1a9764701083-8"><span class="crayon-c">// score is 0.0 (The input is definitely Unicode).</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p><span style="font-weight: 400;">また、ZwagyiをUnicodeしてくれるライブラリ「<a style="color: blue;" href="https://github.com/Rabbit-Converter/Rabbit-PHP" target="_blank" rel="noopener noreferrer">Rabbit-converter</a>」も利用してUnicodeに統一してしまいます。<br />
</span></p>

		<div id="crayon-64954036ec1ad251167015" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">PHP</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
Rabbit::zg2uni("သီဟိုဠ္မွ ဉာဏ္ႀကီးရွင္သည္ အာယုဝဍ္ဎနေဆးၫႊန္းစာကို ဇလြန္ေဈးေဘးဗာဒံပင္ထက္ အဓိ႒ာန္လ်က္ ဂဃနဏဖတ္ခဲ့သည္။");

Rabbit::uni2zg("သီဟိုဠ်မှ ဉာဏ်ကြီးရှင်သည် အာယုဝဍ်ဎနဆေးညွှန်းစာကို ဇလွန်ဈေးဘေးဗာဒံပင်ထက် အဓိဋ္ဌာန်လျက် ဂဃနဏဖတ်ခဲ့</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64954036ec1ad251167015-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954036ec1ad251167015-2">2</div><div class="crayon-num" data-line="crayon-64954036ec1ad251167015-3">3</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64954036ec1ad251167015-1"><span class="crayon-e">Rabbit::</span><span class="crayon-e">zg2uni</span><span class="crayon-sy">(</span><span class="crayon-s">"သီဟိုဠ္မွ ဉာဏ္ႀကီးရွင္သည္ အာယုဝဍ္ဎနေဆးၫႊန္းစာကို ဇလြန္ေဈးေဘးဗာဒံပင္ထက္ အဓိ႒ာန္လ်က္ ဂဃနဏဖတ္ခဲ့သည္။"</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954036ec1ad251167015-2">&nbsp;</div><div class="crayon-line" id="crayon-64954036ec1ad251167015-3"><span class="crayon-e">Rabbit::</span><span class="crayon-i">uni2zg</span><span class="crayon-sy">(</span>"သီဟိုဠ်မှ<span class="crayon-h"> </span>ဉာဏ်ကြီးရှင်သည်<span class="crayon-h"> </span>အာယုဝဍ်ဎနဆေးညွှန်းစာကို<span class="crayon-h"> </span>ဇလွန်ဈေးဘေးဗာဒံပင်ထက်<span class="crayon-h"> </span>အဓိဋ္ဌာန်လျက်<span class="crayon-h"> </span>ဂဃနဏဖတ်ခဲ့</div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p><span style="font-weight: 400;">PHP7以上でないとComposer installできないのでご注意ください。</span></p>
<p><span style="font-weight: 400;">また、ライブラリではないですがテストに使用して便利だったWeb上の変換サービスがこちら。<br />
</span><a href="https://www.mcf.org.mm/myanmar-unicode-converter/" target="_blank" rel="noopener noreferrer"><span style="font-weight: 400;">https://www.mcf.org.mm/myanmar-unicode-converter/</span></a></p>
<p><span style="font-weight: 400;">以上を実行し、PDFに出力される文字をUnicodeに統一しUnicode版のミャンマー語フォントをサーバにインストールすると文字化けを解消することが出来ると考えています。<br />
検証結果は追って記入します!</span></p>
<h3>さいごに</h3>
<p><span style="font-weight: 400;">今までi18n対応と言っても英語くらいしかやってこなかった私としては、ミャンマー語の特殊性に驚きました。<br />
</span><span style="font-weight: 400;">日本もShift-JIS とUTF-8などで文字化けするのは似たような経緯を辿ったのかな〜などと考えながら、大変興味深いバグフィックスとなりました。</span></p>
<p><span style="font-weight: 400;">ちなみにブラウザの文字化け対応については弊社社長のブログが参考になりますよ！<br />
</span><a href="https://sterfield.co.jp/blog/global/%E3%80%90%E3%83%9F%E3%83%A3%E3%83%B3%E3%83%9E%E3%83%BC%E8%AA%9E%E3%80%91mac%E3%81%A7%E3%81%AE%E6%96%87%E5%AD%97%E5%8C%96%E8%A7%A3%E6%B6%88%E6%96%B9%E6%B3%95/"><span style="font-weight: 400;">https://sterfield.co.jp/blog/global/%E3%80%90%E3%83%9F%E3%83%A3%E3%83%B3%E3%83%9E%E3%83%BC%E8%AA%9E%E3%80%91mac%E3%81%A7%E3%81%AE%E6%96%87%E5%AD%97%E5%8C%96%E8%A7%A3%E6%B6%88%E6%96%B9%E6%B3%95/</span></a></p>
<p>&nbsp;</p>

ミャンマー語の文字化け問題~ZawgyiとUnicodeの2大フォントについて~

Reactの状態管理ライブラリー「Recoil」を触ってみました

<p>引用元：サーバレスの次は「ストレージレス」の実現へ。NetAppがストレージレスを実現する新サービス「Spot Storage」を発表(https://www.publickey1.jp/blog/20/netappspot_storage.html)</p>
<p>今までサーバレス（Serverless）といった言葉がありましたが、これらはサーバーの準備や管理や必要ないことを指し、実際にアプリケーションを実行する際にサーバーに引き当てたり、負荷に合わせてサーバーを増やしたり減らしたり、またサーバーが落ちてしまった時に復旧させたりするといった作業が自動化されて運用管理が必要なくなるものでした。</p>
<p>今回それらの考え方をストレージにも適用することによって同じように運用管理を不要とする「ストレージレス」（Storageless）をクラウド上で実現する新サービス「Spot Storage」をNetAppが発表しました。</p>
<p>Spot Storage (https://spot.io/products/spot-storage/)</p>
<h3>動的アプリケーション用の動的ストレージ</h3>
<p>要求されるストレージの性能と容量に応じて自動的に増減するようになることによって、予め必要な性能や容量を見積もり、引き当てたりする必要がなくなります。</p>
<p><img loading="lazy" class="aligncenter size-full wp-image-5656" src="/uploads-archive/lc/2020/11/8a03f6b62a82d57eabec6847c26a93b1.png" alt="" width="1172" height="550" srcset="/uploads-archive/lc/2020/11/8a03f6b62a82d57eabec6847c26a93b1.png 1172w, /uploads-archive/lc/2020/11/8a03f6b62a82d57eabec6847c26a93b1-300x141.png 300w, /uploads-archive/lc/2020/11/8a03f6b62a82d57eabec6847c26a93b1-1024x481.png 1024w, /uploads-archive/lc/2020/11/8a03f6b62a82d57eabec6847c26a93b1-768x360.png 768w, /uploads-archive/lc/2020/11/8a03f6b62a82d57eabec6847c26a93b1-600x282.png 600w" sizes="(max-width: 1172px) 100vw, 1172px" /></p>
<h3>自動化されたストレージ管理</h3>
<p>また、管理だけでなく常に必要最低限の性能と容量を持つストレージリソースが動的に割り当てられる仕組みのため、コストの面でクラウドプロバイダーのボリュームよりも約70％少ないストレージに最適化されると説明されています。<br />
高速なアクセスが必要な時にはSSD等が割り当てられ、逆にアクセスが低い場合などは必要最低限の性能のストレージに自動的に切り替わります。</p>
<p><img loading="lazy" class="aligncenter size-full wp-image-5657" src="/uploads-archive/lc/2020/11/f075b31952f7cfdf8584fe5fab5fdaf9.png" alt="" width="1219" height="590" srcset="/uploads-archive/lc/2020/11/f075b31952f7cfdf8584fe5fab5fdaf9.png 1219w, /uploads-archive/lc/2020/11/f075b31952f7cfdf8584fe5fab5fdaf9-300x145.png 300w, /uploads-archive/lc/2020/11/f075b31952f7cfdf8584fe5fab5fdaf9-1024x496.png 1024w, /uploads-archive/lc/2020/11/f075b31952f7cfdf8584fe5fab5fdaf9-768x372.png 768w, /uploads-archive/lc/2020/11/f075b31952f7cfdf8584fe5fab5fdaf9-600x290.png 600w" sizes="(max-width: 1219px) 100vw, 1219px" /></p>
<p>Spot StorageはAWS、Microsoft Azure、Google Cloud上でNetAppが提供するクラウドサービス「Spot」により提供される予定です。</p>
<p>今までのストレージという定義が少し変わっていくサービスとなっており、自動化やコスト削減といったメリットの部分が多く、より身近になっていってくれればいいなと感じました。</p>
<p>正式リリースはまだされていない為、今後情報等が追加された際には追って行けたらと思います。</p>


サーバレス、そして「ストレージレス」の時代へ

<p>近年コロナの影響によってテレワークを積極的に導入されている企業が増えています。<br />
よって今までの様に出社をして、会議室などで会議をやる機会が大幅に減り、その代わりオンライン会議(google MeetやZOOMなど)が目立つ様になってきました。</p>
<p>そんな中会議の内容を自動で検出するサービスが9/15に株式会社ユーザーローカル様から無償提供される事になりました。<br />
<a href="https://voice-dashboard.userlocal.jp/">https://voice-dashboard.userlocal.jp/</a></p>
<p>また、議事録作成を自動で生成させるだけでなく、テキストマイニング技術によって会話の流れを可視化させる事ができるというものです。</p>
<p>テキストマイニングとは通常の文章からなるデータを単語や文節で区切り、それらの出現の頻度や共出現の相関、出現傾向、時系列などを解析することで有用な情報を取り出す、テキストデータの分析方法である。(wikiより)</p>
<h3><strong>ユーザーローカル音声議事録サービスの特徴</strong></h3>
<p><img loading="lazy" class="size-full wp-image-5286 aligncenter" src="/uploads-archive/lc/2020/09/a5ed42f1b0e0cdeb64fadbfc416c9c6a.png" alt="" width="1702" height="858" srcset="/uploads-archive/lc/2020/09/a5ed42f1b0e0cdeb64fadbfc416c9c6a.png 1702w, /uploads-archive/lc/2020/09/a5ed42f1b0e0cdeb64fadbfc416c9c6a-300x151.png 300w, /uploads-archive/lc/2020/09/a5ed42f1b0e0cdeb64fadbfc416c9c6a-1024x516.png 1024w, /uploads-archive/lc/2020/09/a5ed42f1b0e0cdeb64fadbfc416c9c6a-768x387.png 768w, /uploads-archive/lc/2020/09/a5ed42f1b0e0cdeb64fadbfc416c9c6a-600x302.png 600w, /uploads-archive/lc/2020/09/a5ed42f1b0e0cdeb64fadbfc416c9c6a-1536x774.png 1536w" sizes="(max-width: 1702px) 100vw, 1702px" /></p>
<p>①会話を「名詞」「動詞」「形容詞」「感動詞」の４つを色別にピックアップして表示させる<br />
　→発言の回数の記録やどんな単語が出てきたのかが右のスペースを見る事によって簡単に視認する事ができます。</p>
<p>②ディープランニング技術によって感情やネガティブ・ポジティブかを時系列で判定が可能となっている<br />
　→感情に関しては「喜び」「好き」「悲しみ」「恐れ」「怒り」の５つに別れていてどの発言に対してどの様な感情が入っているのかを確認する事が出来ます。ネガポジに関しても同じ様に時系列的にどっちの割合が多いかを視認する事ができます。</p>
<p><img loading="lazy" class="size-full wp-image-5284 aligncenter" src="/uploads-archive/lc/2020/09/33b1b00dd98231ff46570860df3cdbf7.png" alt="" width="1693" height="800" srcset="/uploads-archive/lc/2020/09/33b1b00dd98231ff46570860df3cdbf7.png 1693w, /uploads-archive/lc/2020/09/33b1b00dd98231ff46570860df3cdbf7-300x142.png 300w, /uploads-archive/lc/2020/09/33b1b00dd98231ff46570860df3cdbf7-1024x484.png 1024w, /uploads-archive/lc/2020/09/33b1b00dd98231ff46570860df3cdbf7-768x363.png 768w, /uploads-archive/lc/2020/09/33b1b00dd98231ff46570860df3cdbf7-600x284.png 600w, /uploads-archive/lc/2020/09/33b1b00dd98231ff46570860df3cdbf7-1536x726.png 1536w" sizes="(max-width: 1693px) 100vw, 1693px" /></p>
<p>&nbsp;</p>
<p>個人分析と参加者全員の分析を行う事ができ、尚且つそれらをCSVデータとしてダウンロード可能となっています。実際に使用してみてマイクにもよりますが音声認識精度は比較的高いと思います。<br />
また、発言のテキストを後から編集することもできる為データ化するにはとても良いサービスと感じました。</p>
<p>&nbsp;</p>
<p>しかし、現在はまだgoogleChromeのブラウザ版のみの対応のためスマートフォンやタブレットからの参加は難しい様です。</p>
<p>今後アップデートなどで使用できる様になればより便利であると感じました。</p>
<p><img loading="lazy" class="size-full wp-image-5285 aligncenter" src="/uploads-archive/lc/2020/09/7b2c0a9062ec1f1dbdf473ed4fd74fc1.png" alt="" width="949" height="307" srcset="/uploads-archive/lc/2020/09/7b2c0a9062ec1f1dbdf473ed4fd74fc1.png 949w, /uploads-archive/lc/2020/09/7b2c0a9062ec1f1dbdf473ed4fd74fc1-300x97.png 300w, /uploads-archive/lc/2020/09/7b2c0a9062ec1f1dbdf473ed4fd74fc1-768x248.png 768w, /uploads-archive/lc/2020/09/7b2c0a9062ec1f1dbdf473ed4fd74fc1-600x194.png 600w" sizes="(max-width: 949px) 100vw, 949px" /></p>
<h4>参照</h4>
<p>
オンライン会議の自動議事録作成・可視化サービスを無償提供開始（<a href="https://www.userlocal.jp/press/20200915gv/">https://www.userlocal.jp/press/20200915gv/</a>）株式会社ユーザーローカル</p>


オンライン会議の自動議事録作成サービス無償提供が開始されました！

SymfonyのFormTypeを汎用化する

<p>ビジネスの集客手段としてブログメディアは今でも重要です。</p>
<p>ブログを管理する方法としてWordPressなどのCMSが使われることがよくあります。<br>従来のCMSではCMS側でHTMLの出力まで処理するものが多かったのですが、最近ではブラウザのパフォーマンスが高くなってきたことや、スマホの普及でネットワークの通信量をできるだけ抑えることで高速化を図る必要が出てきたもあり、よりサーバーの負担や通信量が少なくて済む Headless CMS というものが注目されています。</p>
<p>利用の多いWordPressもREST APIを利用することでHeadless CMSとして使うことができますが、より機能を絞り込むことで軽量化の進んだHeadless CMSが多く出てきています。</p>


<p>今回ご紹介するのはそういったHeadless CMSの一つのStrapiです。</p>
<p>Node.jsで動作するので、ローカル環境でも簡単に試すことができ、機能が絞り込まれているので超軽量です。</p>
<p>機能が絞り込まれているとはいえ、コンテンツタイプや様々な種類のフィールドを自由に追加・編集できるので、ブログ用のCMSとしては十分な機能を備えています。</p>
<h2>ローカルで試してみる</h2>
<p>※ Node.jsで動作しますので、PCにNode.jsがインストールされていない場合はインストールしてください。Node.jsのインストール方法は割愛します。</p>
<p>以下コマンドを実行して、プロジェクトを作成します。</p>


		<div id="crayon-64d1a7a2c0774741604530" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">ZSH</span></div></div>
			<div class="crayon-info" style="min-height: 18px !important; line-height: 18px !important;"></div>
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
npx create-strapi-app my-project --quickstart</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-64d1a7a2c0774741604530-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64d1a7a2c0774741604530-1"><span class="crayon-e">npx </span><span class="crayon-i">create</span>-<span class="crayon-i">strapi</span>-<span class="crayon-e">app </span><span class="crayon-i">my</span>-<span class="crayon-i">project</span><span class="crayon-h"> </span>--<span class="crayon-i">quickstart</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>


<p>これだけでStrapiのインストールは完了です。</p>
<p>http://localhost:1337/admin というアドレスが表示されると思いますので、アクセスすると、管理画面が表示されます。</p>



<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="733" src="/uploads-archive/lc/2020/10/localhost_1337_admin_-1024x733.png" alt="" class="wp-image-5407" srcset="/uploads-archive/lc/2020/10/localhost_1337_admin_-1024x733.png 1024w, /uploads-archive/lc/2020/10/localhost_1337_admin_-300x215.png 300w, /uploads-archive/lc/2020/10/localhost_1337_admin_-768x550.png 768w, /uploads-archive/lc/2020/10/localhost_1337_admin_-600x430.png 600w, /uploads-archive/lc/2020/10/localhost_1337_admin_.png 1200w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>最初の状態だと、WordPressの「投稿」に当たるものがないので、「Content-Types Builder 」から作成します。</p>



<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="691" src="/uploads-archive/lc/2020/10/localhost_1337_admin_-1_-1024x691.jpg" alt="" class="wp-image-5408" srcset="/uploads-archive/lc/2020/10/localhost_1337_admin_-1_-1024x691.jpg 1024w, /uploads-archive/lc/2020/10/localhost_1337_admin_-1_-300x203.jpg 300w, /uploads-archive/lc/2020/10/localhost_1337_admin_-1_-768x518.jpg 768w, /uploads-archive/lc/2020/10/localhost_1337_admin_-1_-600x405.jpg 600w, /uploads-archive/lc/2020/10/localhost_1337_admin_-1_.jpg 1200w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>コンテンツタイプ名を決定し、</p>



<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="691" src="/uploads-archive/lc/2020/10/localhost_1337_admin_plugins_content-type-builder_content-types_plugins__users-permissions.permission-1024x691.png" alt="" class="wp-image-5409" srcset="/uploads-archive/lc/2020/10/localhost_1337_admin_plugins_content-type-builder_content-types_plugins__users-permissions.permission-1024x691.png 1024w, /uploads-archive/lc/2020/10/localhost_1337_admin_plugins_content-type-builder_content-types_plugins__users-permissions.permission-300x203.png 300w, /uploads-archive/lc/2020/10/localhost_1337_admin_plugins_content-type-builder_content-types_plugins__users-permissions.permission-768x518.png 768w, /uploads-archive/lc/2020/10/localhost_1337_admin_plugins_content-type-builder_content-types_plugins__users-permissions.permission-600x405.png 600w, /uploads-archive/lc/2020/10/localhost_1337_admin_plugins_content-type-builder_content-types_plugins__users-permissions.permission.png 1200w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>ショートテキストによるタイトル、リッチテキストの詳細、メディアフィールドによるアイキャッチ画像といったいろいろなフィールドを自由に追加すれば、コンテンツタイプの完成です。</p>



<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="691" src="/uploads-archive/lc/2020/10/localhost_1337_admin_plugins_content-type-builder_content-types_plugins__users-permissions.permission-1-1024x691.png" alt="" class="wp-image-5410" srcset="/uploads-archive/lc/2020/10/localhost_1337_admin_plugins_content-type-builder_content-types_plugins__users-permissions.permission-1-1024x691.png 1024w, /uploads-archive/lc/2020/10/localhost_1337_admin_plugins_content-type-builder_content-types_plugins__users-permissions.permission-1-300x203.png 300w, /uploads-archive/lc/2020/10/localhost_1337_admin_plugins_content-type-builder_content-types_plugins__users-permissions.permission-1-768x518.png 768w, /uploads-archive/lc/2020/10/localhost_1337_admin_plugins_content-type-builder_content-types_plugins__users-permissions.permission-1-600x405.png 600w, /uploads-archive/lc/2020/10/localhost_1337_admin_plugins_content-type-builder_content-types_plugins__users-permissions.permission-1.png 1200w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>「Configure the view」から各フィールドを並び替えることもできます。</p>



<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="691" src="/uploads-archive/lc/2020/10/localhost_1337_admin_-1__-1024x691.jpg" alt="" class="wp-image-5412" srcset="/uploads-archive/lc/2020/10/localhost_1337_admin_-1__-1024x691.jpg 1024w, /uploads-archive/lc/2020/10/localhost_1337_admin_-1__-300x203.jpg 300w, /uploads-archive/lc/2020/10/localhost_1337_admin_-1__-768x518.jpg 768w, /uploads-archive/lc/2020/10/localhost_1337_admin_-1__-600x405.jpg 600w, /uploads-archive/lc/2020/10/localhost_1337_admin_-1__.jpg 1200w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="691" src="/uploads-archive/lc/2020/10/localhost_1337_admin_plugins_content-type-builder_content-types_plugins__users-permissions.permission-3-1024x691.png" alt="" class="wp-image-5413" srcset="/uploads-archive/lc/2020/10/localhost_1337_admin_plugins_content-type-builder_content-types_plugins__users-permissions.permission-3-1024x691.png 1024w, /uploads-archive/lc/2020/10/localhost_1337_admin_plugins_content-type-builder_content-types_plugins__users-permissions.permission-3-300x203.png 300w, /uploads-archive/lc/2020/10/localhost_1337_admin_plugins_content-type-builder_content-types_plugins__users-permissions.permission-3-768x518.png 768w, /uploads-archive/lc/2020/10/localhost_1337_admin_plugins_content-type-builder_content-types_plugins__users-permissions.permission-3-600x405.png 600w, /uploads-archive/lc/2020/10/localhost_1337_admin_plugins_content-type-builder_content-types_plugins__users-permissions.permission-3.png 1200w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>APIを利用する場合は、「設定」&gt;「ロールと権限」&gt;「Public」を選択し</p>



<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="691" src="/uploads-archive/lc/2020/10/localhost_1337_admin_-4_-1024x691.jpg" alt="" class="wp-image-5414" srcset="/uploads-archive/lc/2020/10/localhost_1337_admin_-4_-1024x691.jpg 1024w, /uploads-archive/lc/2020/10/localhost_1337_admin_-4_-300x203.jpg 300w, /uploads-archive/lc/2020/10/localhost_1337_admin_-4_-768x518.jpg 768w, /uploads-archive/lc/2020/10/localhost_1337_admin_-4_-600x405.jpg 600w, /uploads-archive/lc/2020/10/localhost_1337_admin_-4_.jpg 1200w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>作成したコンテンツタイプのAPIで利用する機能を選択することで、APIが利用できるようになります。</p>



<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="691" src="/uploads-archive/lc/2020/10/localhost_1337_admin_plugins_content-type-builder_content-types_plugins__users-permissions.permission-5_-1024x691.jpg" alt="" class="wp-image-5415" srcset="/uploads-archive/lc/2020/10/localhost_1337_admin_plugins_content-type-builder_content-types_plugins__users-permissions.permission-5_-1024x691.jpg 1024w, /uploads-archive/lc/2020/10/localhost_1337_admin_plugins_content-type-builder_content-types_plugins__users-permissions.permission-5_-300x203.jpg 300w, /uploads-archive/lc/2020/10/localhost_1337_admin_plugins_content-type-builder_content-types_plugins__users-permissions.permission-5_-768x518.jpg 768w, /uploads-archive/lc/2020/10/localhost_1337_admin_plugins_content-type-builder_content-types_plugins__users-permissions.permission-5_-600x405.jpg 600w, /uploads-archive/lc/2020/10/localhost_1337_admin_plugins_content-type-builder_content-types_plugins__users-permissions.permission-5_.jpg 1200w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>今回は取得だけなので「find」だけチェックを入れました。</p>
<p>これで、http://localhost:1337/posts を叩くことで、以下のようにJSONが出力されました。</p>



<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="691" src="/uploads-archive/lc/2020/10/localhost_1337_posts-1024x691.png" alt="" class="wp-image-5416" srcset="/uploads-archive/lc/2020/10/localhost_1337_posts-1024x691.png 1024w, /uploads-archive/lc/2020/10/localhost_1337_posts-300x203.png 300w, /uploads-archive/lc/2020/10/localhost_1337_posts-768x518.png 768w, /uploads-archive/lc/2020/10/localhost_1337_posts-600x405.png 600w, /uploads-archive/lc/2020/10/localhost_1337_posts.png 1200w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<h2>参考にさせていただいたサイト</h2>
<p><a class="link" href="https://www.hivelocity.co.jp/blog/45845/" target="_blank" rel="noopener noreferrer">超簡単にAPIが作れる？Headless CMS “strapi” を触ってみる | Hivelocity (ハイベロシティ) デジタルでビジネスを最適化</a></p>

Node.jsで動くCSMのStrapiを試してみました

<h3>はじめに</h3>
<p>現在、さまざまな通信において安全性や機密性を確保するために暗合化が行われています。</p>
<p>その中でも<span style="font-weight: 400;">ECDH（Elliptic-Curve Diffie–Hellman：楕円曲線ディフィー・ヘルマン鍵共有）は楕円曲線暗合のアルゴリズムの一つで、ポストRSA暗合として利用が広がっています。</span><span style="font-weight: 400;">身近なところだとBluetoothの機器同士の通信に用いられていたり、銀行におけるSSL/TLSサーバの暗号アルゴリズムとして採用されていたりします。</span></p>
<p><span style="font-weight: 400;">今回、ECDHをphpで実装しようとしたきっかけは、プッシュ通知をサードパーティのサービスを利用せずにphpで実装したいと考えたためです。<br /></span><span style="font-weight: 400;">プッシュ通知ではプッシュ通知送出元サーバーとServiceWorkerとの通信の暗号化にECDHが使われています。</span></p>
<h3>ざっくりな概念</h3>
<p><span style="font-weight: 400;">アリスとボブの２人が楕円曲線上で秘密鍵と公開鍵を生成し、お互いの公開鍵を交換したとする。<br /></span><span style="font-weight: 400;">その上で自身の秘密鍵と相手の公開鍵の積をとると、アリス・ボブの双方が同一の楕円曲線上のx座標を得るので、これを共有鍵として復号に利用する。</span></p>
<p><span style="font-weight: 400;">〜詳細：wikipedia〜<br /></span><em><span style="font-weight: 400;">アリスがボブとの間に共通鍵を構築したいが、2人の通信には第三者に盗聴される危険がある回線しかないものとする。まず、2人の間で使用する楕円曲線（つまり、有限体K、曲線を決定する3次式、ベースポイントG、その位数nなどのパラメータ）を決めておく。そして、両者はこの楕円曲線上で、秘密鍵のd （[1,n-1]からランダムに選んだ整数）と公開鍵のQ（Q=dG、つまり楕円曲線上での掛け算を行う）からなる鍵対を生成しておく。ここで、アリスの鍵対を(d</span><sub>A</sub><span style="font-weight: 400;">,Q</span><sub><span style="font-weight: 400;">A</span></sub><span style="font-weight: 400;">)、ボブのものを(d</span><sub><span style="font-weight: 400;">B</span></sub><span style="font-weight: 400;">,Q</span><sub><span style="font-weight: 400;">B</span></sub><span style="font-weight: 400;">)とする。それから、公開鍵を互いに交換する。</span></em></p>
<p><em><span style="font-weight: 400;">次に、アリスは(x</span><sub><span style="font-weight: 400;">k</span></sub><span style="font-weight: 400;">,y</span><sub><span style="font-weight: 400;">k</span></sub><span style="font-weight: 400;">)=d</span><sub><span style="font-weight: 400;">A</span></sub><span style="font-weight: 400;">Q</span><sub><span style="font-weight: 400;">B</span></sub><span style="font-weight: 400;">という計算を、ボブは(x</span><sub><span style="font-weight: 400;">k</span></sub><span style="font-weight: 400;">,y</span><sub><span style="font-weight: 400;">k</span></sub><span style="font-weight: 400;">)=d</span><sub><span style="font-weight: 400;">B</span></sub><span style="font-weight: 400;">Q</span><sub><span style="font-weight: 400;">A</span></sub><span style="font-weight: 400;">という計算を行う。</span></em></p>
<p><em><span style="font-weight: 400;">d</span><sub><span style="font-weight: 400;">A</span></sub><span style="font-weight: 400;">Q</span><sub><span style="font-weight: 400;">B </span></sub><span style="font-weight: 400;">= d</span><sub><span style="font-weight: 400;">A</span></sub><span style="font-weight: 400;">d</span><sub><span style="font-weight: 400;">B</span></sub><span style="font-weight: 400;">G = d</span><sub><span style="font-weight: 400;">B</span></sub><span style="font-weight: 400;">d</span><sub><span style="font-weight: 400;">A</span></sub><span style="font-weight: 400;">G = d</span><sub><span style="font-weight: 400;">B</span></sub><span style="font-weight: 400;">Q</span><sub><span style="font-weight: 400;">A</span></sub><span style="font-weight: 400;">であるので、アリスもボブも同じx</span><sub><span style="font-weight: 400;">k</span></sub><span style="font-weight: 400;">（楕円曲線上のx座標）を得ることができるので、これを共有する秘密とする。ECDHを元にしたほとんどの規格化プロトコルでは、この秘密を元に、ハッシュ関数などを利用して共通鍵を生成する。<br /></span></em><span style="font-weight: 400;">〜〜</span></p>
<p>&nbsp;</p>
<h3>PHPで実装できるか</h3>
<p><span style="font-weight: 400;">調べるとNode.jsではChromeの開発チームがライブラリを出しており、簡単にECDHを用いたプッシュ通知が実装できます。</span></p>
<p><span style="font-weight: 400;">ECDHが使われ始めたのは2000年代初頭。<br /></span><span style="font-weight: 400;">それに対しPHPは1990年代生まれの比較的古参のプログラミング言語なので、もしかしたらECDHのアルゴリズムを実現するライブラリは無いのかも&#8230;と感じ始めていましたが</span></p>
<p>ついに<strong><a style="color: blue;" href="https://github.com/phpecc/phpecc">phpecc</a></strong>という使えそうなライブラリを発見しました!!</p>
<p><span style="font-weight: 400;">Matyas DanterさんというVMwareのエンジニア様が開発したようです\(^^)/ この世にはすごい人がいるものです。<br /></span><span style="font-weight: 400;">これを用いると鍵交換から共有鍵を取得するところの実装が可能です。<br /></span></p>


		<div id="crayon-64954036ebd84052647254" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">PHP</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
$alicePriv = $pemPriv-&gt;parse(file_get_contents(__DIR__ . '/../tests/data/openssl-secp256r1.pem'));
$bobPub = $pemPub-&gt;parse(file_get_contents(__DIR__ . '/../tests/data/openssl-secp256r1.1.pub.pem'));

$exchange = $alicePriv-&gt;createExchange($bobPub);
$shared = $exchange-&gt;calculateSharedKey();
echo "Shared secret: " . gmp_strval($shared, 10).PHP_EOL;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64954036ebd84052647254-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954036ebd84052647254-2">2</div><div class="crayon-num" data-line="crayon-64954036ebd84052647254-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954036ebd84052647254-4">4</div><div class="crayon-num" data-line="crayon-64954036ebd84052647254-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954036ebd84052647254-6">6</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64954036ebd84052647254-1"><span class="crayon-v">$alicePriv</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-v">$pemPriv</span>-<span class="crayon-h">&gt;</span><span class="crayon-e">parse</span><span class="crayon-sy">(</span><span class="crayon-e">file_get_contents</span><span class="crayon-sy">(</span><span class="crayon-k ">__DIR__</span><span class="crayon-h"> </span><span class="crayon-sy">.</span><span class="crayon-h"> </span><span class="crayon-s">'/../tests/data/openssl-secp256r1.pem'</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954036ebd84052647254-2"><span class="crayon-v">$bobPub</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-v">$pemPub</span>-<span class="crayon-h">&gt;</span><span class="crayon-e">parse</span><span class="crayon-sy">(</span><span class="crayon-e">file_get_contents</span><span class="crayon-sy">(</span><span class="crayon-k ">__DIR__</span><span class="crayon-h"> </span><span class="crayon-sy">.</span><span class="crayon-h"> </span><span class="crayon-s">'/../tests/data/openssl-secp256r1.1.pub.pem'</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64954036ebd84052647254-3">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-64954036ebd84052647254-4"><span class="crayon-v">$exchange</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-v">$alicePriv</span>-<span class="crayon-h">&gt;</span><span class="crayon-e">createExchange</span><span class="crayon-sy">(</span><span class="crayon-v">$bobPub</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64954036ebd84052647254-5"><span class="crayon-v">$shared</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-v">$exchange</span>-<span class="crayon-h">&gt;</span><span class="crayon-e">calculateSharedKey</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954036ebd84052647254-6"><span class="crayon-k ">echo</span><span class="crayon-h"> </span><span class="crayon-s">"Shared secret: "</span><span class="crayon-h"> </span><span class="crayon-sy">.</span><span class="crayon-h"> </span><span class="crayon-e">gmp_strval</span><span class="crayon-sy">(</span><span class="crayon-v">$shared</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">10</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e ">PHP_EOL</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>


<p><span style="font-weight: 400;">これでPHPでもプッシュ通知の実装ができそうです。(firebaseを使え！とか言わないでくださいね^^;)</span></p>
<h3>所感</h3>
<p><span style="font-weight: 400;">PythonやGoなど新しいプログラミング言語が人気のなか、Web制作においてPHPが未だ広く使われているのは、このようなライブラリを作成してくれるPHPerの有志のおかげだな〜と実感しました。</span></p>

ECDH通信をPHPで実装する

<p>Flash MessageとはWebアプリにおいて、ユーザーが何らかの操作を行った際に<br>動作結果などをユーザーに知らせる為に表示される簡易的なメッセージ機能のことです。<br>Webサイトを日常的に利用される方であれば「編集が完了しました」、<br>「エラーが発生しました」などの表示を一度は見た事があるのではないでしょうか。<br><br>symfony2には標準でFlash Message機能が存在しています。<br>※Flash Message機能については以前、下記の記事内でも紹介しています。<br><a href="https://sterfield.co.jp/programmer/%E3%80%90symfony2-3%E3%80%91%E4%BB%95%E6%A7%98%E5%A4%89%E6%9B%B4%E3%81%AE%E3%81%BE%E3%81%A8%E3%82%81%E3%81%9D%E3%81%AE2/">【symfony2.3】仕様変更のまとめその2</a><br><br>今回はそんなFlash Message機能に関する落とし穴について記事を書きたいと思います。</p>
<h3>Flash Messageをセット(Controller)</h3>
<p>これで「system_error」というFlash Messageに「エラーが発生しました」という文言がセットされます。</p>


		<div id="crayon-64954036ebb59038615121" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
$this-&gt;get('session')-&gt;getFlashBag()-&gt;set("system_error", "エラーが発生しました");</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64954036ebb59038615121-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64954036ebb59038615121-1"><span class="crayon-sy">$</span><span class="crayon-r">this</span>-<span class="crayon-h">&gt;</span><span class="crayon-e">get</span><span class="crayon-sy">(</span><span class="crayon-s">'session'</span><span class="crayon-sy">)</span>-<span class="crayon-h">&gt;</span><span class="crayon-e">getFlashBag</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span>-<span class="crayon-h">&gt;</span><span class="crayon-e">set</span><span class="crayon-sy">(</span><span class="crayon-s">"system_error"</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">"エラーが発生しました"</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>


<h3>Flash Messageを取得(Template)</h3>
<p>これで「system_error」というFlash Messageがtwigで取得・表示できます。<br>※なお、セットした値が一つでも<span class="crayon-v">app</span><span class="crayon-sy">.</span><span class="crayon-v">session</span><span class="crayon-sy">.</span><span class="crayon-v">flashbag</span><span class="crayon-sy">.</span><span class="crayon-e">getの返り値は配列です。</span></p>


		<div id="crayon-64954036ebb5e094814972" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
{% for flashMessage in app.session.flashbag.get('system_error') %}
    {{ flashMessage }}
{% endfor %}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64954036ebb5e094814972-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954036ebb5e094814972-2">2</div><div class="crayon-num" data-line="crayon-64954036ebb5e094814972-3">3</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64954036ebb5e094814972-1"><span class="crayon-sy">{</span><span class="crayon-sy">%</span><span class="crayon-h"> </span><span class="crayon-st">for</span><span class="crayon-h"> </span><span class="crayon-e">flashMessage </span><span class="crayon-st">in</span><span class="crayon-h"> </span><span class="crayon-i">app</span><span class="crayon-sy">.</span><span class="crayon-i">session</span><span class="crayon-sy">.</span><span class="crayon-i">flashbag</span><span class="crayon-sy">.</span><span class="crayon-e">get</span><span class="crayon-sy">(</span><span class="crayon-s">'system_error'</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">%</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954036ebb5e094814972-2"><span class="crayon-h"> </span>  <span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-i">flashMessage</span><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-64954036ebb5e094814972-3"><span class="crayon-sy">{</span><span class="crayon-sy">%</span><span class="crayon-h"> </span><span class="crayon-st">endfor</span><span class="crayon-h"> </span><span class="crayon-sy">%</span><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>


<h3>思わぬ落とし穴</h3>
<p>ここまでの基本動作は明快で特につまづく個所はなかったかと思います。<br>しかし、ここに落とし穴が存在していました。<br>前項で説明したapp.session.flashbag.getを同一テンプレート内で二回以上、<br>行おうとすると、Flash Messageが返って来ず、空白の配列が返ってきてしまいます。</p>
<h3>解消方法</h3>
<p>原因はapp.session.flashbag.getの仕様にありました。<br>getメソッドでFlash Messageを取得するとその時点でそのFlash Messageは消滅してしまいます。<br>以下のようにpeekメソッドを使用する事で、複数回Flash Messageを取得できます。</p>


		<div id="crayon-64954036ebb5f444296695" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
{% for flashMessage in app.session.flashbag.peek('system_error') %}
   {{ flashMessage }}
{% endfor %}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64954036ebb5f444296695-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954036ebb5f444296695-2">2</div><div class="crayon-num" data-line="crayon-64954036ebb5f444296695-3">3</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64954036ebb5f444296695-1"><span class="crayon-sy">{</span><span class="crayon-sy">%</span><span class="crayon-h"> </span><span class="crayon-st">for</span><span class="crayon-h"> </span><span class="crayon-e">flashMessage </span><span class="crayon-st">in</span><span class="crayon-h"> </span><span class="crayon-i">app</span><span class="crayon-sy">.</span><span class="crayon-i">session</span><span class="crayon-sy">.</span><span class="crayon-i">flashbag</span><span class="crayon-sy">.</span><span class="crayon-e">peek</span><span class="crayon-sy">(</span><span class="crayon-s">'system_error'</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">%</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954036ebb5f444296695-2">  <span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-i">flashMessage</span><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-64954036ebb5f444296695-3"><span class="crayon-sy">{</span><span class="crayon-sy">%</span><span class="crayon-h"> </span><span class="crayon-st">endfor</span><span class="crayon-h"> </span><span class="crayon-sy">%</span><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>


<p>&nbsp;</p>

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - カテゴリー: 開発ナレッジ

2021/02/06

2021/02/06

2021/01/09

2021/01/08

2020/12/05

2020/12/04

2020/12/04

2020/11/13

2020/11/13

2020/11/13

2020/11/13

2020/10/03

2020/10/03

2020/10/02

2020/10/02

2020/10/02

2020/09/05

2020/09/05