[CSS]flexboxを使ったフレキシブルレイアウト

<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><H2>RPAについて</H2><br />
<H3>RPAとはRobotic Process Automationの略</H3><br />
<H4>事務作業を担うホワイトワーカーがPCなどを用いて行っている一連の作業を自動化できる「ソフトウェアロボット」のこと。簡単にいうとPC作業の自動化のこと。</H4></p>
<p><H3>RPAといっても何を指すかは様々</H3><br />
海外のメジャーな製品でいうとUiPathというツールだったり、国産だとWinActorというツールがある。VBAをRPAということもある。</p>
<p><H3>RPAの長所と短所</H3><br />
<H4>【長所】<br />
・導入するにあたりシステム改修する必要がない<br />
・一度学習させてしまえば正確に作業を実施できる<br />
・人間に比べ、作業スピードが圧倒的に速い<br />
・ヒューマンエラーがない<br />
・24時間365日、休まず働き続けることができる</H4><br />
<H4>【短所】<br />
・アクシデントや例外処理に弱い。遭遇した際には、作業が止まる<br />
・あらかじめ命令されたことしかできない（判断できない）<br />
・複雑なことを実施させるためには、タスク分解された多工程の命令を与えなければならない</H4><br />
<H3>最後に自動化(管理システムからエクセルファイルへのコピー)の例</H3><br />
<iframe loading="lazy" width="500" height="281" src="https://www.youtube.com/embed/_XDEijqCDx0?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></p>


<h3>はじめに</h3>
<div style="padding-left: 15px;">
  以下では<strong>LaunchCart</strong>を例として<br />
  <strong>WebApplication</strong>が動くまでの準備、周辺の環境構築から更新管理に対する新たな方向性について触れます</div>
<h3>ブラウザで見られるために必要なもの</h3>
<div style="padding-left: 15px;">
  <strong>LaunchCart</strong>をインストールするということは<br />
  そのサーバーにブラウザでアクセスしサイトが表示されるということです。</p>
<p>  この中で最低限役割を果たすファクタとして</p>
<h4>HTML, JavaScript, CSS, 画像など</h4>
<p>ブラウザにコンテンツを表示、見やすくレイアウトする</p>
<h4><strong>PHP</strong>などのプログラム言語</h4>
<p>  ユーザーの情報や操作によって<br />
  更なる動的な処理をしたり操作をする</p>
<h4><strong>nginx</strong>などウェブサーバー</h4>
<p>  ブラウザからのアクセスに対してコンテンツを表示するミドルウェア</p>
<h4><strong>php-fpm</strong>など<strong>CGI</strong></h4>
<p>  プログラムとウェブサーバーを繋ぐ中間的な役割を果たすモジュール群</p>
<p>  ウェブサーバーとアプリケーションの繋がりは以下のようになっています。<br />
<a href="/uploads-archive/2020/02/Untitled-Diagram.png"><img decoding="async" loading="lazy" src="/uploads-archive/2020/02/Untitled-Diagram-300x227.png" alt="" width="300" height="227" class="alignnone size-medium wp-image-15992" srcset="/uploads-archive/2020/02/Untitled-Diagram-300x227.png 300w, /uploads-archive/2020/02/Untitled-Diagram-768x581.png 768w, /uploads-archive/2020/02/Untitled-Diagram-228x172.png 228w, /uploads-archive/2020/02/Untitled-Diagram.png 902w" sizes="(max-width: 300px) 100vw, 300px" /></a></div>
<h3>その他 連携ソフトウェア</h3>
<div style="padding-left: 15px;">
  メールを送る、FTPアクセス、データに保持するためのデータベース<br />
  サーバーの監視するための窓口、などを付加的に導入。<br />
  それぞれがミドルウェアとして存在し、アプリケーションから間接的に呼び出して機能を実現しています。
</div>
<h3>インストールや更新の概要</h3>
<div style="padding-left: 15px;">
  何度か投稿にて出てきているデプロイツールとしての「Ansible」を使用しています。<br />
  「<strong>Ansible</strong>」は<strong>python</strong>で書かれています。</p>
<p>  主に</p>
<blockquote><p>
    ・ウェブ環境としての最低限の構築<br />
    ・それらを実現するためのライブラリのインストール<br />
    ・運用時にあった方が良いツールなどを事前にインストール<br />
    ・標準とする設定値の配布<br />
    ・案件毎に異なる設定値などの自動更新<br />
    ・その他アプリケーションとしての初期設定
  </p></blockquote>
<p>  などが包含されています。</p>
<p>  メリットとして</p>
<blockquote><p>
    ・YAML記述のため複雑な知識は不要<br />
    ・基本的にサーバーには最初からpythonが入ってるためデプロイ先での準備が不要<br />
    ・複数同時にデプロイが簡単に実現
  </p></blockquote>
<p>  デメリットは</p>
<blockquote><p>
    ・独特な記法への慣れが必要<br />
    ・セキュリティ的な課題(権限など)がある<br />
    ・GUIがない<br />
    ・Ansible自体からの外部連携(完了通知メール送信等)が簡単でない
  </p></blockquote>
<p>  などあります。
</p></div>
<h3>課題を解決するためのawx</h3>
<div style="padding-left: 15px;">
  GUIを導入しつつ権限管理、完了したらデプロイ結果の通知などもしてくれるという<strong>&#8220;AWX&#8221;</strong>という存在によって色々解消しそうです。<br />
  <strong>&#8220;Ansible Tower&#8221;</strong>というのもあるのですが、こちらは有料なのと差異は少ないようなので<strong>&#8220;AWX&#8221;</strong>の導入に繋げられたらと思っています。</p>
<p>  ダッシュボード<br />
  <a href="https://docs.ansible.com/ansible-tower/3.2.2/html_ja/userguide/main_menu.html">https://docs.ansible.com/ansible-tower/3.2.2/html_ja/userguide/main_menu.html</a></p>
<p>  組織、チーム、ユーザーなどの権限<br />
  <a href="https://docs.ansible.com/ansible-tower/3.2.2/html_ja/userguide/organizations.html">https://docs.ansible.com/ansible-tower/3.2.2/html_ja/userguide/organizations.html</a></p>
<p>  豊富な対応クラウド<br />
  <a href="https://docs.ansible.com/ansible-tower/3.2.2/html_ja/userguide/credentials.html">https://docs.ansible.com/ansible-tower/3.2.2/html_ja/userguide/credentials.html</a></p>
<p>  デプロイ実行画面<br />
  <a href="https://docs.ansible.com/ansible-tower/3.2.2/html_ja/userguide/jobs.html">https://docs.ansible.com/ansible-tower/3.2.2/html_ja/userguide/jobs.html</a></p>
<p>  通知機能<br />
  <a href="https://docs.ansible.com/ansible-tower/3.2.2/html_ja/userguide/notifications.html">https://docs.ansible.com/ansible-tower/3.2.2/html_ja/userguide/notifications.html</a><br />
  残念ながらChatWorkの標準サポートはありません
</div>


WebApplicationの構成と管理

<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つ以上の項目を関連付ける

パララックスを使用した背景画像の立体効果付与(パーティクル編)

eye-html5.jpg

XMLHttpRequest(Ajax)とFetch APIの使い方を比較してみる

【JavaScript】PostMessageを使ったクロスドメインでのデータ通信

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


Zoho APIで外部からZoho Projectsのタスクを作成

すぐ作れちゃう！？SVGを使った簡単手描き風テキストアニメーションの作り方

empty_sheet.png

GoogleスプレッドシートにPHPからデータ書き込み

<p>・・・Adobe XD は、ユーザー操作性をデザイン、プロトタイプ化、共有するためのプラットフォームです。ワイヤフレーム、ビジュアルデザイン、インタラクションデザイン、プロトタイプ化、プレビュー、共有間の切り替えが簡単な、オールインワンの強力なツールです。（公式サイトより）・・・</p>
<h2>2019.11月のアップデートによって</h2>
<p>　今までは一元管理されたマスターファイルとして参照していた為、作業が重なってロスが発生したり、重複して作ったドキュメントを管理しながら編集したりしていましたが、今回のアップデートにより、リアルタイム共同編集（ベータ）が可能となりました。</p>
<p>&nbsp;</p>
<p>　共同編集のメカニズムはXDのバックグラウンドシステムによってシームレスに動作する為、プラットホーム上ならではのパフォーマンスや動作環境の安定性という利点を活かしつつ複数のデザイナーが一つのドキュメントのデザインと修正を行えることを可能にしています。</p>
<p>&nbsp;</p>
<h3>共同リアルタイム編集のやり方</h3>
<p>　共同編集を行うにはクラウドドキュメント設定をオンにして右上のアカウントアイコンよりメンバーを招待することが可能です。（共同編集をするドキュメントは必ずクラウド上に保存してください）</p>
<p>&nbsp;</p>
<p><img loading="lazy" class="alignnone size-full wp-image-3471" src="/uploads-archive/lc/2020/01/01.jpg" alt="" width="100%" height="" srcset="/uploads-archive/lc/2020/01/01.jpg 1071w, /uploads-archive/lc/2020/01/01-300x189.jpg 300w, /uploads-archive/lc/2020/01/01-1024x646.jpg 1024w, /uploads-archive/lc/2020/01/01-768x485.jpg 768w, /uploads-archive/lc/2020/01/01-600x379.jpg 600w" sizes="(max-width: 1071px) 100vw, 1071px" /></p>
<p style="text-align: center">【図１：編集者の追加】</p>
<p>自分以外のメンバーがリアルタイムで編集・修正を行なっている箇所が個々メンバーのアイコンカラーによって枠線表示され、目視で確認する事ができます。</p>
<p>→<span style="color: #ff9900">バウンディングボックス</span></p>
<p><img loading="lazy" class="alignnone size-full wp-image-3472" src="/uploads-archive/lc/2020/01/02.jpg" alt="" width="100%" height="" srcset="/uploads-archive/lc/2020/01/02.jpg 1055w, /uploads-archive/lc/2020/01/02-300x199.jpg 300w, /uploads-archive/lc/2020/01/02-1024x678.jpg 1024w, /uploads-archive/lc/2020/01/02-768x509.jpg 768w, /uploads-archive/lc/2020/01/02-600x398.jpg 600w" sizes="(max-width: 1055px) 100vw, 1055px" /></p>
<p style="text-align: center">【図２：各メンバーのバウンディングボックス表示（イメージ画像）】</p>
<p>このバウンディングボックスにカーソルを合わせると編集している共同編集者の名前が表示されます。</p>
<p>よって、誰がどのオブジェクトを編集しているのかが視覚的にわかるようになるのです。</p>
<p>&nbsp;</p>
<h3>注意点</h3>
<p>・現在はベータ版とのことで共有作成中に動作が重くなったり、共有用プレビューURLの更新はまだ所有者しかできないようです。</p>
<p>・同じオブジェクトを編集すると最初にサーバーに到達した編集を保持し、他の編集を破棄してしまいます。</p>
<p>&nbsp;</p>
<h3>追加された「共有モード」に関して</h3>
<p>デザイン制作において、デザインを他のメンバー等と共有してフィードバックをしあえるという事が重要になります。</p>
<p>その点でこのモードは編集メンバー以外の受け渡し、プレゼンテーション、またはユーザーテストといった共有のためのWEBリンク作成と管理を行う事ができます。</p>
<p>&nbsp;</p>
<p>　2020.1.14現在　リアルタイム編集機能においてはまだベータ版となっていますが、同時に同じドキュメントを複数人で編集する事が可能という機能の追加においては、編集者にとって<span style="color: #ff9900"><strong>効率化が大きく進んだ</strong></span>と考えられます。</p>
<p>
　また、同ドキュメントを編集することにより、更新途中作業の別ユーザーからの上書きといったミスがリアルタイムで編集されていく為、大きく減少するかと思われます。</p>


Adobe XD アップデートにより、複数人リアルタイム編集が可能に！

JavaScriptのPromiseメソッドチェーンを使った非同期処理

意外と簡単！jQueryを使わずにJavaScriptだけでスムーススクロールを実装する（IE11以上版）

Three.jsを使ったWebGLでアウトラインだけの表示

google_sheets_logo-1024x215.png

GoogleスプレッドシートのデータをPHPで取得

Docker Installation Challange

<h2>Done is better than perfect.</h2>
<p>この言葉はFacebookの設立者であるマークザッカーバーグの言葉である。<br />
「完璧を目指すよりまず終わらせろ」という意味であり、これを心がけることでやるべきことの生産性が上がります。</p>
<p>この名言を信じて、「ラクして早い」を実現しよう！<br />
</p>
<h3>0.前提</h3>
<h4>生産するということはアウトプットすることと同義</h4>
<p>アウトプットするための準備（インプット）をする。<br />
目標 ：　インプット &lt; アウトプット</p>
<h4>モチベーションの維持</h4>
<p>断続的にアウトプットするためのモチベーションを維持しなければ効果が発揮されない。<br />
<a href="https://sterfield.co.jp/programmer/%e3%80%8c%e9%9b%86%e4%b8%ad%e5%8a%9b%e3%80%8d%e3%82%92%e9%ab%98%e3%82%81%e3%82%8b%e3%81%9f%e3%82%81%e3%81%ae%ef%bc%93%e3%81%a4%e3%81%ae%e3%81%93%e3%81%a8-%e8%aa%98%e6%83%91%e3%81%ab%e8%b2%a0/" target="_blank" rel="noopener">モチベーション維持の方法</a></p>
<h4>作業の効率化</h4>
<p>単純作業をAIに任せたり、自動化できるものはできるだけ自動化する。<br />
できるだけ楽ができるようにする。<br />
</p>
<h3>1.準備</h3>
<h4>解決分と未解決分をはっきりと区別する</h4>
<p>タスク管理を行うことで、やるべきことをはっきりさせておき、スケジュール管理に役立てる。</p>
<h4>明確な目的・目標を持つ</h4>
<p>「本質を理解」して、問題点や要望に対し満足させるために必要なことを明確にする。</p>
<h4>すべてをシンプルにする</h4>
<p>考えること、やることをシンプルなものにしておく。</p>
<p>それによって、何をどうすべきかがスーッと見えてくる。</p>
<ul>
<li>小さな塊に分ける</li>
<li>視野を広くする</li>
<li>細部まで理解・把握する</li>
<li>目の前のことに集中する</li>
</ul>
<p></p>
<h3>2.実践</h3>
<h4>スピード重視！６０点のアウトプット</h4>
<p>目的として、</p>
<ul>
<li>方向性の確認</li>
<li>余裕を持つ</li>
<li>無理せず、ストレスが少ない</li>
<li>合格のボーダーライン</li>
</ul>
<p>足りてないアウトプットの完成度をより高めるために、フィードバックをもらおう。</p>
<p>例えるなら、ホームランを狙わず、確実にヒットを打ち続ける戦略</p>
<h4>フィードバックをもらう</h4>
<p>方向性が間違っていたり、足りていない部分を修正して、100点のアウトプットを目指す。<br />
そのタスクを達成したら、次のタスクへ切り替える。<br />
こういった繰り返しをしていくことで、安定したステップアップを図れるだろう。</p>
<h4>60%の法則を行う利点</h4>
<ul>
<li>無理なく余裕を持ってタスクを進めることができる</li>
<li>余裕を持つ→ミスを減らせる→余裕を持てる→　（好循環が生まれる）</li>
<li>「ポジティブに切り替え早く」を意識すれば自然と成果を出せる</li>
<li>継続することで、自然と成長できる</li>
</ul>
<h4>欠点</h4>
<ul>
<li>フィードバックをくれる人がいないとならない</li>
</ul>
<p></p>
<h3>まとめ</h3>
<p>Done is better than perfect.<br />
高すぎる壁でなければ、大変だと思うことも60%の法則で太刀打ちできるのではないかと、視野が広がった。<br />
日々成長できるための最適な言葉で、好きな言葉が増えました。</p>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

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

2020/04/15

2020/04/15

2020/04/15

2020/03/11

2020/03/11

2020/03/10

2020/03/10

2020/02/13

2020/02/13

2020/02/12

2020/01/15

2020/01/15

2020/01/15

2019/12/10

2019/12/06

2019/11/13

2019/10/09

2019/10/09