<h1>要件定義とは</h1>
<p>作って欲しい人と作る人の間で「これを実現しましょう」という合意を定めることです。</p>
<p>要件を日常的な単語に置き換えると「注文（オーダー）」が妥当なものになり、</p>
<p><strong>作ってほしい人が　作る人に出す　依頼事項（リクエスト）</strong></p>
<p>ということになります。</p>
<h2>書籍　はじめよう！要件定義　〜ビギナーからベテランまで〜</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-17310" src="/uploads-archive/2021/11/youken-207x300.jpg" alt="はじめよう！要件定義" width="207" height="300" srcset="/uploads-archive/2021/11/youken-207x300.jpg 207w, /uploads-archive/2021/11/youken-708x1024.jpg 708w, /uploads-archive/2021/11/youken-768x1111.jpg 768w, /uploads-archive/2021/11/youken-1062x1536.jpg 1062w, /uploads-archive/2021/11/youken-228x330.jpg 228w, /uploads-archive/2021/11/youken.jpg 1092w" sizes="(max-width: 207px) 100vw, 207px" /><br />
<a href="https://www.amazon.co.jp/%E3%81%AF%E3%81%98%E3%82%81%E3%82%88%E3%81%86-%E8%A6%81%E4%BB%B6%E5%AE%9A%E7%BE%A9-%E3%83%93%E3%82%AE%E3%83%8A%E3%83%BC%E3%81%8B%E3%82%89%E3%83%99%E3%83%86%E3%83%A9%E3%83%B3%E3%81%BE%E3%81%A7-%E7%BE%BD%E7%94%9F-%E7%AB%A0%E6%B4%8B/dp/4774172286/ref=sr_1_1?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&amp;crid=2LBORBVITPUQU&amp;keywords=%E3%81%AF%E3%81%98%E3%82%81%E3%82%88%E3%81%86%E8%A6%81%E4%BB%B6%E5%AE%9A%E7%BE%A9&amp;qid=1636621831&amp;s=books&amp;sprefix=%E3%81%AF%E3%81%98%E3%82%81%E3%82%88%E3%81%86%2Cstripbooks%2C291&amp;sr=1-1" target="_blank" rel="noopener">はじめよう！要件定義</a></p>
<h2>この本を読もうと思ったのか</h2>
<p>エンジニアとしてコードをかいたり、技術的なところを磨くことは大事だが、お客様が満足できるサービスを提供するいい仕事や効率のよい仕事をしようと思ったときに、最初の要件定義のところをおざなりにするとお客様にも喜んでいただく仕事ができない、最初の要件があいまいだったばっかりにせっかくつくった機能をもう一度やり直し、自分に時間的な負担もかかり、お客様に迷惑がかかるなど誰にとってもいいことがない状況になり得るので、お互いのためにいい仕事ができるようにしっかりと要件定義をできるようにしたいと思ったので読みました。</p>
<h2>なぜ要件定義をするのか？</h2>
<p>世の中には「お任せ」というオーダーやリクエストもよく見かけます。ではなぜ要件が必要なのか。</p>
<p>たとえば「美味しいものを作って」と依頼したとします。その依頼に基づいてコックさんがコックさんなりに考えた結果、ニンジングラッセを作ったとします。でもリクエストした人がニンジンが苦手だった場合、そのニンジングラッセが本当においしかったとしても決して受け入れることができないでしょう。</p>
<p>もしあなたがコックさん側だとしたら「だったら先にニンジンはNGって言っといてよ」という気持ちになると思います。そうならないように、納めるために必要な条件を後出しにするのではなく、先に提示して合意した上でその仕事を行うことが大切で</p>
<p>言わなくても伝わる「はず」という仮説のもとにお互いに仕事を依頼したりされたりし、その結果生じる困り事を事前に回避するための知恵それが要件定義です。</p>
<h3>定義すべき要件の内訳</h3>
<p><strong>・UI</strong></p>
<p><strong>・機能</strong></p>
<p><strong>・データ</strong></p>
<h4>UI</h4>
<p>UIとはUser Interface(ユーザーインターフェイス)の略です。「ユーザーに接するもの」</p>
<p>代表例は画面（スクリーン）です。PCのみならずスマートデバイスの急速な普及によってUIといえば画面の話になることが大半です。UIとは基本的に画面系である前提に話を進めます。</p>
<h4>機能</h4>
<p>機能とは「ソフトウェアにやらせる仕事」の総称です。</p>
<p>たとえば、「消費税を計算する」などが機能になります。</p>
<h4>データ</h4>
<p>3つ目がデータです。先程の「消費税を計算する」という機能の場合計算結果の消費税はデータです。また計算の基となる「売上金額」もデータです。</p>
<p>&nbsp;</p>
<p>この3つの要素「UI」「機能」「データ」が明確に定まってそこで初めてプログラマーはソフトウェアを作ることができます。つまりこの3つの要素がソフトウェア開発における要件として必要な情報になります。</p>
<h3>ゴール＝完成したソフトウェアの状態とは</h3>
<p>「完成したソフトウェア」というゴールを達成するには</p>
<p><strong>そもそも何をもって完成したと納得できるのか</strong></p>
<p>ということを考える必要があります。作り手が側がいくら「ちゃんとできました」と言っても依頼主が</p>
<p>納得しない限りは完成したとは言えません。</p>
<p>依頼主はいったい何をどうすることで完成しているかどうかを確認することができるのか、それは、</p>
<p><strong>UIを通じてソフトウェアを操作すること</strong>によってです。</p>
<p>その上で<strong>操作に対してきちんと機能が動作すること</strong></p>
<p>さらに必要なデータが保持されていることつまり、<strong>機能が必要とするデータがきちんと揃っていること</strong></p>
<p>が大事になります。</p>
<h3>この本の内容をまとめると</h3>
<p>画面遷移図を描こうになります。それ以外は要件定義そのものではなくその前後の工程で行うべき作業だということです。つまり、要件定義は上流工程ではなく中流工程であると言えます。企画と実装の間のブリッジそれが要件定義です。他の工程と混ざっているところを丁寧に削ぎ取った結果、</p>
<p>（UI、機能、データ）になり、それらを図示化したものが画面遷移図になります。</p>
<p>(例）</p>
<p><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-17332" src="/uploads-archive/2021/11/スクリーンショット-2021-11-13-21.46.55-300x144.png" alt="" width="300" height="144" srcset="/uploads-archive/2021/11/スクリーンショット-2021-11-13-21.46.55-300x144.png 300w, /uploads-archive/2021/11/スクリーンショット-2021-11-13-21.46.55-1024x493.png 1024w, /uploads-archive/2021/11/スクリーンショット-2021-11-13-21.46.55-768x370.png 768w, /uploads-archive/2021/11/スクリーンショット-2021-11-13-21.46.55-228x110.png 228w, /uploads-archive/2021/11/スクリーンショット-2021-11-13-21.46.55.png 1520w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<h3>業務で活かせることができる点</h3>
<p>自分自身も入社前に自らのポートフォリオ作成を設計から経験し、アプリケーション詳細設計書、画面遷移図、テーブル定義書、ER図、ワイヤーフレームなど制作しましたが、</p>
<p>画面遷移図に関してはこのページにこのボタンがあって、押すとデータが作成され、別の画面に遷移する。作成が失敗すると元の画面でバリデーションメッセージを表示させるなど、遷移図を描こうとしたら一つ一つの機能をしっかりイメージでき、把握していないとできないと思いました。</p>
<p>画面遷移図はアプリケーション開発の実装中に、ここはどうだったかな？どれくらいの機能をつくる必要があるのか、期間はこれくらいかかるかななど、その都度自分が迷わないための道標的な役割を果たし、依頼者にご満足いただけるものを提供することにもつながるのかなと思いましたので、業務でも実践していきたいです。</p>


youken-768x1111.jpg

要件定義とは？を解決する。

51MgH8Jmr3L-3.jpg

わかりやすいコードを書くシンプルなテクニック

<h1>TCP/IPとは</h1>
<p>TCP／IPとは通信プロトコルの総称です。インターネットは別々に発達してきた様々な通信技術を組み合わせたものです。そのような組み合わせを実現するための応用力を持つ技術がTCP／IPです。</p>
<h3>プロトコルって何？なぜ必要？</h3>
<p>プロトコルとはコンピューターとコンピューターがネットワークを利用して通信するために決められた<strong>「約束ごと」</strong>になります。</p>
<p>メーカーやCPUやOSが違うコンピューター同士でも同じプロトコルを使えば互いに通信することができます。逆にいうとプロトコルを使用しなければ通信することはできません。</p>
<p>プロトコルにはいくつもの種類があり、それぞれ仕様が明確に決められていて、コンピューター同士が互いに通信するためには、両者が同じプロトコルを理解し、処理できなければなりません。</p>
<p>人間なら知能、応用力、理解力を持っているので、ある程度ルールから外れても意思疎通を図ることができますが、</p>
<p>コンピューターによる通信の場合は、コネクタの形状のような物理的なレベルからアプリケーションの種類のようなソフトウェアのレベルまで、様々な部分で明確な「<strong>約束ごと」</strong>を決めてそれを守るようにしなければ正しく通信することができません。</p>
<h2>マスタリングTCP/IP入門編</h2>
<p><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-17193" src="/uploads-archive/2021/10/スクリーンショット-2021-10-12-10.08.38-1-1-209x300.png" alt="" width="209" height="300" srcset="/uploads-archive/2021/10/スクリーンショット-2021-10-12-10.08.38-1-1-209x300.png 209w, /uploads-archive/2021/10/スクリーンショット-2021-10-12-10.08.38-1-1-228x328.png 228w, /uploads-archive/2021/10/スクリーンショット-2021-10-12-10.08.38-1-1.png 445w" sizes="(max-width: 209px) 100vw, 209px" /></p>
<p><a title="amazonマスタリングTCP/IP入門編" href="https://www.amazon.co.jp/%E3%83%9E%E3%82%B9%E3%82%BF%E3%83%AA%E3%83%B3%E3%82%B0TCP-IP%E2%80%95%E5%85%A5%E9%96%80%E7%B7%A8%E2%80%95-%E7%AC%AC6%E7%89%88-%E4%BA%95%E4%B8%8A-%E7%9B%B4%E4%B9%9F/dp/4274224473/ref=asc_df_4274224473/?tag=jpgo-22&amp;linkCode=df0&amp;hvadid=342397001181&amp;hvpos=&amp;hvnetw=g&amp;hvrand=18027228824331662531&amp;hvpone=&amp;hvptwo=&amp;hvqmt=&amp;hvdev=c&amp;hvdvcmdl=&amp;hvlocint=&amp;hvlocphy=1009255&amp;hvtargid=pla-847853186623&amp;psc=1&amp;th=1&amp;psc=1&amp;tag=&amp;ref=&amp;adgrpid=72867581430&amp;hvpone=&amp;hvptwo=&amp;hvadid=342397001181&amp;hvpos=&amp;hvnetw=g&amp;hvrand=18027228824331662531&amp;hvqmt=&amp;hvdev=c&amp;hvdvcmdl=&amp;hvlocint=&amp;hvlocphy=1009255&amp;hvtargid=pla-847853186623" target="_blank" rel="noopener">マスタリングTCP/IP入門編(書籍)</a></p>
<p>TCP/IPについてコンピューターとネットワーク登場の背景から、コンピューターとネットワークの発展の歴史とそれにまつわるTCP／IPについてOSI参照モデルの機能分類にTCP／IPの機能を当てはめる形で一つ一つ詳しく解説されています。</p>
<p>通信に必要な機能について多くの通信のプロトコルはOSI参照モデルの7層のどれかに当てはめて考えることができます。</p>
<p>詳細を知るには、個々のプロトコルの仕様書をその都度読む必要がありますが、おおよその役割はこの階層モデルのどの層に当たるかで見当をつけることができます。</p>
<h3>なぜこの本に興味をもったのか</h3>
<p>業務での通信エラーなどでプロトコルについて幅広く知識をつけておくことで原因を特定しやすくなるのではないかと思ったことと、ネットワークについて歴史的な発展とともに発達してきた技術について背景を知った方が今後の技術習得がスムーズになると思ったので読みました。</p>
<h2>OSI参照モデル7層の各層の役割</h2>
<h6>7.アプリケーション層</h6>
<p>アプリケーションの中で通信に関係する部分を定めていて、ファイル転送や電子メール、遠隔ログイン(仮想端末)などを実現するためのプロトコルがある。</p>
<h6>6.プレゼンテーション層</h6>
<p>機器固有のデータ表現形式（データーフォーマット）などをネットワーク共通のデータ形式に変換する役割がある。</p>
<h6>5.セッション層</h6>
<p>コネクション（データの流れる論理的な通信路）の確立や切断、転送するデータの切れ目の設定などデータ転送に関する管理を行います。</p>
<h6>4.トランスポート層</h6>
<p>宛先のアプリケーションにデータを確実に届ける役目がある。通信を行う両端のノードだけで処理され途中のルーターでは処理されません。</p>
<h6>3.ネットワーク層</h6>
<p>宛先までデータを届ける役割を持ちます。宛先は複数のネットワークがルーターにつながった先にある場合もあり、そのためのアドレス体系決めやどの経路を使うかなどの経路選択の役割を持ちます。</p>
<h6>2.データリンク層</h6>
<p>直接接続された機器間でのデータフレームの識別と転送。0と1の数字の列を意味のあるかたまり（フレーム）に分けて相手に伝えます。（フレームの生成と受信）</p>
<h6>1.物理層</h6>
<p>ビットの列（0と1の数字の列）を電圧の高低や光の点滅に変換したり、逆に電圧の高低や光の点滅をビットの列に変換したりします。</p>
<h3>TCP/IPのアプリケーション層</h3>
<p>TCP／IPのプロトコルは4層に分けて説明されますが、その中のアプリケーション層をOSI参照モデルに当てはめると、第5層、第6層、第7層のすべての機能が埋め込まれます。<br />
通信コネクションの管理などのセッション層の機能や、データフォーマットの変換というプレゼンテーション層の機能、相手ホストのとのやり取りというアプリケーション層の機能はすべてアプリケーションプログラムが担っています。</p>
<h3>学んだこと</h3>
<p>OSI参照モデルでの一つ一つの紹介はここでは長くなるので割愛しますが、業務でSSLの更新などに携わることがあり、工程としてアプリケーション層での遠隔ログインと呼ばれるSSH接続をします。</p>
<p>以前には遠隔ログインシステムにはTELNETというものもあり、TELNETではログイン時でのパスワードが暗号化されずに送信されるので、通信を盗聴されると不正侵入される危険性があり、SSHという通信内容が暗号化される遠隔ログインシステムが登場し普及したなど、当時はTELNETというシステムが一般的だったのが、システムの脆弱性から新しい技術が発展し、今SSHが普及しているなど、今の技術に至るまでの歴史的な背景や仕組みなどが図になって説明されていたのですごく理解が深まりました。</p>
<h4>業務で活かせることができる点</h4>
<p>今、安心安全とされている技術であっても数年後には脆弱性が見つかり使われなくなったりするので、（SSHにはバージョン1とバージョン2が存在しバージョン1には脆弱性があり、バージョン2の利用が推奨されているなど）エンジニアとして常に新しい技術に対してキャッチアップしていきながら、今使用している技術に対して満足することなく問題がないかを確認し、問題がある場合は日々更新、改善していく意識を忘れずにもつことが大事だなと改めて感じました。</p>


スクリーンショット-2021-10-12-10.08.38-1-1.png

よく聞くけど知らない？TCP/IPについて

<h3><strong><span style="font-size: 18pt">WebAPIとは</span></strong></h3>
<p style="text-align: left">Web APIとは、コンピュータプログラムの提供する機能を外部の別のプログラムから</p>
<p style="text-align: left">呼び出して利用するための手順・規約（API：Application Programming Interface）</p>
<p style="text-align: left">の類型の一つで、HTTPなどWebの技術を用いて構築されたもの。ざっくり簡単に言うとオ</p>
<p style="text-align: left">ンライン上でアプリケーションを利用する、というものでデータが欲しい！！等のリクエスト</p>
<p style="text-align: left">を送ったりするとデータがjsonやxml形式で返ってきます。これをAPIを叩くと言います。</p>
<p>&nbsp;</p>
<h3>気象庁公式の天気予報API</h3>
<p>以下のURLにブラウザで直接アクセスすれば、JSONデータを確認できます。</p>
<p>・東京都の天気予報の概要を取得する<br />
<a href="https://www.jma.go.jp/bosai/forecast/data/overview_forecast/130000.json">https://www.jma.go.jp/bosai/forecast/data/overview_forecast/130000.json</a></p>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-17121" src="/uploads-archive/2021/09/スクリーンショット-2021-09-03-5.36.38.png" alt="" width="1194" height="564" srcset="/uploads-archive/2021/09/スクリーンショット-2021-09-03-5.36.38.png 1194w, /uploads-archive/2021/09/スクリーンショット-2021-09-03-5.36.38-300x142.png 300w, /uploads-archive/2021/09/スクリーンショット-2021-09-03-5.36.38-768x363.png 768w, /uploads-archive/2021/09/スクリーンショット-2021-09-03-5.36.38-1024x484.png 1024w, /uploads-archive/2021/09/スクリーンショット-2021-09-03-5.36.38-228x108.png 228w" sizes="(max-width: 1194px) 100vw, 1194px" /></p>
<p>JSONなので人間には少し読みにくいですが、読みやすくする方法はあります。</p>
<p>デコードしたjsonのデータにprint_r()を使えば分かりやすく表示してくれます。</p>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-17123" src="/uploads-archive/2021/09/スクリーンショット-2021-09-03-4.54.00.png" alt="" width="536" height="764" srcset="/uploads-archive/2021/09/スクリーンショット-2021-09-03-4.54.00.png 536w, /uploads-archive/2021/09/スクリーンショット-2021-09-03-4.54.00-210x300.png 210w, /uploads-archive/2021/09/スクリーンショット-2021-09-03-4.54.00-228x325.png 228w" sizes="(max-width: 536px) 100vw, 536px" /></p>
<p>以下が実際もソースコード です。</p>

		<div id="crayon-64954036ed578600716298" 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;">
&lt;?php
$url = "https://www.jma.go.jp/bosai/forecast/data/forecast/130000.json";

$json = file_get_contents($url);
$data = json_decode($json,true);

$publisher = $data[0]['publishingOffice'];
$publish_time = $data[0]['reportDatetime'];
$area = $data[0]['timeSeries'][0]['areas'][0]['area']['name'];
$today = $data[0]['timeSeries'][0]['areas'][0]['weathers'][0];
$tomorrow = $data[0]['timeSeries'][0]['areas'][0]['weathers'][1];
$dayAfterTomorrow = $data[0]['timeSeries'][0]['areas'][0]['weathers'][2];

echo '発表者　：　'.$publisher.'&lt;/br&gt;';
echo '報告日時　：　'.$publish_time.'&lt;/br&gt;';
echo '対象地域　：　'.$area.'&lt;/br&gt;';
echo '今日の天気　：　'.$today.'&lt;/br&gt;';
echo '明日の天気　：　'.$tomorrow.'&lt;/br&gt;';
echo '明後日の天気　：　'.$dayAfterTomorrow.'&lt;/br&gt;';
?&gt;</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-64954036ed578600716298-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954036ed578600716298-2">2</div><div class="crayon-num" data-line="crayon-64954036ed578600716298-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954036ed578600716298-4">4</div><div class="crayon-num" data-line="crayon-64954036ed578600716298-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954036ed578600716298-6">6</div><div class="crayon-num" data-line="crayon-64954036ed578600716298-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954036ed578600716298-8">8</div><div class="crayon-num" data-line="crayon-64954036ed578600716298-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954036ed578600716298-10">10</div><div class="crayon-num" data-line="crayon-64954036ed578600716298-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954036ed578600716298-12">12</div><div class="crayon-num" data-line="crayon-64954036ed578600716298-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954036ed578600716298-14">14</div><div class="crayon-num" data-line="crayon-64954036ed578600716298-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954036ed578600716298-16">16</div><div class="crayon-num" data-line="crayon-64954036ed578600716298-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954036ed578600716298-18">18</div><div class="crayon-num" data-line="crayon-64954036ed578600716298-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954036ed578600716298-20">20</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-64954036ed578600716298-1">&lt;?php</div><div class="crayon-line crayon-striped-line" id="crayon-64954036ed578600716298-2">$url = "https://www.jma.go.jp/bosai/forecast/data/forecast/130000.json";</div><div class="crayon-line" id="crayon-64954036ed578600716298-3">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-64954036ed578600716298-4">$json = file_get_contents($url);</div><div class="crayon-line" id="crayon-64954036ed578600716298-5">$data = json_decode($json,true);</div><div class="crayon-line crayon-striped-line" id="crayon-64954036ed578600716298-6">&nbsp;</div><div class="crayon-line" id="crayon-64954036ed578600716298-7">$publisher = $data[0]['publishingOffice'];</div><div class="crayon-line crayon-striped-line" id="crayon-64954036ed578600716298-8">$publish_time = $data[0]['reportDatetime'];</div><div class="crayon-line" id="crayon-64954036ed578600716298-9">$area = $data[0]['timeSeries'][0]['areas'][0]['area']['name'];</div><div class="crayon-line crayon-striped-line" id="crayon-64954036ed578600716298-10">$today = $data[0]['timeSeries'][0]['areas'][0]['weathers'][0];</div><div class="crayon-line" id="crayon-64954036ed578600716298-11">$tomorrow = $data[0]['timeSeries'][0]['areas'][0]['weathers'][1];</div><div class="crayon-line crayon-striped-line" id="crayon-64954036ed578600716298-12">$dayAfterTomorrow = $data[0]['timeSeries'][0]['areas'][0]['weathers'][2];</div><div class="crayon-line" id="crayon-64954036ed578600716298-13">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-64954036ed578600716298-14">echo '発表者　：　'.$publisher.'&lt;/br&gt;';</div><div class="crayon-line" id="crayon-64954036ed578600716298-15">echo '報告日時　：　'.$publish_time.'&lt;/br&gt;';</div><div class="crayon-line crayon-striped-line" id="crayon-64954036ed578600716298-16">echo '対象地域　：　'.$area.'&lt;/br&gt;';</div><div class="crayon-line" id="crayon-64954036ed578600716298-17">echo '今日の天気　：　'.$today.'&lt;/br&gt;';</div><div class="crayon-line crayon-striped-line" id="crayon-64954036ed578600716298-18">echo '明日の天気　：　'.$tomorrow.'&lt;/br&gt;';</div><div class="crayon-line" id="crayon-64954036ed578600716298-19">echo '明後日の天気　：　'.$dayAfterTomorrow.'&lt;/br&gt;';</div><div class="crayon-line crayon-striped-line" id="crayon-64954036ed578600716298-20">?&gt;</div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p><img decoding="async" loading="lazy" class="size-full wp-image-17129 aligncenter" src="/uploads-archive/2021/09/スクリーンショット-2021-09-03-4.56.20.png" alt="" width="390" height="196" srcset="/uploads-archive/2021/09/スクリーンショット-2021-09-03-4.56.20.png 390w, /uploads-archive/2021/09/スクリーンショット-2021-09-03-4.56.20-300x151.png 300w, /uploads-archive/2021/09/スクリーンショット-2021-09-03-4.56.20-228x115.png 228w" sizes="(max-width: 390px) 100vw, 390px" /></p>
<p>このAPIに使い方がすごく簡単なので、よかったら試してみてください。</p>

スクリーンショット-2021-09-03-5.36.38-1024x484.png

気象庁公式の天気予報APIを使ってみた

<p><strong>単体テストとは</strong></p>
<p>単体テスト（たんたいテスト）あるいはユニットテスト（英語: <span lang="en">unit test</span>）とは、ソースコードの個々のユニット、すなわち、1つ以上のコンピュータプログラムモジュールが使用に適しているかどうかを決定するために、関連する制御データ、使用手順、操作手順とともにテストする手法です。</p>
<p><strong>Junitとは</strong></p>
<p><b>JUnit</b>とはJavaで開発されたプログラムにおいてユニットテスト（単体テスト）の自動化を行うためのフレームワークです。</p>
<p><strong>単体テストの書き方</strong></p>
<p>１．まずpom.xmlフアィルに追加</p>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-17063" src="/uploads-archive/2021/08/スクリーンショット-2021-08-06-16.16.27.png" alt="" width="344" height="129" srcset="/uploads-archive/2021/08/スクリーンショット-2021-08-06-16.16.27.png 344w, /uploads-archive/2021/08/スクリーンショット-2021-08-06-16.16.27-300x113.png 300w, /uploads-archive/2021/08/スクリーンショット-2021-08-06-16.16.27-228x86.png 228w" sizes="(max-width: 344px) 100vw, 344px" /></p>
<div class="hljs-ln-code">
<p>２．例</p>
<p>Junitの入門例として、subarray足し算で最も大きな結果を計算する。</p>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-17064" src="/uploads-archive/2021/08/スクリーンショット-2021-08-06-16.18.53.png" alt="" width="442" height="496" srcset="/uploads-archive/2021/08/スクリーンショット-2021-08-06-16.18.53.png 442w, /uploads-archive/2021/08/スクリーンショット-2021-08-06-16.18.53-267x300.png 267w, /uploads-archive/2021/08/スクリーンショット-2021-08-06-16.18.53-228x256.png 228w" sizes="(max-width: 442px) 100vw, 442px" /></p>
<p>３．テストコードを追加</p>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-17065" src="/uploads-archive/2021/08/スクリーンショット-2021-08-06-16.24.58.png" alt="" width="537" height="764" srcset="/uploads-archive/2021/08/スクリーンショット-2021-08-06-16.24.58.png 537w, /uploads-archive/2021/08/スクリーンショット-2021-08-06-16.24.58-211x300.png 211w, /uploads-archive/2021/08/スクリーンショット-2021-08-06-16.24.58-228x324.png 228w" sizes="(max-width: 537px) 100vw, 537px" /></p>
<p>３．テストをrunする</p>
</div>
<p>関数右のアイコンをクッリクし、runまたはdebug testを選択できます。</p>
<div class="hljs-ln-code">
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-17066" src="/uploads-archive/2021/08/スクリーンショット-2021-08-06-16.26.26.png" alt="" width="1034" height="684" srcset="/uploads-archive/2021/08/スクリーンショット-2021-08-06-16.26.26.png 1034w, /uploads-archive/2021/08/スクリーンショット-2021-08-06-16.26.26-300x198.png 300w, /uploads-archive/2021/08/スクリーンショット-2021-08-06-16.26.26-768x508.png 768w, /uploads-archive/2021/08/スクリーンショット-2021-08-06-16.26.26-1024x677.png 1024w, /uploads-archive/2021/08/スクリーンショット-2021-08-06-16.26.26-228x151.png 228w" sizes="(max-width: 1034px) 100vw, 1034px" /></p>
<p>テストの結果はいくつのパータンがあります。</p>
<p>Errors:0,Failure:0、テストが成功しました。</p>
<p>フィリアがあった場合、コードの結果は自分のニーズを満たさないです。</p>
<p>エラーがあった場合、システもの配置は問題があります。</p>
<p><strong>終わりに</strong></p>
<p>やり方を覚えてしまえば簡単にテストできると思います。</p>
<p>実際の仕事中でも非常に使いやすいです。</p>
<p>&nbsp;</p>
</div>


単体テスト例

Twigの便利なフィルター

スクリーンショット-2021-05-14-2.14.46-1.png

Laravel で簡単なwish list機能を追加してみた

<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>

otoshiana-768x768.png

【symfony2】Flash Messageの落とし穴

Doctrine で クエリを構造化する


<h2>はじめに</h2>
<p>個人的な話で恐縮なのですが、私は仕事において余裕が無くなってくると必要以上にパニックに陥ってしまう<br>ことが多く、その「パニック」でミスが発生、そのミスを解消するためにまたパニックになり&#8230;という<br>負の循環に入り、結果として仕事が遅延してしまうことがあります。</p>
<p>今回はそういった「パニック」による不都合を解消するための方法を調査し、自分なりにまとめてみます。<br>同じような傾向でお悩みの方はご参考ください。以下本記事の引用元とさせていただいた記事です。<br><span style="color: #0000ff"><a style="color: #0000ff" href="https://mbp-japan.com/jijico/articles/27714/">仕事でパニックに！ミスで頭が真っ白になった際に落ち着く方法は？| [心理カウンセラー]による解説記事</a></span></p>
<h3>パニックになりやすい人の特徴</h3>
<blockquote>
<p>パニックに陥ってしまう人の特徴としては「完璧主義過ぎる」「自己肯定感が低い」「マイナス思考」「二極思考」などが考えられます。</p>
<p>「失敗＝悪いこと」「失敗する人＝ダメな人間」というような思い込みで自分を責めたり、また失敗するのではないかという不安や恐怖で萎縮して動けなくなったりします。否定的な気持ちに心が支配され、消極的になってしまうのです。</p>
</blockquote>
<p>確かに当てはまる自覚があります。こうやって並べてみると消極的な思考というのはそれぞれが<br>独立しているわけではなく互いが密接に結び付きあっている感覚があります。<br>『マイナス思考』かつ『完璧主義』だから、オールオアナッシングな『二極思考』に陥り、<br>「できないマインド」に頭が支配される。その結果としてできない自分に対する<br>『自己肯定感の低下』に繋がっていく、といった関係性が成り立つのではないでしょうか。</p>
<h3>自分の考え方のクセを変える</h3>
<blockquote>
<p>そもそも人はミスをする生き物です。また、仕事にミスやトラブルは付きものです。これらに対応する方法はありますし、挽回する余地はいくらでもあります。一度や二度のミスでクビになったり、人生が終わったりするわけではありません。日頃からそんな風に考えるクセを身につければ、心の重しが少し軽くなるかもしれません。</p>
</blockquote>
<p>自分自身に当てはめてみても、少しでも状況が悪くなってくると、<br>「もう無理だ」「巻き返せない」といったネガティブな考え方が頭のなかに充満してきます。</p>
<p>ミスやトラブルは減らすことはできても必ず発生するものと割り切り、<br>むしろミスやトラブルが起きた時こそ適切に挽回したり乗り越えたりすることで、<br>周囲からの信頼が生まれる、という考え方の切り替えが必要かもしれません。</p>
<blockquote>
<p>想定しうるミスやトラブルは起こる前から「こんな場合にはどう対処したらよいか」「こんな時は誰に相談するのが一番良いか」「信頼できる上司や仲間は誰か」など、もしもの時のシミュレーションをして、問題に対処できるという自信を付けておくことも大事です。</p>
</blockquote>
<p>パニックで結果を急ぐあまり、必要なシミュレーションをすっ飛ばして仕事に着手し、<br>いざミスやトラブルに直面すると、焦った状態でイチから対処方法を練り始める為、<br>余計な時間が掛かり挽回が難しくなります。まさに「急がば回れ」ということですね。</p>
<h3>落ち着く方法とは</h3>
<blockquote>
<p>目をつぶり大きく深呼吸して、冷静に今の自分と現実を確認しましょう。周囲を見渡して、今いる自分の場所を確認したり、自分の身体を触って現実とコンタクトしたりしてみましょう。よく、「これは夢じゃないよね？」と身体をつねったりするのと同じです。パニックになってしまった時は、現実を確認し気持ちを落ち着かせることが大切です。日頃から、このような習慣を身につけておくことをおすすめします。</p>
</blockquote>
<p>深呼吸そのものの効能も大事なのでしょうが、『パニック→深呼吸』というルーティンを<br>予め決めて心に刻んでおくことで平常心を取り戻す、という側面が大きいのかもしれません。</p>
<blockquote>
<p>少しずつ冷静さを取り戻すことができたら、今の状況を整理して、自分は何ができるのか、何をしたらよいかを考えましょう。助けが必要な時は一人で抱え込まず、素直に周囲にサポートを求めて頼ることも必要です。</p>
</blockquote>
<p>パニックに陥った場合、往々にして視野が狭くなり、打つべき対策を見誤ります。<br>一旦意識的に物事を俯瞰で見る癖をつけて、周囲に適切なヘルプを求めることが重要でしょう。</p>


sick_panic_man.png

パニックにならない仕事術

【symfony2】FormTypeのtips

<h2>はじめに</h2>
<p>仕事などで大きな問題に直面した際、みなさんはどのように解決への道筋を立てるでしょうか？</p>
<ol>
<li>精神論重視、気合と根性でなんとかしようする</li>
<li>口ばかり達者、具体的な行動を起こさない</li>
<li>「自分にはどうせ出来ない」と早々に諦めてしまう</li>
</ol>
<p>問題の難易度が高ければ高いほど、よく考えずに上記のようなあまり褒められないアプローチを取ってしまい、<br />
問題の本質を見誤り、解決に辿り着くことができない、といった事態が発生することがあります。<br />
※私自身も頭でっかちになり、2つ目や3つ目の状態に陥ってしまうことが多いです。</p>
<p><a href="https://www.amazon.co.jp/dp/4478000492/?tag=aqajp-22" target="_blank"><img decoding="async" src="https://m.media-amazon.com/images/I/51NPGdh+p4L._SL200_.jpg" alt="4478000492" border="0" /></a><br />
<a href="https://www.amazon.co.jp/dp/4478000492/?tag=aqajp-22" target="_blank">世界一やさしい問題解決の授業―自分で考え、行動する力が身につく</a></p>
<p>今回はそのような不本意な状況に陥ることを防ぐために読んだ本、<br />
「世界一やさしい問題解決の授業―自分で考え、行動する力が身につく」を紹介します。<br />
著者は<a href="https://whatisyourdelta.com/" target="_blank" rel="noopener">デルタスタジオ代表取締役社長 渡辺健介さん</a>です。</p>
<h2>問題解決までのアプローチ</h2>
<p>この本では問題解決までに取るべき有効なアプローチの方法が紹介されています。<br />
その中から代表的な「分解の木」をご紹介します。</p>
<h3>分解の木</h3>
<p>いわゆるロジック・ツリーの考え方です。<br />
例えば「数学のテストの成績が良くなかった。」という問題があるとします。<br />
この問題を解決する場合、よく考えずに「今までの倍の時間を掛けて数学の勉強を頑張る。」といった<br />
闇雲なアプローチを取ると、問題の本質を理解しないまま突き進むことになり、遠回りで非効率です。<br />
まずは問題を細分化することで、自分にとっての課題を炙り出すことが重要です。</p>
<ul>
<li>時間が足りず解き始めることができなかったのか、解いてみたけど解けなかったのか</li>
<li>方程式の問題が分からなかったのか、図形の問題が分からなかったのか、その両方か</li>
<li>公式を忘れたのか、公式が理解できていないのか、公式の応用力がないのか</li>
<li>問題を解くスピードが遅かったのか、スピードは問題ないがミスが多かったのか</li>
</ul>
<p>といったようにまず「数学のテストの成績が良くなかった。」という大きな問題を小さく分解します。<br />
更にその分解した問題を分解&#8230;という過程を繰り返すことで、自分にとっての課題が浮かび上がります。<br />
当然、課題一つ一つによって取るべきアプローチは異なってきますので、徐々に打つべき手が見えてきます。</p>
<p>医師が患者を診断して治療の方法を考えるように、まずは原因を見極めて仮設を立てる、<br />
次に適切な情報を集めた上で分析、最後に最も有効な打つべき手を考えてから計画的に実行する、<br />
というプロセスを踏むことで、スムーズな問題解決を実現することができます。<br />
打つべき手が複数出てきた場合は、それぞれのメリット・デメリットを一旦図表化してから、<br />
天秤にかけてみて、最も効率的で有効と思われるものに取捨選択をするようにしましょう。</p>
<h2>まとめ・所感</h2>
<p>主に中高生に向けて書かれた書籍ですが、問題解決に関する本質的なアプローチが多数盛り込まれており、<br />
大人(主にビジネスパーソン)の方々からの評価が高いのも納得の一冊でした。<br />
働き方改革により業務効率化が叫ばれる昨今、今回紹介した「分解の木」を始めとした<br />
問題解決への効率的なアプローチは、より重要視されるようになってくるのではないでしょうか。</p>


hirameki_man-1.png

【書評】世界一やさしい問題解決の授業

<h2>「座りすぎは寿命を縮める」</h2>
<p>近年、1時間座り続けることで寿命が最大22分縮まるとオーストラリアの研究機関により発表されました。</p>
<p>座っているのが4時間未満の人に比べ、<span style="text-decoration: underline">8~11時間の人は15%</span>、<span style="text-decoration: underline">11時間以上の人は40%</span>も死亡リスクが増すというものです。</p>
<table style="width: 672px;height: 92px">
<tbody>
<tr style="height: 23px">
<td style="width: 293.295px;height: 23px"></td>
<td style="width: 363.295px;height: 23px">平日の座っている時間*</td>
</tr>
<tr style="height: 23px">
<td style="width: 293.295px;height: 23px">日本</td>
<td style="width: 363.295px;height: 23px">7時間</td>
</tr>
<tr style="height: 23px">
<td style="width: 293.295px;height: 23px">アメリカ・中国</td>
<td style="width: 363.295px;height: 23px">4.2時間</td>
</tr>
<tr style="height: 23px">
<td style="width: 293.295px;height: 23px">先進国20国の平均</td>
<td style="width: 363.295px;height: 23px"> 5時間</td>
</tr>
</tbody>
</table>
<p>*座っている時間には勤務時間、通勤電車に座っている時間、テレビを見ている時間などが含まれている。</p>
<p>先進国の中でも、日本jinの座っている時間がかなり長い。</p>
<h3>長寿大国日本？？</h3>
<p>現在、平均寿命ランキングは世界1位の日本ですが、</p>
<p>勤勉すぎる、座りすぎているとその他の先進国から言われています。</p>
<p>10年後、果たして平均寿命ランキング1位のままなのでしょうか。</p>
<p>&nbsp;</p>
<h4>その他の寿命を下げる例</h4>
<h3>タバコ</h3>
<p>タバコ１本吸うことで、5~14分寿命が縮まると言われています。</p>
<h3>アルコール</h3>
<p>１週間に5~10杯*のアルコール飲料を飲むことで、余命が最大6ヶ月、</p>
<p>18杯以上飲むと、最大5年寿命が縮まると言われています。</p>
<p>*アルコール度数：5%、量：350ml</p>
<h3>座る　&gt;　タバコ　&gt;　お酒　？？</h3>
<p>つまり、タバコを1時間に1本吸うとした時のリスクはこの通りです。</p>
<p>座る：1時間で22分</p>
<p>タバコ：1本で5~14分</p>
<h3>なぜ、座ることがリスクなのか。</h3>
<p>理由はシンプルです。</p>
<p>人体の<span style="text-decoration: underline">７割の筋肉を占める<strong>足の筋肉が衰えるから</strong></span>です。</p>
<p>足の筋肉が衰えることで、<strong>血流が滞り、基礎代謝が低下</strong>します。</p>
<p>座りすぎでエコノミー症候群の症状が出る人もいるようです。</p>
<p>長い目で見ると、糖尿病などの<strong>基礎疾患のリスクが上昇</strong>します。</p>
<p>また、平日の運動不足を土日の運動でカバーするのは難しいと言われています。毎日の運動のみ効果的です。</p>
<p>おすすめなのは、<strong>毎日20分早歩きでウォーキング</strong>することです。</p>
<h3>基礎代謝を上げるには</h3>
<ul>
<li><strong>水分をたくさん摂取する</strong></li>
</ul>
<p>毎日体から失う水は、平均して<span style="text-decoration: underline">2300ミリリットル</span>、</p>
<p>食事から摂れる水分量は<span style="text-decoration: underline">600ミリリットル</span>、</p>
<p>食べ物を体内で分解する時に作られる水が1日<span style="text-decoration: underline">200ミリリットル</span>と言われています。</p>
<p>2300 &#8211; (600 + 200) = 1500ml</p>
<p>つまり、<span style="text-decoration: underline"><strong>1日1.5L</strong></span>は水分を摂取しなければ基礎代謝が下がっていきます。</p>
<ul>
<li><strong>体を温める</strong></li>
</ul>
<p>具体的には、以下を行うことで体を温めます。</p>
<p>・体を動かすこと(運動、ストレッチ)</p>
<p>・よく噛んで食べること</p>
<p>・湯船に浸かる</p>
<p>その他、ユニークな健康法を紹介いたします。</p>
<blockquote class="wp-embedded-content" data-secret="X1QOiRszcy"><p><a href="https://daigoblog.jp/morning-routine/">【初公開】DaiGoのモーニングルーティン</a></p></blockquote>
<p><iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="position: absolute; clip: rect(1px, 1px, 1px, 1px);" src="https://daigoblog.jp/morning-routine/embed/#?secret=X1QOiRszcy" data-secret="X1QOiRszcy" width="500" height="282" title="&#8220;【初公開】DaiGoのモーニングルーティン&#8221; &#8212; Mentalist DaiGo Official Blog" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe></p>
<blockquote class="wp-embedded-content" data-secret="ezUoRNocJE"><p><a href="https://daigoblog.jp/30seconds-immunity/">毎日30秒で免疫力を高める方法【自宅でできる】</a></p></blockquote>
<p><iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="position: absolute; clip: rect(1px, 1px, 1px, 1px);" src="https://daigoblog.jp/30seconds-immunity/embed/#?secret=ezUoRNocJE" data-secret="ezUoRNocJE" width="500" height="282" title="&#8220;毎日30秒で免疫力を高める方法【自宅でできる】&#8221; &#8212; Mentalist DaiGo Official Blog" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe></p>
<h3>まとめ</h3>
<p>結論としては、健康なくして幸せはありません。<strong>軽い運動を毎日しましょう！</strong></p>
<p>タバコ、お酒はメンタルケア程度に！</p>
<p>&nbsp;</p>
<p>引用元：</p>
<blockquote class="wp-embedded-content" data-secret="gRkB9qdcLw"><p><a href="https://www.biteki.com/life-style/wellness/404027">1時間座りっぱなしで22分余命が縮む！？ マンガで読む「座りすぎ」のリスク</a></p></blockquote>
<p><iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="position: absolute; clip: rect(1px, 1px, 1px, 1px);" src="https://www.biteki.com/life-style/wellness/404027/embed#?secret=gRkB9qdcLw" data-secret="gRkB9qdcLw" width="500" height="282" title="埋め込まれた WordPress の投稿" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe></p>


日本人は座りすぎ？ ~テレワークの先に~

<p>弊社の開発チームでは、<a href="https://www.zoho.com/projects/">Zoho Projects</a>を用いて、工数管理を行っています。<br />
分単位での工数入力やタスク進捗率のパーセンテージ管理を<br />
行うことで、かなり正確な工数が記録できています。<br />
今回は実際に徹底した工数管理を行ってみて感じたメリットを3つご紹介します。</p>
<h2>徹底した工数管理で得られる3つのメリット</h2>
<h3>1.各メンバーの稼働状況や着手タスクが手に取るように分かる</h3>
<p>当たり前すぎる気もしますが、最も大きいメリットではないでしょうか。<br />
誰がどのタスクにどれだけの工数を掛けているかが、一目瞭然になります。<br />
例えば「3時間で終えられるタスクに2日掛かってしまっている。」<br />
「先月末までに終えるべきタスクが放置されている。」といった事態が<br />
見過ごされてしまうことは、まず無くなると思っていただいて良いでしょう。</p>
<h3>2.チームのメンバー間に助け合い精神が生まれる</h3>
<p>大きなミスや遅延が発生した場合、当日あるいは翌営業日には<br />
他のメンバーにもその事態の詳細が共有されることになります。<br />
自分の犯したミスや遅延がメンバーに周知徹底されてしまうのは恥ずかしい面もありますが、<br />
裏を返せば他のメンバーがピンチに陥ったときに即座にヘルプできるという利点もあります。<br />
そもそもキャパオーバーだったのではないか、どうすればミスを防げるかといった、<br />
次に繋げることのできる建設的な議論に発展させることも可能です。</p>
<h3>3.開発メンバーの「利益」に関する考え方が変わる</h3>
<p>営業系や販売系といったお客様と直接お金をやり取りするシーンの多い職種とは異なり、<br />
開発系の職種はどうしても「利益」に対する考え方が若干希薄になる傾向があるように思います。<br />
工数管理の結果を他のチームや会社の経営陣と共有し更に議論を重ねることで<br />
「自分たちが開発に掛けた工数がどれだけ会社全体の利益に結びついてるか。」という、<br />
第三者の客観的な視点が入った、信頼性の高い成果指標を獲得することができます。<br />
利益に結びついていない業務を圧縮しよう、という作業の効率化にも繋がるでしょう。</p>
<h3>所感</h3>
<p>工数管理は導入が少々面倒な面もありますが、得られるメリットはかなり大きいと感じました。<br />
チーム開発で様々な問題点を抱えている企業様は、是非検討されてみてはいかがでしょうか。</p>


徹底した工数管理で得られる3つのメリット

<p>現在初めてPHPフレームワークの<a href="https://laravel.com/">Laravel</a>を用いた開発を行っています。<br />
今回の開発で何度か引っかかった箇所の一つにフォームのバリデーションがあります。<br />
この記事では2つ以上の項目を関連付けたバリデーションに関して説明していきます。</p>
<h3>2つ以上の項目を関連付けたバリデーションとは</h3>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-16054" src="/uploads-archive/2020/03/tel-300x26.png" alt="" width="508" height="44" srcset="/uploads-archive/2020/03/tel-300x26.png 300w, /uploads-archive/2020/03/tel-768x68.png 768w, /uploads-archive/2020/03/tel-228x20.png 228w, /uploads-archive/2020/03/tel.png 886w" sizes="(max-width: 508px) 100vw, 508px" /><br />
例えば電話番号を記入する項目を作成する場合、上記のように<br />
<strong>3つの入力項目に分ける</strong>、というシチュエーションがよくあるかと思います。<br />
この場合、電話番号そのものが必須項目であれば、3つ全てにrequired(必須)を適用してやれば終了です。<br />
しかし、電話番号そのものが必須項目でない場合は少し厄介なことになります。</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-16058" src="/uploads-archive/2020/03/not_good-1-300x30.png" alt="" width="510" height="51" srcset="/uploads-archive/2020/03/not_good-1-300x30.png 300w, /uploads-archive/2020/03/not_good-1-768x78.png 768w, /uploads-archive/2020/03/not_good-1-228x23.png 228w, /uploads-archive/2020/03/not_good-1.png 888w" sizes="(max-width: 510px) 100vw, 510px" /><br />
というのも、3つ全ての項目で空欄を許可してしまうと、上記画像のような不完全な電話番号を<br />
許容してしまうことになるからです。ここで表題通り、2つ以上の項目の関連付けが必要になります。<br />
今回でいうと<strong>電話番号そのものは必須の値ではないが、3つの項目のうち1つでも入力が有った場合は、<br />
残る2つの項目の入力も義務付ける必要が出てくる</strong>、ということになりますね。</p>
<h3>解決方法</h3>
<p>電話番号の入力項目のフィールドがそれぞれtel_1、tel_2、tel_3だった場合のバリデーション記法は、</p>

		<div id="crayon-64954026532d1981402560" 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;">
'tel_1'  =&gt; 'nullable|required_unless:tel_2,""|required_unless:tel_3,""',
'tel_2'  =&gt; 'nullable|required_unless:tel_1,""|required_unless:tel_3,""',
'tel_3'  =&gt; 'nullable|required_unless:tel_1,""|required_unless:tel_2,""',</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-64954026532d1981402560-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954026532d1981402560-2">2</div><div class="crayon-num" data-line="crayon-64954026532d1981402560-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-64954026532d1981402560-1"><span class="crayon-s">'tel_1'</span><span class="crayon-h">&nbsp;&nbsp;</span>=<span class="crayon-h">&gt;</span><span class="crayon-h"> </span><span class="crayon-s">'nullable|required_unless:tel_2,""|required_unless:tel_3,""'</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954026532d1981402560-2"><span class="crayon-s">'tel_2'</span><span class="crayon-h">&nbsp;&nbsp;</span>=<span class="crayon-h">&gt;</span><span class="crayon-h"> </span><span class="crayon-s">'nullable|required_unless:tel_1,""|required_unless:tel_3,""'</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-64954026532d1981402560-3"><span class="crayon-s">'tel_3'</span><span class="crayon-h">&nbsp;&nbsp;</span>=<span class="crayon-h">&gt;</span><span class="crayon-h"> </span><span class="crayon-s">'nullable|required_unless:tel_1,""|required_unless:tel_2,""'</span><span class="crayon-sy">,</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>となります。以下、解説を行っていきます。</p>
<p>まず<strong>nullable</strong>で文字通り<strong>空欄(null)を許可</strong>しています。重要なのは、その次の<strong>required_unless</strong>です。<br />
<strong>required_unless</strong>とは、<strong>もし他の値が〇〇でなければ必須</strong>、という意味のバリデーションコードです。<br />
直後のカンマ区切りの後の&#8221;&#8221;の箇所でその〇〇の値を渡してやることで機能します。<br />
今回のtel_1のバリデーションは、まず最初に<strong>空欄を許可</strong>、<br />
その後で<strong>「tel_2」が「&#8221;&#8221;」、すなわち空欄でなければ必須</strong>、<br />
<strong>「tel_3」が「&#8221;&#8221;」、すなわち空欄でなければ必須.</strong>..<br />
というように<strong>お互いの項目の関連付け</strong>を行っているという意味になります。</p>
<p>これを3つの各項目に記述することで、<strong>3つの項目のうち1つでも入力が有った場合は、<br />
残る2つの項目の入力も義務付ける、</strong>というバリデーションを実現することができます。</p>

Laravelのバリデーションで2つ以上の項目を関連付ける

<p>弊社では開発チームのタスク管理に<a href="https://www.zoho.com/jp/projects/">「Zoho Projects」</a>というプロジェクト管理ツールを採用しています。<br />
<a href="https://www.zoho.com/jp/projects/">「Zoho Projects」</a>は各メンバの持ちタスクの優先度や期限の設定、<br />
タスクをマイルストーン、タスクリストなどの粒度ごとで切り分けての工数管理、<br />
ガントチャートでタスクの進捗率やアサイン状況が図式化&#8230;といった多種多様で<br />
複雑なプロジェクト管理を比較的簡単な操作で行うことができるのが特徴です。</p>
<p>通常、<a href="https://www.zoho.com/jp/projects/">「Zoho Projects」</a>におけるタスク作成はブラウザ上の専用管理画面から手作業で行います。<br />
今回はZohoが提供している「Zoho API」を使用し、タスク作成作業の自動化を行ってみます。<br />
※Zohoアカウントの作成手順は今回省略します。<br />
※<a href="https://www.zoho.com/projects/help/rest-api/zohoprojectsapi.html">「Zoho API」公式ドキュメント(英語)</a>も併せてご覧ください。</p>
<h3>1.Zohoアカウントに「クライアントID」とクライアントシークレットを作成する</h3>
<p>「Zoho API」の使用には「クライアントID」とクライアントシークレットの2つの値が必要です。<br />
これら2つの値はアカウントを作成しただけでは、自動生成されませんので手作業で作成します。</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-16001" src="/uploads-archive/2020/02/api_ninshou-300x141.png" alt="" width="600" height="282" srcset="/uploads-archive/2020/02/api_ninshou-300x141.png 300w, /uploads-archive/2020/02/api_ninshou-228x107.png 228w, /uploads-archive/2020/02/api_ninshou.png 517w" sizes="(max-width: 600px) 100vw, 600px" /><br />
<a href="https://accounts.zoho.com/developerconsole">https://accounts.zoho.com/developerconsole</a><br />
上記のページにアクセスし、「クライアントIDの追加」をクリックします。</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-16002" src="/uploads-archive/2020/02/api_ninshou2-300x273.png" alt="" width="600" height="546" srcset="/uploads-archive/2020/02/api_ninshou2-300x273.png 300w, /uploads-archive/2020/02/api_ninshou2-228x207.png 228w, /uploads-archive/2020/02/api_ninshou2.png 633w" sizes="(max-width: 600px) 100vw, 600px" /><br />
クライアント名、クライアントのドメイン、認証済みのリダイレクトURI、Client Typeを求められます。<br />
クライアント名は任意の名称、クライアントのドメインは自社サイトのURL、<br />
認証済みのリダイレクトURIは自社サイト内の任意のページのURLなどで構いません。<br />
Client Typeに関しては初期値の「Web Based」で特に問題ないかと思います。<br />
「作成する」を押すことでクライアントIDとクライアントシークレットの作成が完了します。<br />
<img decoding="async" loading="lazy" class="alignnone wp-image-16007" src="/uploads-archive/2020/02/api_ninshou3X-300x249.png" alt="" width="601" height="499" srcset="/uploads-archive/2020/02/api_ninshou3X-300x249.png 300w, /uploads-archive/2020/02/api_ninshou3X-228x189.png 228w, /uploads-archive/2020/02/api_ninshou3X.png 627w" sizes="(max-width: 601px) 100vw, 601px" /><br />
完了画面にクライアントIDとクライアントシークレットが表示されますので、どこかにコピーしておきます。</p>
<h3>2.認証リクエスト作業を行う</h3>
<p>次に指定のURLから認証リクエストを行い、Zoho Apiへのアクセスを承認させます。</p>
<p><code>https://accounts.zoho.com/oauth/v2/auth?scope={スコープ}&amp;client_id={クライアントID}&amp;response_type=code&amp;access_type={offlineまたはonline}&amp;redirect_uri={認証済みのリダイレクトURI}&amp;prompt=consent<br />
</code><br />
上記の指定のURLへのアクセスには各種設定値の挿入が必要になります。<br />
前項で使用した「クライアントID」、「認証済みのリダイレクトURI」の2つに加え、<br />
「scope」「access_type」の2つが必要で、計4つの設定値の挿入が必要です。<br />
「scope」はAPIアクセス時の公開を与える範囲の設定です。</p>
<p><a href="https://www.zoho.com/projects/help/rest-api/tasks-api.html">https://www.zoho.com/projects/help/rest-api/tasks-api.html</a><br />
上記のページ内で英語にて説明がありますが、該当プロジェクトの全てのタスクを読む場合は<br />
「ZohoProjects.tasks.READ」という記述でAPIアクセス時の公開範囲を指定します。</p>
<p>今回はタスクの作成を行いたいので、「ZohoProjects.tasks.CREATE」と記述しましょう。<br />
「access_type」に関しては「offline」に設定しておけば、特に問題はありません。<br />
前述のURLの{スコープ}、{クライアントID}、{offlineまたはonline}、{認証済みのリダイレクトURI}、<br />
計4カ所の値を書き換えた上でブラウザからアクセスを行います。</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-16010" src="/uploads-archive/2020/02/api_shounin4-300x277.png" alt="" width="601" height="554" srcset="/uploads-archive/2020/02/api_shounin4-300x277.png 300w, /uploads-archive/2020/02/api_shounin4-228x211.png 228w" sizes="(max-width: 601px) 100vw, 601px" /><br />
設定値に問題がなければ、承認ページが表示されます。<br />
このまま先に進んでしまわずに、ここで一旦作業をとめてください。</p>
<h3>3.POSTを行なって、アクセストークンの発行</h3>
<p>「Zoho API」を使用するのに必要なアクセストークンを発行します。<br />
(※この時点までに<a href="https://www.postman.com/">「Postman」</a>などPOST・GETツールのご用意をおすすめします。)<br />
今回は<a href="https://www.postman.com/">「Postman」</a>を用いてPOSTを行い、アクセストークンを発行します。</p>
<p><code>https://accounts.zoho.com/oauth/v2/token?code={グラントトークン}&amp;redirect_uri={認証済みのリダイレクトURI}&amp;client_id={クライアントID}&amp;client_secret={クライアントシークレット}&amp;grant_type=authorization_code<br />
</code><br />
前項で行なったのと同じように「クライアントID」、「認証済みのリダイレクトURI」、<br />
「クライアントシークレット」の値をこれまでの過程で使用した取得値に置き換えます。<br />
「グラントトークン」に関してはこれからの作業で取得した値を使用します。</p>
<p>「Postman」を起動しておき、前項の最後の工程で一旦とめてもらった作業を再開します。<br />
承認ページ上で「承認する」をクリックしてみると、認証済みのリダイレクトURIにリダイレクトされます。</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-16011" src="/uploads-archive/2020/02/api_ninshou-1-300x39.png" alt="" width="600" height="78" srcset="/uploads-archive/2020/02/api_ninshou-1-300x39.png 300w, /uploads-archive/2020/02/api_ninshou-1-228x30.png 228w, /uploads-archive/2020/02/api_ninshou-1.png 614w" sizes="(max-width: 600px) 100vw, 600px" /><br />
ブラウザのURL入力欄を見ると通常のURLではなく、色々な値が付与されているかと思います。<br />
このURLのうち、code=●●●●●&amp;location= の●●●●●にあたる値が「グラントトークン」です。<br />
この「グラントトークン」は生成後2分間を越えると使用できなくなります。注意してください。<br />
前述のURLの「グラントトークン」を差し替えた上でPostmanでPOSTを行います。</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-16012" src="/uploads-archive/2020/02/api_ninshou6-300x179.png" alt="" width="601" height="358" srcset="/uploads-archive/2020/02/api_ninshou6-300x179.png 300w, /uploads-archive/2020/02/api_ninshou6-768x458.png 768w, /uploads-archive/2020/02/api_ninshou6-1024x611.png 1024w, /uploads-archive/2020/02/api_ninshou6-228x136.png 228w, /uploads-archive/2020/02/api_ninshou6.png 1085w" sizes="(max-width: 601px) 100vw, 601px" /><br />
返ってきた値の中にアクセストークンやリフレッシュトークンが含まれています。<br />
※このアクセストークンも1時間の使用期限付きです。</p>
<h3>4.API経由でZohoのタスクを作成</h3>
<p>それでは前項で取得したアクセストークンを使ってZoho Projects上でタスクを作成してみます。<br />
今回は<a href="https://www.postman.com/">「Postman」</a>上のPOST作業でタスクを作成してみます。<br />
<img decoding="async" loading="lazy" class="alignnone wp-image-16013" src="/uploads-archive/2020/02/post1-300x102.png" alt="" width="600" height="204" srcset="/uploads-archive/2020/02/post1-300x102.png 300w, /uploads-archive/2020/02/post1-768x261.png 768w, /uploads-archive/2020/02/post1-228x78.png 228w, /uploads-archive/2020/02/post1.png 987w" sizes="(max-width: 600px) 100vw, 600px" /><br />
HeadersでkeyをAuthorization、Valueに前項で取得したtoken_typeとaccess_tokenを入力します。<br />
token_typeとaccess_tokenに関しては「token_type(半角スペース)access_token」という形になります。</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-16014" src="/uploads-archive/2020/02/post2-300x204.png" alt="" width="601" height="409" srcset="/uploads-archive/2020/02/post2-300x204.png 300w, /uploads-archive/2020/02/post2-768x521.png 768w, /uploads-archive/2020/02/post2-228x155.png 228w, /uploads-archive/2020/02/post2.png 990w" sizes="(max-width: 601px) 100vw, 601px" /><br />
続いてParamsに必須項目を入力していきます。<br />
タスク作成に必須なのは名前だけなので、Key:name、Value:testと入力します。<br />
そしてSendを押して送信を行います。成功すればレスポンスが返ってくるはずです。</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-16015" src="/uploads-archive/2020/02/zoho_test-300x172.png" alt="" width="600" height="344" srcset="/uploads-archive/2020/02/zoho_test-300x172.png 300w, /uploads-archive/2020/02/zoho_test-768x440.png 768w, /uploads-archive/2020/02/zoho_test-228x131.png 228w, /uploads-archive/2020/02/zoho_test.png 917w" sizes="(max-width: 600px) 100vw, 600px" /><br />
<a href="https://www.zoho.com/jp/projects/">「Zoho Projects」</a>の管理画面を確認すると、「test」という名称でタスクが生成されています。</p>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - タグ: #プログラマー

2021/11/18

2021/11/05

2021/10/21

2021/09/03

2021/08/07

2021/07/02

2021/05/14

2020/10/02

2020/10/02

2020/09/05

2020/09/04

2020/08/07

2020/05/13

2020/05/13

2020/04/15

2020/03/11

2020/02/13

2020/01/15