<h2>サーバーを立ち上げたら、保守が始まる</h2>
今回の対象者はこちら
<ul>
<li>サーバーの保守ってなに？って人</li>
<li>zabbixって聞いたことあるけどよくわからんって人</li>
</ul>
サーバー保守とは、webサイトが正常な状態を維持できるように手入れすることである。 
普段あまり気にすることではありませんが、インシデントが起きた時に対応しなくてはいけません。 
例えば、外部から攻撃を受けた際、サーバー内部のプログラム等の記述が不十分でエラーが起きてしまう状況の時。 
<a href="https://www.shadan-kun.com/blog/measure/1411/">サイバー攻撃の種類</a>はこちらから 
プログラムによるエラーで有名なのが<a href="https://seoworld.jp/500error/">500エラー</a> 
&nbsp;
<h3>zabbixとは</h3>
ネットワーク管理ソフトウェアであり、サーバーの使用状況を確認できる。 
zabbixによって、LaunchCartの保守運用を行なっている。 
具体的には、各サーバーを監視し、エラーが起きた際にログを残し、それをメールで通知している。 
発生ベースではあるものの、不具合の早期発見を行なっている。
&nbsp;
<h3>zabbixの活用による利点</h3>
<ul>
<li>サーバーの状況を知ることが可能</li>
<li>エラーが出た際の発見が可能</li>
<li>ログから修正箇所を把握しやすくできる</li>
<li>クライアント様より先に、不具合感知できる</li>
<li>多種多様な方法で監視が可能</li>
<li>APIにより他ツールとの連携可能</li>
</ul>
<h3>まとめ</h3>
不具合の起きないことが理想ですが、どのシステムにも起きてしまうので、どのように保守していくかの一例として、zabbixを紹介しました。 
&nbsp;

small_zabbix_logo_600.png

thumbnail_zabbix_logo_600.png

zabbix_logo_600.png

zabbixについて　~サーバー管理~

最近、WEBページのデザインで、ページを構成するパーツから先にデザインを始める必要のある案件に初めて携わったのですが、 
これまでページ全体のレイアウト→各セクションのレイアウト→各部品のレイアウトというふうに、どちらかというと大きなところからデザインを進める方法をとっていたため、 
若干戸惑ってしまいました。
しかし、レスポンシブデザインでは、PC、タブレット、スマホでそれぞれ適したページレイアウトが異なっており、ページのレイアウトからデザインを進める方法が適さない場合が少なくありません。 
そんな中、最近ではパーツやそれらの集まりであるコンポーネントからデザインし、それらを組み合わせてページを作っていく方法が広がりつつあります。
そこでパーツからデザインする方法を調べたところ、アトミックデザインという方法に行き着きました。 
アトミックデザインとは、部品の最小単位を原子（Atom）と位置づけ、 
原子（Atoms; 部品の最小単位） 
→ 分子（Molecules; 2個以上の最小単位の組み合わせ） 
→ 有機体（Organisms; 機能を成す分子の集まり） 
→ テンプレート（Templates; ページのレイアウト） 
→ ページ(Pages; 実際の内容をテンプレートに組み込んだもの) 
という様に、細部からより大きな単位へとデザインしていく方法です（参考: <a href="http://atomicdesign.bradfrost.com/chapter-2/" target="_blank" rel="noopener">Atomic Design Methodology | Atomic Design by Brad Frost</a>）。
アトミックデザインの方法を使うことで、効率の高い自由度の高いデザインが可能となります。 
アトミックデザインでは独立した機能を持ったパーツを単位としてデザインするため、レイアウトの変更や変化によって機能が失われることがありません。そのため、必要に応じて自由にレイアウトすることが可能です。 
デバイスごとにレイアウト変更が必要なレスポンシブデザインには最適です。
さて、WEBページのデザインをするためのアプリとして、最近私はAdobeのXDをよく使います。 
日々アップデートされ、段々と使いやすくなっているのを感じます。
ただ、XDを使ってアトミックデザインをやってみようとしたときに、問題にぶつかりました。 
XDで部品を組み合わせる場合、シンボルという機能を使って実現することになります。 
このシンボルは、再利用する部品をプロジェクトのアセットとしてストックしていく仕組みです。 
XDではシンボルをシンボルで構成するような入れ子の構造も可能なので、アトミックデザインも可能かと思われたのですが、シンボルではテキストとビットマップ形式の画像以外はパーツの差し替えができないため、アトミックデザインの利点を活かしきることができません。
2019.06.11追記）<a href="https://launchcart.jp/blog/adobe-xd%E3%81%8C%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%AB%E5%AF%BE%E5%BF%9C%EF%BC%81%E3%82%A2%E3%83%88%E3%83%9F%E3%83%83%E3%82%AF%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3/" target="_blank" rel="noopener">XDにコンポーネントが導入されました！</a>
<div class="lcLink js-loadLcLink" data-lclink="https://launchcart.jp/blog/adobe-xd%e3%81%8c%e3%82%b3%e3%83%b3%e3%83%9d%e3%83%bc%e3%83%8d%e3%83%b3%e3%83%88%e3%81%ab%e5%af%be%e5%bf%9c%ef%bc%81%e3%82%a2%e3%83%88%e3%83%9f%e3%83%83%e3%82%af%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3/"><a href="https://launchcart.jp/blog/adobe-xd%e3%81%8c%e3%82%b3%e3%83%b3%e3%83%9d%e3%83%bc%e3%83%8d%e3%83%b3%e3%83%88%e3%81%ab%e5%af%be%e5%bf%9c%ef%bc%81%e3%82%a2%e3%83%88%e3%83%9f%e3%83%83%e3%82%af%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3/" target="_blank">記事へのリンク</a></div>
&nbsp;
<div id="attachment_14396" style="width: 650px" class="wp-caption alignnone"><a href="/uploads-archive/2018/11/Nov-13-2018-16-40-33.gif"><img aria-describedby="caption-attachment-14396" decoding="async" loading="lazy" class="size-full wp-image-14396" src="/uploads-archive/2018/11/Nov-13-2018-16-40-33.gif" alt="" width="640" height="448" /></a>XDではアイテムごとにアイコンを変更したい場合、シンボルから解除した上で、アイコンを差し替える必要があるので、レイアウトを変更するときに別々の変更が必要になる</div>
一方、XDと同じくUI/UXデザインツールとして人気のSketchでは、パースそれぞれの中で、パーツを差し替えることも可能なので、アトミックデザインに最適だと言われています。 
しかし、Sketchは年間$99の支払いが必要で、Windows環境に対応しておらず、プロトタイプの共有はまた別途in visionの契約が必要になるため、導入のハードルが少し高いと感じていました。
そこで別のアプリを探してみたところ、<a href="https://www.figma.com" target="_blank" rel="noopener">Figma</a>というUI/UXデザインツールがとても優れているという<a href="https://note.mu/gimmickdock/n/nb304dee6bd51" target="_blank" rel="noopener">記事</a>を見つけました。
Figmaはブラウザで動作するため、Mac、Windowsを問いません。 
実際使ってみると、ブラウザで動作するアプリにもかかわらず、ネイティブアプリを操作しているかのような快適な操作感で、とても使いやす印象でした。
更に、Sketchと同じように、XDのシンボルに当たるパーツの管理機能は、マスターコンポーネント→インスタンスという形式をとっているので、同じパーツであっても、それぞれで違うパーツへ差し替えることが可能で、アトミックデザインを行う上で優れていることがわかりました。
<div id="attachment_14411" style="width: 650px" class="wp-caption alignnone"><a href="/uploads-archive/2018/11/Nov-13-2018-17-22-48.gif"><img aria-describedby="caption-attachment-14411" decoding="async" loading="lazy" class="size-full wp-image-14411" src="/uploads-archive/2018/11/Nov-13-2018-17-22-48.gif" alt="" width="640" height="405" /></a>Figmaでは同じパーツ（コンポーネント）の中のパーツをそれぞれ差し替え可能</div>
3プロジェクトまで無料で利用できますので、まずはFigmaでアトミックデザインを覚え、なれてきたらSketchというのも方法としてはありかもしれません。
また、Figmaは30日間分のバージョン管理も可能。 
Sketchと違い、単独でプロトタイプの共有が可能なのも魅力です。 
また、無料版では2人まで、月$12の有料版では人数無制限の同時編集も可能で、 
チームでデザインを行う場合には、Sketchよりも優れたツールだと感じました。
&nbsp;
<h3>参考にさせていただいたサイト</h3>
<a href="http://atomicdesign.bradfrost.com/chapter-2/" target="_blank" rel="noopener">Atomic Design Methodology | Atomic Design by Brad Frost</a>
<a href="https://goworkship.com/magazine/atomic_design/" target="_blank" rel="noopener">アトミックデザインとは？ コンポーネント単位で創るUIデザイン手法 | Workship MAGAZINE(ワークシップマガジン)</a>
<a href="https://www.webcreatorbox.com/inspiration/component-design" target="_blank" rel="noopener">これからのWebデザインは、コンポーネント化を意識しよう | Webクリエイターボックス</a>
<a href="https://note.mu/gimmickdock/n/nb304dee6bd51" target="_blank" rel="noopener">一人で「UIデザインツールどれがいいのか論争」をしてみる｜ノムラギミック｜note</a>

XD使いがアトミックデザインを始めるならUI/UXデザインアプリのFigmaがよさそう

今更だけどPugを使ってみました

githubの後追いとして生まれたgitlabを少し試してみました。
githubはアカウントに課金しない場合、リポジトリが全て公開されるというオープンソース精神が非常に強い仕様でした。しかしgitlabは無料アカウントでも非公開リポジトリやメンバー限定リポジトリを作成できます。
githubでcommitやpushもしたことのない自分ですが、クローズドならば、ということで今回アカウントを作成し、手元にあったテストプログラムのリポジトリを作成するまでを試してみました。
branchのツリーグラフビューや
<img decoding="async" loading="lazy" class="alignnone size-medium wp-image-13610" src="/uploads-archive/2018/02/320f2d2f79fcb6febe4391c7aaf3db31-300x178.png" alt="" width="300" height="178" srcset="/uploads-archive/2018/02/320f2d2f79fcb6febe4391c7aaf3db31-300x178.png 300w, /uploads-archive/2018/02/320f2d2f79fcb6febe4391c7aaf3db31-228x135.png 228w, /uploads-archive/2018/02/320f2d2f79fcb6febe4391c7aaf3db31.png 552w" sizes="(max-width: 300px) 100vw, 300px" />
コミットごとの差分閲覧
<img decoding="async" loading="lazy" class="alignnone size-medium wp-image-13613" src="/uploads-archive/2018/02/2e3e65957d1cfdfececc9df7a313572b-300x219.png" alt="" width="300" height="219" srcset="/uploads-archive/2018/02/2e3e65957d1cfdfececc9df7a313572b-300x219.png 300w, /uploads-archive/2018/02/2e3e65957d1cfdfececc9df7a313572b-768x560.png 768w, /uploads-archive/2018/02/2e3e65957d1cfdfececc9df7a313572b-228x166.png 228w, /uploads-archive/2018/02/2e3e65957d1cfdfececc9df7a313572b.png 1000w" sizes="(max-width: 300px) 100vw, 300px" />
push時にgit hookを使った通知
<img decoding="async" loading="lazy" class="alignnone size-medium wp-image-13611" src="/uploads-archive/2018/02/24603bed171dd5bd956214283bc0168f-300x103.png" alt="" width="300" height="103" srcset="/uploads-archive/2018/02/24603bed171dd5bd956214283bc0168f-300x103.png 300w, /uploads-archive/2018/02/24603bed171dd5bd956214283bc0168f-768x264.png 768w, /uploads-archive/2018/02/24603bed171dd5bd956214283bc0168f-228x78.png 228w, /uploads-archive/2018/02/24603bed171dd5bd956214283bc0168f.png 815w" sizes="(max-width: 300px) 100vw, 300px" />
など、基本＋あったらいいな、という機能は全部備わっている感じです。さらにプロジェクトごとのメニューにはCI/CDという文字列が。
<img decoding="async" loading="lazy" class="alignnone size-full wp-image-13614" src="/uploads-archive/2018/02/CICD.png" alt="" width="213" height="260" />
継続的インテグレーション/継続的デリバリーという意味で、書いたプログラムをpushするたびにビルド・自動テスト・実行環境への配信までを自動化する機能のとっかかりが用意されているようです。とはいってもCI/CDは未経験の世界。凄そう＆楽できそう、というイメージはあるものの具体的なことはやってみないと分かりません。
とりあえずは、個人的に作ってるプログラムをgitlabで管理して、CI/CDツールも合わせて使ってみようと思います。
&nbsp;
&nbsp;

gitlabを試してみる

フロントエンドの人間が黒い画面(Macのターミナル)を使ってみて思ったこと

ようやく巡り会えました。大本命のスタートページ。
定期巡回する情報収集のツールと最早欠かすことの出来ない存在です。
私のスタートページの変遷をブログ記事で御覧ください。
2013年10月
<a href="https://sterfield.co.jp/officer/igoogle%E3%81%AE%E7%A7%BB%E8%A1%8C%E5%85%88%E3%81%AFmyyahoo%E6%8E%A8%E3%81%97/">igoogleの移行先はMy Yahoo!推し</a>
↓
2016年6月
<a href="https://sterfield.co.jp/officer/my-yahoo%E3%81%8B%E3%82%89my-yahoo%E3%81%AB%E7%A7%BB%E5%8B%95/">My Yahoo!からMy Yahoo!に移動</a>
サービスが終了するに連れて移行を繰り返し、igoogle→MyYahoo（co.jp）→MyYahoo(com)と変遷しましたがようやくこれだというのに出会えました。
その名も「<a href="https://ichro.me/">iChrome</a>」
MyYahooも悪かったわけではないのですが、_blankの設定が出来なかったり、検索エンジンがyahoo.comだったり（当たり前なのですが）とスタートページとして使うにあたっては、改善して欲しいなと思うところが何点かありました。
そして、そもそも要因としてWindows10で開いているとスリープモードに移行しない問題があり調べてみると、chromeがyahoo.comのURLに対して何らかのデータをuploadしていることが分かり、MyYahooを閉じたところスリープに移行したことから原因を特定した結果、移行を決意しました。
過去の情報を調べてみると2014年からサービスはあるようですね。全く知らなかったのでなんでなのかなと思ったらchromeの拡張機能なのでchromeを使っていることが前提で2014年のブラウザのシェアを見るとchromeってまだ17％くらいのシェアだったのですね。
<a href="http://gigazine.net/news/20140303-browser-share-2014-feb/" target="_blank" rel="noopener noreferrer">http://gigazine.net/news/20140303-browser-share-2014-feb/</a>
ちなみに今は世界だと50%くらいで圧倒的です。
<a href="https://webrage.jp/techblog/pc_browser_share/" target="_blank" rel="noopener noreferrer">https://webrage.jp/techblog/pc_browser_share/</a>
というような背景があったのでは推測しつつ簡単に紹介です。
<h2>インストール方法</h2>
<a href="/admin/wp-content/uploads/2017/05/iChrome_-_高速・生産的なホームページ_-_Chrome_ウェブストア.png"><img decoding="async" loading="lazy" class="aligncenter size-large wp-image-12852" src="/admin/wp-content/uploads/2017/05/iChrome_-_高速・生産的なホームページ_-_Chrome_ウェブストア-1024x660.png" alt="" width="1024" height="660" srcset="/uploads-archive/2017/05/iChrome_-_高速・生産的なホームページ_-_Chrome_ウェブストア-1024x660.png 1024w, /uploads-archive/2017/05/iChrome_-_高速・生産的なホームページ_-_Chrome_ウェブストア-300x193.png 300w, /uploads-archive/2017/05/iChrome_-_高速・生産的なホームページ_-_Chrome_ウェブストア-768x495.png 768w, /uploads-archive/2017/05/iChrome_-_高速・生産的なホームページ_-_Chrome_ウェブストア-228x147.png 228w" sizes="(max-width: 1024px) 100vw, 1024px" /></a>
https://chrome.google.com/webstore/detail/ichrome-a-fast-productive/oghkljobbhapacbahlneolfclkniiami/related
chromeの拡張機能ですのでウェブストアで追加します。
<a href="/admin/wp-content/uploads/2017/05/iChrome.png"><img decoding="async" loading="lazy" class="aligncenter size-large wp-image-12855" src="/admin/wp-content/uploads/2017/05/iChrome-1024x587.png" alt="" width="1024" height="587" srcset="/uploads-archive/2017/05/iChrome-1024x587.png 1024w, /uploads-archive/2017/05/iChrome-300x172.png 300w, /uploads-archive/2017/05/iChrome-768x440.png 768w, /uploads-archive/2017/05/iChrome-228x131.png 228w" sizes="(max-width: 1024px) 100vw, 1024px" /></a>
すぐにチュートリアルが始まります。
<a href="/admin/wp-content/uploads/2017/05/iChrome-1.png"><img decoding="async" loading="lazy" class="aligncenter size-large wp-image-12857" src="/admin/wp-content/uploads/2017/05/iChrome-1-1024x645.png" alt="" width="1024" height="645" srcset="/uploads-archive/2017/05/iChrome-1-1024x645.png 1024w, /uploads-archive/2017/05/iChrome-1-300x189.png 300w, /uploads-archive/2017/05/iChrome-1-768x484.png 768w, /uploads-archive/2017/05/iChrome-1-228x144.png 228w" sizes="(max-width: 1024px) 100vw, 1024px" /></a>
Googleアカウントでログインが出来ます。
説明の通り、ログインをすると他のブラウザでも同じ環境を享受できます。
今の時代当たり前かもしれませんが、実にいいですね。
<a href="/admin/wp-content/uploads/2017/05/iChrome-2.png"><img decoding="async" loading="lazy" class="aligncenter size-large wp-image-12859" src="/admin/wp-content/uploads/2017/05/iChrome-2-1024x682.png" alt="" width="1024" height="682" srcset="/uploads-archive/2017/05/iChrome-2-1024x682.png 1024w, /uploads-archive/2017/05/iChrome-2-300x200.png 300w, /uploads-archive/2017/05/iChrome-2-768x512.png 768w, /uploads-archive/2017/05/iChrome-2-228x152.png 228w" sizes="(max-width: 1024px) 100vw, 1024px" /></a>
私のアカウントでは既に登録済みでキャプチャをとりましたのでこのようになります。
<h2>ウィジェット追加</h2>
<a href="/admin/wp-content/uploads/2017/05/iChrome-3.png"><img decoding="async" loading="lazy" class="aligncenter size-large wp-image-12861" src="/admin/wp-content/uploads/2017/05/iChrome-3-1024x595.png" alt="" width="1024" height="595" srcset="/uploads-archive/2017/05/iChrome-3-1024x595.png 1024w, /uploads-archive/2017/05/iChrome-3-300x174.png 300w, /uploads-archive/2017/05/iChrome-3-768x446.png 768w, /uploads-archive/2017/05/iChrome-3-228x133.png 228w, /uploads-archive/2017/05/iChrome-3.png 1189w" sizes="(max-width: 1024px) 100vw, 1024px" /></a>
Googleのサービスや主要SNSは一通り網羅されている印象です。
しかし、私が一番欲しいのは<a href="/admin/wp-content/uploads/2017/05/iChrome-4.png"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-12863" src="/admin/wp-content/uploads/2017/05/iChrome-4.png" alt="" width="886" height="396" srcset="/uploads-archive/2017/05/iChrome-4.png 886w, /uploads-archive/2017/05/iChrome-4-300x134.png 300w, /uploads-archive/2017/05/iChrome-4-768x343.png 768w, /uploads-archive/2017/05/iChrome-4-228x102.png 228w" sizes="(max-width: 886px) 100vw, 886px" /></a>
こちらのRSS表示です。
<a href="/admin/wp-content/uploads/2017/05/iChrome-5.png"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-12864" src="/admin/wp-content/uploads/2017/05/iChrome-5.png" alt="" width="418" height="445" srcset="/uploads-archive/2017/05/iChrome-5.png 418w, /uploads-archive/2017/05/iChrome-5-282x300.png 282w, /uploads-archive/2017/05/iChrome-5-228x243.png 228w" sizes="(max-width: 418px) 100vw, 418px" /></a>
設定で細かく指定が出来ます。
逆に、MyYahooであれば、ブログ側が一発登録に対応していたりしたのですが、ichromeではそのような設定が見当たらなかったのでひたすら手動登録です。
<h2>まとめ</h2>
<a href="/admin/wp-content/uploads/2017/05/iChrome-6.png"><img decoding="async" loading="lazy" class="aligncenter size-large wp-image-12865" src="/admin/wp-content/uploads/2017/05/iChrome-6-1024x447.png" alt="" width="1024" height="447" srcset="/uploads-archive/2017/05/iChrome-6-1024x447.png 1024w, /uploads-archive/2017/05/iChrome-6-300x131.png 300w, /uploads-archive/2017/05/iChrome-6-768x335.png 768w, /uploads-archive/2017/05/iChrome-6-228x100.png 228w, /uploads-archive/2017/05/iChrome-6.png 1314w" sizes="(max-width: 1024px) 100vw, 1024px" /></a>
CPUの使用率などのウィジェットもあったりと満足のいくスタートページが出来ました。

igoogle代替のスタートページはiChromeで決まり

プレゼン資料を作成する時、パワーポイントでの作成が未だ多いのではないでしょうか。
MacユーザーならKeynoteだろという声も聞こえてきそうですが、自前のパソコンを持ち込める環境であればそれでよいのですが、プレゼン用のパソコンがWindows縛りであったらやはりPowerPointで作るのがまだ無難なケースが多いです。
その中で資料を一から作る時、みなさんどうしていますか？
大体の構成を最初考えると思いますが、Powerpointで枠だけガツガツ作ったり、メモ帳で別途書いたりと今までは進めていました。
が、共同でセミナーを開催しようとしていた知人にタイトルの方法を教えてもらったんです。
<h2>Wordでアウトラインの作成</h2>
<a href="/uploads-archive/2017/03/e290a11e6dcc8a3f81df8ca6ccf667c7.png"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-12689" src="/uploads-archive/2017/03/e290a11e6dcc8a3f81df8ca6ccf667c7.png" alt="Cursor_と_Microsoft_Word" width="952" height="682" srcset="/uploads-archive/2017/03/e290a11e6dcc8a3f81df8ca6ccf667c7.png 952w, /uploads-archive/2017/03/e290a11e6dcc8a3f81df8ca6ccf667c7-300x215.png 300w, /uploads-archive/2017/03/e290a11e6dcc8a3f81df8ca6ccf667c7-768x550.png 768w, /uploads-archive/2017/03/e290a11e6dcc8a3f81df8ca6ccf667c7-228x163.png 228w" sizes="(max-width: 952px) 100vw, 952px" /></a>
新規作成でアウトラインの作成を選択します。
<a href="/uploads-archive/2017/03/6981af5b0474cf0e6c2341de019202c9.png"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-12690" src="/uploads-archive/2017/03/6981af5b0474cf0e6c2341de019202c9.png" alt="Cursor_と_文書_1" width="618" height="855" srcset="/uploads-archive/2017/03/6981af5b0474cf0e6c2341de019202c9.png 618w, /uploads-archive/2017/03/6981af5b0474cf0e6c2341de019202c9-217x300.png 217w, /uploads-archive/2017/03/6981af5b0474cf0e6c2341de019202c9-228x315.png 228w" sizes="(max-width: 618px) 100vw, 618px" /></a>
テンプレートが埋まった状態で出力されます。
ここの見出し1というのがページタイトルと出力され、見出し2というのはページの内容に読み込まれます。
ちなみに見出しが設定されていないテキストは無視される仕様のようです。
htmlの階層構造が分かっていればとっつきやすいと思います。 
<a href="/uploads-archive/2017/03/db5f96764d6589ed4e8987dae0c3fe2a.png"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-12691" src="/uploads-archive/2017/03/db5f96764d6589ed4e8987dae0c3fe2a.png" alt="Cursor_と_日付__互換モード_" width="771" height="975" srcset="/uploads-archive/2017/03/db5f96764d6589ed4e8987dae0c3fe2a.png 771w, /uploads-archive/2017/03/db5f96764d6589ed4e8987dae0c3fe2a-237x300.png 237w, /uploads-archive/2017/03/db5f96764d6589ed4e8987dae0c3fe2a-768x971.png 768w, /uploads-archive/2017/03/db5f96764d6589ed4e8987dae0c3fe2a-228x288.png 228w" sizes="(max-width: 771px) 100vw, 771px" /></a>
設定はリボンメニューの中にあります。
<a href="/uploads-archive/2017/03/db5f96764d6589ed4e8987dae0c3fe2a-1.png"><img decoding="async" loading="lazy" class="aligncenter size-large wp-image-12692" src="/uploads-archive/2017/03/db5f96764d6589ed4e8987dae0c3fe2a-1-1024x958.png" alt="Cursor_と_日付__互換モード_" width="1024" height="958" srcset="/uploads-archive/2017/03/db5f96764d6589ed4e8987dae0c3fe2a-1-1024x958.png 1024w, /uploads-archive/2017/03/db5f96764d6589ed4e8987dae0c3fe2a-1-300x281.png 300w, /uploads-archive/2017/03/db5f96764d6589ed4e8987dae0c3fe2a-1-768x719.png 768w, /uploads-archive/2017/03/db5f96764d6589ed4e8987dae0c3fe2a-1-228x213.png 228w, /uploads-archive/2017/03/db5f96764d6589ed4e8987dae0c3fe2a-1.png 1041w" sizes="(max-width: 1024px) 100vw, 1024px" /></a>
もしくは、スタイルウィンドウを選択すると右サイドバーが出現して選択中の行のスタイルを変えることができます。
<h2>rtf形式で保存</h2>
リッチテキストファイルで保存するというのが今回のミソですね。
powerpointで読み込む際、rtf形式でないと受け付けてくれません。
<h2>Powerpointでアウトラインを読み込む</h2>
<a href="/uploads-archive/2017/03/bdeeb1faafb8730bea83122421189961.png"><img decoding="async" loading="lazy" class="aligncenter size-large wp-image-12695" src="/uploads-archive/2017/03/bdeeb1faafb8730bea83122421189961-1024x616.png" alt="Cursor_と_新しいスライド_と_プレゼンテーション1_と_日付__互換モード_" width="1024" height="616" srcset="/uploads-archive/2017/03/bdeeb1faafb8730bea83122421189961-1024x616.png 1024w, /uploads-archive/2017/03/bdeeb1faafb8730bea83122421189961-300x180.png 300w, /uploads-archive/2017/03/bdeeb1faafb8730bea83122421189961-768x462.png 768w, /uploads-archive/2017/03/bdeeb1faafb8730bea83122421189961-228x137.png 228w, /uploads-archive/2017/03/bdeeb1faafb8730bea83122421189961.png 1280w" sizes="(max-width: 1024px) 100vw, 1024px" /></a>
新しいスライドからアウトライン表示を選択。ダイアログで保存したファイルを参照します。
<a href="/uploads-archive/2017/03/H29_03_14_16_55.png"><img decoding="async" loading="lazy" class="aligncenter size-large wp-image-12696" src="/uploads-archive/2017/03/H29_03_14_16_55-1024x618.png" alt="H29_03_14_16_55" width="1024" height="618" srcset="/uploads-archive/2017/03/H29_03_14_16_55-1024x618.png 1024w, /uploads-archive/2017/03/H29_03_14_16_55-300x181.png 300w, /uploads-archive/2017/03/H29_03_14_16_55-768x464.png 768w, /uploads-archive/2017/03/H29_03_14_16_55-228x138.png 228w, /uploads-archive/2017/03/H29_03_14_16_55.png 1280w" sizes="(max-width: 1024px) 100vw, 1024px" /></a>
Wordで書いたものが読み込まれました。
<h2>まとめ</h2>
手順自体は簡単なのですが、情報が見つからなかったのでブログにしてみました。
私にとっては画期的でこの機能を知っていればどれだけ効率的に出来たものか。
まだまだ使いこなせていない機能が眠っているものですね。

large_wordtopowepoint-1024x556.png

medium_wordtopowepoint-1024x556.png

small_wordtopowepoint-1024x556.png

thumbnail_wordtopowepoint-1024x556.png

wordtopowepoint-1024x556.png

Macでwordをpowerpointに読み込む方法

webサイトのデザインをする時に、グリッドレイアウトのデザインを作成することがあります。
横幅は○○ピクセルで、マージンはどのくらい空けるか、 
3カラム、4カラム、5カラム、どうするかみたいなことを考える時、 
たまに電卓を使用して、それぞれ何ピクセルだとぴったり収まるか試行錯誤することがあります。
地味にめんどくさかったりするので、なにか良いツールないかと探したらありました。
<img decoding="async" loading="lazy" src="/uploads-archive/2016/09/a260c304773c438b2d2f30d9af28cfc6-1024x410.png" alt="%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-27-1-51-01" width="1024" height="410" class="alignnone size-large wp-image-12042" srcset="/uploads-archive/2016/09/a260c304773c438b2d2f30d9af28cfc6-1024x410.png 1024w, /uploads-archive/2016/09/a260c304773c438b2d2f30d9af28cfc6-300x120.png 300w, /uploads-archive/2016/09/a260c304773c438b2d2f30d9af28cfc6-768x308.png 768w, /uploads-archive/2016/09/a260c304773c438b2d2f30d9af28cfc6-228x91.png 228w" sizes="(max-width: 1024px) 100vw, 1024px" />
<a href="http://www.kenjisugimoto.com/gridpx/" target="_blank">Gridpx：グリッドデザイン計算ツール | Webデザイン便利ツール</a>
使い方は簡単です。（というかそもそもがそんなに難しいことではないんですが&#8230;笑） 
・コンテンツの幅 
・カラム数 
・マージンの幅 
を入力すると、 
各カラムを何pxで設定したらいいか計算してくれます。
シンプルなツールですが、地味に便利です！！

グリッドデザイン時の計算に便利なサイト「Gridpx」

&nbsp;
Evernoteさんすいませんでした。
もう一度戻りたいです。
デバイス2台で使わせて頂きます。
なんなら課金します。
餅は餅屋なんだな〜と再認識しました。
アプリ内の遷移の仕方、整理の仕方の概念等々、細かい事はいいません。
Evernoteに戻りたいです。
&nbsp;
手順は公式が用意してくれていますが、アプリが進化しているのか手順が変わっていたので、ご紹介です。
<a href="https://help.evernote.com/hc/ja/articles/217703298" target="_blank">https://help.evernote.com/hc/ja/articles/217703298</a>
なお、エクスポート、インポート共に、Mac版のOnenoteとEvernoteでは対応しておりませんでした。
<h2>Onenoteからエクスポート実は必要なし</h2>
<a href="/uploads-archive/2016/09/MEZAKI.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-12016" src="/uploads-archive/2016/09/MEZAKI-300x168.png" alt="mezaki" width="300" height="168" srcset="/uploads-archive/2016/09/MEZAKI-300x168.png 300w, /uploads-archive/2016/09/MEZAKI-768x430.png 768w, /uploads-archive/2016/09/MEZAKI-228x128.png 228w, /uploads-archive/2016/09/MEZAKI.png 955w" sizes="(max-width: 300px) 100vw, 300px" /></a>
&nbsp;
<ol>
<li>
<blockquote>OneNote アプリ（Windows 版）を起動します。</blockquote>
</li>
<li>
<blockquote>「ファイル」メニューをクリックし「エクスポート」を選択します。</blockquote>
</li>
<li>
<blockquote>ページまたはセクション単位でエクスポートする場合は拡張子「*.one」、ノートブック全体をエクスポートする場合は拡張子「*.onepkg」を選択します。</blockquote>
</li>
<li>
<blockquote>「エクスポート」ボタンをクリックします。</blockquote>
</li>
<li>
<blockquote>ファイルを一時的に保存するフォルダを選択し、「保存」ボタンをクリックします。</blockquote>
</li>
</ol>
公式サイトの手順通りですが、画面は上記になります。実はこれ必要ありません。
以下のEvernoteのインポートだけで十分です。
<h2>Evernoteにインポートで全てが終わる</h2>
&nbsp;
<ol>
<li>
<blockquote>Evernote for Windows を起動します。</blockquote>
</li>
<li>
<blockquote>「ファイル」メニュー &gt;「インポート」&gt;「Microsoft OneNote」を選択します。</blockquote>
</li>
<li>
<blockquote>「セクションを選択」の項目にチェックを入れてから「OK」ボタンをクリックします。</blockquote>
</li>
<li>
<blockquote>同期ボタンをクリックすると、Evernote アカウントにデータが同期されます。</blockquote>
</li>
</ol>
<a href="/uploads-archive/2016/09/MEZAKI-2.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-12027" src="/uploads-archive/2016/09/MEZAKI-2-300x208.png" alt="mezaki-2" width="300" height="208" srcset="/uploads-archive/2016/09/MEZAKI-2-300x208.png 300w, /uploads-archive/2016/09/MEZAKI-2-228x158.png 228w, /uploads-archive/2016/09/MEZAKI-2.png 649w" sizes="(max-width: 300px) 100vw, 300px" /></a>
公式サイトの手順ですが、インポートからMicrosoft Onenoteを選ぶと
<a href="/uploads-archive/2016/09/MEZAKI-3.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-12029" src="/uploads-archive/2016/09/MEZAKI-3-300x178.png" alt="mezaki-3" width="300" height="178" srcset="/uploads-archive/2016/09/MEZAKI-3-300x178.png 300w, /uploads-archive/2016/09/MEZAKI-3-228x135.png 228w, /uploads-archive/2016/09/MEZAKI-3.png 356w" sizes="(max-width: 300px) 100vw, 300px" /></a>
もう直接インポートしたいノートブックが選択出来ます。
以上。
<h2>オマケ</h2>
<a href="/uploads-archive/2016/09/a0fd9477b4d49e50045eed74abd390f7.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-12032" src="/uploads-archive/2016/09/a0fd9477b4d49e50045eed74abd390f7-300x195.png" alt="%e3%82%a6%e3%82%a3%e3%83%b3%e3%83%88%e3%82%99%e3%82%a6_%e3%81%a8_evernote_basic" width="300" height="195" srcset="/uploads-archive/2016/09/a0fd9477b4d49e50045eed74abd390f7-300x195.png 300w, /uploads-archive/2016/09/a0fd9477b4d49e50045eed74abd390f7-768x500.png 768w, /uploads-archive/2016/09/a0fd9477b4d49e50045eed74abd390f7-1024x666.png 1024w, /uploads-archive/2016/09/a0fd9477b4d49e50045eed74abd390f7-228x148.png 228w, /uploads-archive/2016/09/a0fd9477b4d49e50045eed74abd390f7.png 1528w" sizes="(max-width: 300px) 100vw, 300px" /></a>
2台のアカウント制御は、既に実装されており、久しぶりにログインしたら他で同期していたものを選択しました。
意図的に、3台の端末でログインをしてみて同期ボタンを押すと
<a href="/uploads-archive/2016/09/a5bc6c97026bd37fa86ae4e6b7f6d337.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-12033" src="/uploads-archive/2016/09/a5bc6c97026bd37fa86ae4e6b7f6d337-300x195.png" alt="%e3%82%a6%e3%82%a3%e3%83%b3%e3%83%88%e3%82%99%e3%82%a6_%e3%81%a8_evernote_basic-2" width="300" height="195" srcset="/uploads-archive/2016/09/a5bc6c97026bd37fa86ae4e6b7f6d337-300x195.png 300w, /uploads-archive/2016/09/a5bc6c97026bd37fa86ae4e6b7f6d337-768x500.png 768w, /uploads-archive/2016/09/a5bc6c97026bd37fa86ae4e6b7f6d337-1024x666.png 1024w, /uploads-archive/2016/09/a5bc6c97026bd37fa86ae4e6b7f6d337-228x148.png 228w, /uploads-archive/2016/09/a5bc6c97026bd37fa86ae4e6b7f6d337.png 1534w" sizes="(max-width: 300px) 100vw, 300px" /></a>
こんなポップアップが出て来る仕様になっておりました。
しばらくは、メインのPC1台、スマホ1台で他はウェブ版でログインするという仕様で過ごしてみたいと思います。
&nbsp;
※アイキャッチ画像は、一度OneNoteから舞い戻ってきたの図
<a href="https://www.onenote.com/import-evernote-to-onenote" target="_blank">https://www.onenote.com/import-evernote-to-onenote</a>
&nbsp;
&nbsp;

medium_onetoevernote.png

small_onetoevernote.png

thumbnail_onetoevernote.png

onetoevernote.png

【土下座】OnenoteからEvernoteに戻る方法【要Windows】

コーダーが作ってくれたウェブページを確認するのに、今まではChromeの「要素を検証」を使うことが多かったのですが、はるかに効率化が出来るツールを教えて頂きました。
教えて頂いた方は、日本でも有数の制作会社様で時には何千ページにも及ぶ大規模サイトを作って来た会社さんで同時に何千ページのチェックをしてきたことで圧倒的なノウハウを構築されていました。
「要素を検証」や「ソースを表示」するだけでは、不十分でチェックをするには、Firefoxの拡張機能その名も「<a href="https://addons.mozilla.org/ja/firefox/addon/web-developer/">Web Developer</a>」です。
<h2>何故Firefoxなのか</h2>
chrome版でも同じ作者が「<a href="https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm">WebDeveloper</a>」を公開していますが、Firefoxのみツールバーを追加することが出来ます。
<a href="/uploads-archive/2016/09/98c11c99f7759ba00841adcabf40669d.png"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-11882" src="/uploads-archive/2016/09/98c11c99f7759ba00841adcabf40669d.png" alt="スクリーンショット_H28_09_06_14_21" width="2554" height="218" srcset="/uploads-archive/2016/09/98c11c99f7759ba00841adcabf40669d.png 2554w, /uploads-archive/2016/09/98c11c99f7759ba00841adcabf40669d-300x26.png 300w, /uploads-archive/2016/09/98c11c99f7759ba00841adcabf40669d-768x66.png 768w, /uploads-archive/2016/09/98c11c99f7759ba00841adcabf40669d-1024x87.png 1024w, /uploads-archive/2016/09/98c11c99f7759ba00841adcabf40669d-228x19.png 228w" sizes="(max-width: 2554px) 100vw, 2554px" /></a>
ツールバーがあるかないかでこれまた作業効率が一段と変わります。
余談ですが、chromeが出る前からWebの仕事をしている方ってFirefoxの根強いファンが多い気がします。
<h2>便利機能抜粋</h2>
<h3>altを表示</h3>
<a href="/uploads-archive/2016/09/0a1e3fc63ccedf5895f54cc4aeefd0ea.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-11885" src="/uploads-archive/2016/09/0a1e3fc63ccedf5895f54cc4aeefd0ea-300x158.png" alt="越境EC｜システム開発｜スターフィールド株式会社" width="300" height="158" srcset="/uploads-archive/2016/09/0a1e3fc63ccedf5895f54cc4aeefd0ea-300x158.png 300w, /uploads-archive/2016/09/0a1e3fc63ccedf5895f54cc4aeefd0ea-768x406.png 768w, /uploads-archive/2016/09/0a1e3fc63ccedf5895f54cc4aeefd0ea-1024x541.png 1024w, /uploads-archive/2016/09/0a1e3fc63ccedf5895f54cc4aeefd0ea-228x120.png 228w, /uploads-archive/2016/09/0a1e3fc63ccedf5895f54cc4aeefd0ea.png 1276w" sizes="(max-width: 300px) 100vw, 300px" /></a>
こんな感じで画像に隣接する場所にaltを表示してくれます。
altってブラウザ表示しているだけでは見えないので見落としがちになるので本当にありがたいです。
他にも幅や高さを表示したり、パスを表示したり、ファイルサイズを表示したりといったソースを見なければ分からないことが画面上に表示できます。
<h3>フォームの情報を表示</h3>
<a href="/uploads-archive/2016/09/aaf9661e090fc609628512139b616575.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-11886" src="/uploads-archive/2016/09/aaf9661e090fc609628512139b616575-300x158.png" alt="お問い合わせ CAT S EYE" width="300" height="158" srcset="/uploads-archive/2016/09/aaf9661e090fc609628512139b616575-300x158.png 300w, /uploads-archive/2016/09/aaf9661e090fc609628512139b616575-768x406.png 768w, /uploads-archive/2016/09/aaf9661e090fc609628512139b616575-1024x541.png 1024w, /uploads-archive/2016/09/aaf9661e090fc609628512139b616575-228x120.png 228w, /uploads-archive/2016/09/aaf9661e090fc609628512139b616575.png 1276w" sizes="(max-width: 300px) 100vw, 300px" /></a>
もう一つチェックする上で時間を要すものがフォームですが、これもいろいろな操作が出来て、フォームの情報を画面内に表示したり、チェックボックスを外したりといったことが出来ます。
<h3>その他</h3>
<a href="/uploads-archive/2016/09/f81c007da077c22997be1645a4adcd2e.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-11887" src="/uploads-archive/2016/09/f81c007da077c22997be1645a4adcd2e-300x181.png" alt="越境EC｜システム開発｜スターフィールド株式会社_と_Downloads" width="300" height="181" srcset="/uploads-archive/2016/09/f81c007da077c22997be1645a4adcd2e-300x181.png 300w, /uploads-archive/2016/09/f81c007da077c22997be1645a4adcd2e-768x464.png 768w, /uploads-archive/2016/09/f81c007da077c22997be1645a4adcd2e-1024x619.png 1024w, /uploads-archive/2016/09/f81c007da077c22997be1645a4adcd2e-228x138.png 228w" sizes="(max-width: 300px) 100vw, 300px" /></a>
チェック用途ではないですが、そもそもWebDeveloperの機能として、CSSファイルをブラウザ内で閲覧、編集したり、様々なブロック、要素の情報を表示することが可能です。
<h2>まとめ</h2>
普段使いは変わらずChromeを使いつつチェック検証用のブラウザとしてFirefoxが決まりました。

ウェブデザイン確認ツール「Web Developer」

仕事で常用しているメッセージサービス、コミュニケーションサービスとして、Skype、Facebookメッセンジャー、GoogleHongout、Gmailを2アカウント、chatwork、後は個人用Gmailやアカウント持っているだけとなっているが、slack、Whatsupなど溢れ返っています。
常用しているものは常にchromeのタブでピン留めしているというな状態でした。
そうなるとやはり便利な一元管理ツールを開発する人が現れて、今回は二つ見つけたのでご紹介です。
<h2>オールインワンメッセンジャー</h2>
<a href="/uploads-archive/2016/08/482fac77735ce46942cd5b958dd508b6.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-11825" src="/uploads-archive/2016/08/482fac77735ce46942cd5b958dd508b6-300x193.png" alt="482fac77735ce46942cd5b958dd508b6" width="300" height="193" srcset="/uploads-archive/2016/08/482fac77735ce46942cd5b958dd508b6-300x193.png 300w, /uploads-archive/2016/08/482fac77735ce46942cd5b958dd508b6-768x493.png 768w, /uploads-archive/2016/08/482fac77735ce46942cd5b958dd508b6-228x146.png 228w, /uploads-archive/2016/08/482fac77735ce46942cd5b958dd508b6.png 984w" sizes="(max-width: 300px) 100vw, 300px" /></a>
<a href="https://chrome.google.com/webstore/detail/all-in-one-messenger/lainlkmlgipednloilifbppmhdocjbda" target="_blank">https://chrome.google.com/webstore/detail/all-in-one-messenger/lainlkmlgipednloilifbppmhdocjbda</a>
<h2>Franz</h2>
<a href="/uploads-archive/2016/08/franz_screenshot-97ec75912b.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-11826" src="/uploads-archive/2016/08/franz_screenshot-97ec75912b-300x224.png" alt="franz_screenshot-97ec75912b" width="300" height="224" srcset="/uploads-archive/2016/08/franz_screenshot-97ec75912b-300x224.png 300w, /uploads-archive/2016/08/franz_screenshot-97ec75912b-768x574.png 768w, /uploads-archive/2016/08/franz_screenshot-97ec75912b-1024x765.png 1024w, /uploads-archive/2016/08/franz_screenshot-97ec75912b-228x170.png 228w, /uploads-archive/2016/08/franz_screenshot-97ec75912b.png 1362w" sizes="(max-width: 300px) 100vw, 300px" /></a>
<a href="http://meetfranz.com/" target="_blank">http://meetfranz.com/</a>
<h2>形式</h2>
<h3>オールインワンメッセンジャー</h3>
Chromeアプリ
<h3>Franz</h3>
Windows、Mac、Linuxの独立アプリ
<h2>対応サービス数</h2>
<h3>オールインワンメッセンジャー</h3>
<a href="/uploads-archive/2016/08/3f42955c0ffef951da2d54b508745640.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-11827" src="/uploads-archive/2016/08/3f42955c0ffef951da2d54b508745640-244x300.png" alt="3f42955c0ffef951da2d54b508745640" width="244" height="300" srcset="/uploads-archive/2016/08/3f42955c0ffef951da2d54b508745640-244x300.png 244w, /uploads-archive/2016/08/3f42955c0ffef951da2d54b508745640-228x280.png 228w, /uploads-archive/2016/08/3f42955c0ffef951da2d54b508745640.png 702w" sizes="(max-width: 244px) 100vw, 244px" /></a>
31サービス
<h3>Franz</h3>
<a href="/uploads-archive/2016/08/2fea6a28e87c7d445f684844992ef46a.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-11828" src="/uploads-archive/2016/08/2fea6a28e87c7d445f684844992ef46a-300x216.png" alt="2fea6a28e87c7d445f684844992ef46a" width="300" height="216" srcset="/uploads-archive/2016/08/2fea6a28e87c7d445f684844992ef46a-300x216.png 300w, /uploads-archive/2016/08/2fea6a28e87c7d445f684844992ef46a-768x552.png 768w, /uploads-archive/2016/08/2fea6a28e87c7d445f684844992ef46a-228x164.png 228w, /uploads-archive/2016/08/2fea6a28e87c7d445f684844992ef46a.png 964w" sizes="(max-width: 300px) 100vw, 300px" /></a>
23サービス
<h2>UI</h2>
<a href="/uploads-archive/2016/08/d908fb736282b278f1a0fcde7082a195.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-11829" src="/uploads-archive/2016/08/d908fb736282b278f1a0fcde7082a195-300x177.png" alt="d908fb736282b278f1a0fcde7082a195" width="300" height="177" srcset="/uploads-archive/2016/08/d908fb736282b278f1a0fcde7082a195-300x177.png 300w, /uploads-archive/2016/08/d908fb736282b278f1a0fcde7082a195-768x452.png 768w, /uploads-archive/2016/08/d908fb736282b278f1a0fcde7082a195-1024x603.png 1024w, /uploads-archive/2016/08/d908fb736282b278f1a0fcde7082a195-228x134.png 228w" sizes="(max-width: 300px) 100vw, 300px" /></a>
左がオールインワンメッセンジャーで右がFranzです。
Franzは通知のバッチがついていますが、それにしても似てますね。
<a href="/uploads-archive/2016/08/aba302fa363e55c926d38d5f86b46515.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-11830" src="/uploads-archive/2016/08/aba302fa363e55c926d38d5f86b46515-300x177.png" alt="aba302fa363e55c926d38d5f86b46515" width="300" height="177" srcset="/uploads-archive/2016/08/aba302fa363e55c926d38d5f86b46515-300x177.png 300w, /uploads-archive/2016/08/aba302fa363e55c926d38d5f86b46515-768x453.png 768w, /uploads-archive/2016/08/aba302fa363e55c926d38d5f86b46515-1024x603.png 1024w, /uploads-archive/2016/08/aba302fa363e55c926d38d5f86b46515-228x134.png 228w" sizes="(max-width: 300px) 100vw, 300px" /></a>
chatworkを開いた画面ですが、基本的にはブラウザ版を読み込んでいるので差はありません。高さもほぼ一緒です。
<h2>まとめ</h2>
UIもコンセプトもほぼ同一に感じますが、Chromeアプリか独立アプリかは好みでの判断になると思います。Chromeアプリであれば、同期している他のブラウザでもインストールの手間が省けるといった利点も考えられます。
どちらも一元管理が出来、主要なサービスはほぼカバーしています。
対応サービスは多ければいいというものでもないと思いますが、日本ではメジャーなLineも追加されるとより便利になりますね。

さまざまなメッセージングサービスをまとめるツール

3色といってもそれぞれに意味合いは違うのですが、これ使い分けると非常に便利です。
みなさんおなじみのGoogleChromeは一番左のカラフル版だと思います。
これは安定版として提供されているものです。
真ん中の青いアイコンはChromiumというオープンソースのブラウザで、GoogleがこのChromiumのソースを元にGoogle独自の機能を追加してリリースしているのがChromeになります。
一番右の金色のアイコンはChrome Canaryといって、安定版に乗る前の新機能を搭載してテストをするためのバージョンで、いわゆるベータ版よりも前のアルファ版に近いようなイメージです。
バグがある前提のバージョンではありますが、既にchromeの大部分は安定していて、頻繁に落ちるというようなこともなく、どちらかと言うと新機能追加がメインかと思います。
<h2>3つのchromeの何が便利？</h2>
<a href="/uploads-archive/2016/08/dcc3650b7bb248afb5557ca9c73df37f.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-11715" src="/uploads-archive/2016/08/dcc3650b7bb248afb5557ca9c73df37f-300x116.png" alt="dcc3650b7bb248afb5557ca9c73df37f" width="300" height="116" srcset="/uploads-archive/2016/08/dcc3650b7bb248afb5557ca9c73df37f-300x116.png 300w, /uploads-archive/2016/08/dcc3650b7bb248afb5557ca9c73df37f-768x297.png 768w, /uploads-archive/2016/08/dcc3650b7bb248afb5557ca9c73df37f-1024x396.png 1024w, /uploads-archive/2016/08/dcc3650b7bb248afb5557ca9c73df37f-228x88.png 228w" sizes="(max-width: 300px) 100vw, 300px" /></a>
ほぼこれを伝えたかったということに尽きるのですが、それぞれが独立したアプリケーションとして使うことが出来ます。
Chromeのベータ版やDEV版もダウンロード出来るのですが、これは、通常のchromeを上書きしてしまうので、独立したアプリケーションになりません。
<a href="https://www.google.co.jp/chrome/browser/beta.html" target="_blank">https://www.google.co.jp/chrome/browser/beta.html</a>
&nbsp;
独立したアプリケーションになることで
自分での使い方として以下になります。
<ul>
<li>Googleアカウントが複数あるのでそれぞれ異なるアプリでログインしておく。 
→一つのアプリでマルチログインも出来ますがより便利</li>
<li>検証専用ブラウザにする。 
→スマートフォン幅を頻繁に確認する時など便利</li>
</ul>
他にもいろいろな用途が考えられます。
<h2>ダウンロード場所</h2>
<h3>Google Chrome Canary</h3>
<a href="https://www.google.co.jp/chrome/browser/canary.html" target="_blank">https://www.google.co.jp/chrome/browser/canary.html</a>
<h3>Chromium</h3>
<a href="https://download-chromium.appspot.com/" target="_blank">https://download-chromium.appspot.com/</a>
<h4>おまけ</h4>
Chromiumは、自動アップデート機能がないので、下記のプラグインを入れて置くと随時バージョンを確認して最新バージョンをダウンロードしてくれます。
<a href="https://chrome.google.com/webstore/detail/chromium-updater/ccgjmadhdidfloacagcnnodbkedkjedg?hl=ja" target="_blank">https://chrome.google.com/webstore/detail/chromium-updater/ccgjmadhdidfloacagcnnodbkedkjedg?hl=ja</a>

large_chorme_chromium_canary-1024x311.png

medium_chorme_chromium_canary-1024x311.png

small_chorme_chromium_canary-1024x311.png

thumbnail_chorme_chromium_canary-1024x311.png

chorme_chromium_canary-1024x311.png

3色のGoogleChrome「chrome chromium canary」

久しぶりにエクセルをがっつり設定してみました。
普段からエクセルを常用はしておりますが、大体は数字をまとめるための四則演算の関数やデータを自動計算してくれるvlookup関数くらいまででしたが、今回は人力でチェックする時間を省くという目的のために「入力規則」を設定して、所定のフォーマット以外入力をさせないエクセルを作りました。
入力規則でここまで出来るのか〜ということを調べながら実践したことを共有します。
<h2>リスト形式</h2>
<a href="/uploads-archive/2016/07/list.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-11498" src="/uploads-archive/2016/07/list-300x169.png" alt="list" width="300" height="169" srcset="/uploads-archive/2016/07/list-300x169.png 300w, /uploads-archive/2016/07/list-768x434.png 768w, /uploads-archive/2016/07/list-228x129.png 228w, /uploads-archive/2016/07/list.png 793w" sizes="(max-width: 300px) 100vw, 300px" /></a>
まずは、入力規則の基本から。
このような、リスト形式、htmlだとプルダウンメニューと言ったりすると思います。
<a href="/uploads-archive/2016/07/1c062e3e5f9db458dc616440f6fe0ece.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-11499" src="/uploads-archive/2016/07/1c062e3e5f9db458dc616440f6fe0ece-300x214.png" alt="1c062e3e5f9db458dc616440f6fe0ece" width="300" height="214" srcset="/uploads-archive/2016/07/1c062e3e5f9db458dc616440f6fe0ece-300x214.png 300w, /uploads-archive/2016/07/1c062e3e5f9db458dc616440f6fe0ece-768x547.png 768w, /uploads-archive/2016/07/1c062e3e5f9db458dc616440f6fe0ece-1024x730.png 1024w, /uploads-archive/2016/07/1c062e3e5f9db458dc616440f6fe0ece-228x163.png 228w, /uploads-archive/2016/07/1c062e3e5f9db458dc616440f6fe0ece.png 1462w" sizes="(max-width: 300px) 100vw, 300px" /></a>
<ol>
<li>リストの中の要素を別のセルで作る。（後で非表示にするか、別シートなどで）</li>
<li>データ＞入力規則</li>
<li>許可：リスト</li>
<li>元の値：1で作成したセルを選択</li>
</ol>
でリスト形式の入力規則が作成出来ます。
<h2>文字数制限</h2>
<a href="/uploads-archive/2016/07/73d4cadefa007b7c802e5e25ba5e04c9.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-11500" src="/uploads-archive/2016/07/73d4cadefa007b7c802e5e25ba5e04c9-300x174.png" alt="73d4cadefa007b7c802e5e25ba5e04c9" width="300" height="174" srcset="/uploads-archive/2016/07/73d4cadefa007b7c802e5e25ba5e04c9-300x174.png 300w, /uploads-archive/2016/07/73d4cadefa007b7c802e5e25ba5e04c9-768x445.png 768w, /uploads-archive/2016/07/73d4cadefa007b7c802e5e25ba5e04c9-1024x594.png 1024w, /uploads-archive/2016/07/73d4cadefa007b7c802e5e25ba5e04c9-228x132.png 228w, /uploads-archive/2016/07/73d4cadefa007b7c802e5e25ba5e04c9.png 1514w" sizes="(max-width: 300px) 100vw, 300px" /></a>
<ol>
<li>データ＞入力規則</li>
<li>許可：文字列（長さ指定）</li>
<li>データ：次の値以下</li>
<li>最大値：50</li>
</ol>
これで50文字以下の設定が出来ます。
<a href="/uploads-archive/2016/07/bbc3662ed4bd8b117a9afcfc72f2c877.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-11501" src="/uploads-archive/2016/07/bbc3662ed4bd8b117a9afcfc72f2c877-300x146.png" alt="bbc3662ed4bd8b117a9afcfc72f2c877" width="300" height="146" srcset="/uploads-archive/2016/07/bbc3662ed4bd8b117a9afcfc72f2c877-300x146.png 300w, /uploads-archive/2016/07/bbc3662ed4bd8b117a9afcfc72f2c877-768x374.png 768w, /uploads-archive/2016/07/bbc3662ed4bd8b117a9afcfc72f2c877-1024x498.png 1024w, /uploads-archive/2016/07/bbc3662ed4bd8b117a9afcfc72f2c877-228x111.png 228w, /uploads-archive/2016/07/bbc3662ed4bd8b117a9afcfc72f2c877.png 1044w" sizes="(max-width: 300px) 100vw, 300px" /></a>
半角、全角の判断はなく、改行も一文字として判別され、上記のケースですと最後の7入力した段階でエラーが出ます。
<h2>URL形式</h2>
<a href="/uploads-archive/2016/07/1eb57ee8b3910ad004684740dfb16b4e.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-11502" src="/uploads-archive/2016/07/1eb57ee8b3910ad004684740dfb16b4e-300x140.png" alt="1eb57ee8b3910ad004684740dfb16b4e" width="300" height="140" srcset="/uploads-archive/2016/07/1eb57ee8b3910ad004684740dfb16b4e-300x140.png 300w, /uploads-archive/2016/07/1eb57ee8b3910ad004684740dfb16b4e-768x358.png 768w, /uploads-archive/2016/07/1eb57ee8b3910ad004684740dfb16b4e-1024x477.png 1024w, /uploads-archive/2016/07/1eb57ee8b3910ad004684740dfb16b4e-228x106.png 228w, /uploads-archive/2016/07/1eb57ee8b3910ad004684740dfb16b4e.png 1880w" sizes="(max-width: 300px) 100vw, 300px" /></a>
<ol>
<li>データ＞入力規則</li>
<li>許可：ユーザー設定</li>
<li>数式：=AND(LEN(セル名)=LENB(セル名),ISERROR(FIND(&#8221; &#8220;,セル名)))</li>
</ol>
タイトルにも上げた設定ですが、正確には、全角と半角スペースを許可しない設定になります。半角英数字と記号は許可されるので実用性ではこれで十分と判断しました。
ユーザー設定を選択するとエクセルが持っている各種関数をそのまま使えます。
LEN関数はそもそも、バイト数をカウントする関数でLENBは、半角を1バイト、全角を2バイトとカウントします。これを入力規則に応用することで、LEN=LENBが同じでないといけない。つまり、全角が入っているとLENBの値が大きくなってしまうので、エラーが出るという設定になります。
そこに、半角スペースを見つけたらエラーを出す「ISERROR(FIND(&#8221; &#8220;,セル名))」という記述を書き、どちらか一つで許可しないようにANDで囲います。
ORで囲んでしまうと、全角文字かつ半角スペースの両方がないとエラーが出ないので注意です。
<h2>他にもいろいろ</h2>
<ul>
<li>整数</li>
<li>少数点数</li>
<li>日付</li>
<li>時刻</li>
</ul>
といった形式で制限が出来つつ、ユーザー設定で関数を駆使すれば、もっといろいろことが出来そうですね。
<h2>エラーメッセージの設定</h2>
<a href="/uploads-archive/2016/07/db21323066c8557ac767a3ce8c29ecc9.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-11504" src="/uploads-archive/2016/07/db21323066c8557ac767a3ce8c29ecc9-300x118.png" alt="db21323066c8557ac767a3ce8c29ecc9" width="300" height="118" srcset="/uploads-archive/2016/07/db21323066c8557ac767a3ce8c29ecc9-300x118.png 300w, /uploads-archive/2016/07/db21323066c8557ac767a3ce8c29ecc9-768x302.png 768w, /uploads-archive/2016/07/db21323066c8557ac767a3ce8c29ecc9-1024x403.png 1024w, /uploads-archive/2016/07/db21323066c8557ac767a3ce8c29ecc9-228x90.png 228w, /uploads-archive/2016/07/db21323066c8557ac767a3ce8c29ecc9.png 1102w" sizes="(max-width: 300px) 100vw, 300px" /></a>
デフォルト設定ですと、間違っていることしか分からない不親切なメッセージになります。
<a href="/uploads-archive/2016/07/0a8ef97d27c6c8668b41d8533b1cdd10.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-11505" src="/uploads-archive/2016/07/0a8ef97d27c6c8668b41d8533b1cdd10-300x134.png" alt="0a8ef97d27c6c8668b41d8533b1cdd10" width="300" height="134" srcset="/uploads-archive/2016/07/0a8ef97d27c6c8668b41d8533b1cdd10-300x134.png 300w, /uploads-archive/2016/07/0a8ef97d27c6c8668b41d8533b1cdd10-768x344.png 768w, /uploads-archive/2016/07/0a8ef97d27c6c8668b41d8533b1cdd10-1024x458.png 1024w, /uploads-archive/2016/07/0a8ef97d27c6c8668b41d8533b1cdd10-228x102.png 228w, /uploads-archive/2016/07/0a8ef97d27c6c8668b41d8533b1cdd10.png 1940w" sizes="(max-width: 300px) 100vw, 300px" /></a>
<ol>
<li>データ＞入力規則</li>
<li>エラーメッセージタブ</li>
</ol>
で設定することが出来、入力規則に応じたメッセージを出して上げれば親切になります。

エクセルでURL形式のみ許可する入力規則

Evernoteは常に開いているアプリの一つでした。
Evernoteが謳う「あらゆる情報をまとめて記憶」の通りに、会議の打ち合わせのメモや思いついたことの殴り書きから気になったウェブページの保存など、898のノートを作成していました。
会社のPC、家のPC、スマートフォン、タブレットにアプリをインストールして、いつでもどこでもEvernoteに放り込むというスタイルを確立しおそらく5年以上は使っていました。
がしかし、サービス内容の改訂があり、無料プランではデバイスが2台までに制限と有料プランの値上げが発表されました。
<blockquote data-secret="rw9feARHoR" class="wp-embedded-content"><a href="https://blog.evernote.com/jp/2016/06/29/53395">Evernote の価格プランの改定について</a></blockquote>
<iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="position: absolute; clip: rect(1px, 1px, 1px, 1px);" src="https://blog.evernote.com/jp/2016/06/29/53395/embed#?secret=rw9feARHoR" data-secret="rw9feARHoR" width="500" height="282" title="埋め込まれた WordPress の投稿" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
この改訂自体にはとやかく言うことはなく、営利企業だからそういう判断もあるよな〜ということで、デバイス2台制限はとてもストレスになってしまうので、今まで無料で使わせてくれてありがとうということで、Microsoftが提供する類似サービスにOne note移行をしてみることにしました。泣く泣く。
One noteは完全無料で提供されていて、Officeにビルトインされているか、Windows、MacのAppstoreで入手可能です。このあたりは、Onenote単体で儲けなくてもいいビジネスモデルの違いですね。
<h2>移行ツール</h2>
で移行はすごく簡単というか、移行ツールを用意してくれています。
<a href="https://www.onenote.com/import-evernote-to-onenote" target="_blank">https://www.onenote.com/import-evernote-to-onenote</a>
現在Windowsのソフトだけです。
（これのために、Windowsを1台セットアップしました。）
移行ツールの提供ページではご丁寧に比較をしてくれているので引用します。
<table class="SectionTable">
<tbody>
<tr style="height: 24.8125px;">
<th></th>
<th class="OneNoteColor" style="height: 24.8125px;">OneNote</th>
<th class="EvernoteColor" style="height: 24.8125px;">Evernote</th>
</tr>
<tr style="height: 48px;">
<td style="height: 48px;">Windows、Mac、iOS、Android、Web で利用可能</td>
<td style="height: 48px;"><img decoding="async" class="SectionTableImage" src="https://site-cdn.onenote.net/1672111550_Images/E2ON_CheckMark.png" /></td>
<td style="height: 48px;"><img decoding="async" class="SectionTableImage" src="https://site-cdn.onenote.net/1672111550_Images/E2ON_CheckMark.png" /></td>
</tr>
<tr style="height: 72px;">
<td style="height: 72px;">デバイス間でノートを同期する</td>
<td style="height: 72px;"><img decoding="async" class="SectionTableImage" src="https://site-cdn.onenote.net/1672111550_Images/E2ON_CheckMark.png" /></td>
<td style="height: 72px;">Evernote Basic では 2 台のデバイスに制限されます。デバイス間で同期するには、Evernote プラスまたはプレミアムが必要です。</td>
</tr>
<tr style="height: 48px;">
<td style="height: 48px;">モバイルのメモにオフラインでアクセス</td>
<td style="height: 48px;"><img decoding="async" class="SectionTableImage" src="https://site-cdn.onenote.net/1672111550_Images/E2ON_CheckMark.png" /></td>
<td style="height: 48px;">Evernote Plus または Premium が必要</td>
</tr>
<tr style="height: 48px;">
<td style="height: 48px;">毎月無制限のアップロード</td>
<td style="height: 48px;"><img decoding="async" class="SectionTableImage" src="https://site-cdn.onenote.net/1672111550_Images/E2ON_CheckMark.png" /></td>
<td style="height: 48px;">60 MB/月 (無料) 
1 GB/月 (Evernote Plus)</td>
</tr>
<tr style="height: 72px;">
<td style="height: 72px;">自由形式のキャンバスを使用してページの任意の場所に書き込む</td>
<td style="height: 72px;"><img decoding="async" class="SectionTableImage" src="https://site-cdn.onenote.net/1672111550_Images/E2ON_CheckMark.png" /></td>
<td style="height: 72px;"><img decoding="async" class="SectionTableImage" src="https://site-cdn.onenote.net/1672111550_Images/E2ON_XMark.png" /></td>
</tr>
<tr style="height: 48px;">
<td style="height: 48px;">コンテンツを他のユーザーと共有</td>
<td style="height: 48px;"><img decoding="async" class="SectionTableImage" src="https://site-cdn.onenote.net/1672111550_Images/E2ON_CheckMark.png" /></td>
<td style="height: 48px;"><img decoding="async" class="SectionTableImage" src="https://site-cdn.onenote.net/1672111550_Images/E2ON_CheckMark.png" /></td>
</tr>
<tr style="height: 39px;">
<td style="height: 39px;">Web からコンテンツをクリップ</td>
<td style="height: 39px;"><img decoding="async" class="SectionTableImage" src="https://site-cdn.onenote.net/1672111550_Images/E2ON_CheckMark.png" /></td>
<td style="height: 39px;"><img decoding="async" class="SectionTableImage" src="https://site-cdn.onenote.net/1672111550_Images/E2ON_CheckMark.png" /></td>
</tr>
<tr style="height: 39px;">
<td style="height: 39px;">メモにメールを保存</td>
<td style="height: 39px;"><img decoding="async" class="SectionTableImage" src="https://site-cdn.onenote.net/1672111550_Images/E2ON_CheckMark.png" /></td>
<td style="height: 39px;">Evernote Plus または Premium が必要</td>
</tr>
<tr style="height: 39px;">
<td style="height: 39px;">名刺のデジタル化</td>
<td style="height: 39px;"><img decoding="async" class="SectionTableImage" src="https://site-cdn.onenote.net/1672111550_Images/E2ON_CheckMark.png" /></td>
<td style="height: 39px;">Evernote Premium が必要</td>
</tr>
</tbody>
</table>
<div class="SectionPara">Evernote は、Evernote 社の商標です</div>
<h2 class="SectionPara">移行後の感想</h2>
比較表の通り、利用の制限などは全くないので安心ですが、アプリの出来が違います。ここは、Evernoteに軍配が上がります。
<a href="/uploads-archive/2016/07/2bf757db9ecb446cf5c1e63e9c80bf07.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-11434" src="/uploads-archive/2016/07/2bf757db9ecb446cf5c1e63e9c80bf07-300x182.png" alt="スクリーンショット 0028-07-12 15.57.07" width="300" height="182" srcset="/uploads-archive/2016/07/2bf757db9ecb446cf5c1e63e9c80bf07-300x182.png 300w, /uploads-archive/2016/07/2bf757db9ecb446cf5c1e63e9c80bf07-768x467.png 768w, /uploads-archive/2016/07/2bf757db9ecb446cf5c1e63e9c80bf07-1024x623.png 1024w, /uploads-archive/2016/07/2bf757db9ecb446cf5c1e63e9c80bf07-228x139.png 228w" sizes="(max-width: 300px) 100vw, 300px" /></a>
mac版の話しですが、ノートが一覧化出来なかったり、スクリーンショットを取るメニューもありませんでした。
ここは逆にEvernoteに全リソースを注入しているメリットでユーザビリティや開発サイクルの差なんだと感じています。
今、現状どちらのアプリにももやもやしてしまう状態になっていますが、one noteの今後にも期待です。

EvernoteからOnenoteへ泣く泣く移行…

パスワードを複数生成するツールを作った。
LaunchCartを導入頂くにあたり、現行の顧客データを以降する際、パスワードが暗号化されていたり、そもそもダウンロードできない場合が多くある。
その場合はパスワードを新規作成し、新しいパスワードを顧客に通知するというのが一般的な解決策だ。
しかし、顧客情報のように時に数千〜万件になるデータに対し、パスワードをそれと同じ数出力してくれるサービスは自分は見たことがない。
そのため、以前作ったこれを複数出力できるように改良した。
<blockquote data-secret="40XTxXJ3YU" class="wp-embedded-content"><a href="/officer/%e3%82%bb%e3%82%ad%e3%83%a5%e3%82%a2%e3%81%aa%e3%83%91%e3%82%b9%e3%83%af%e3%83%bc%e3%83%89%e3%82%92%e8%87%aa%e5%8b%95%e7%94%9f%e6%88%90%e3%81%99%e3%82%8b%e4%be%bf%e5%88%a9%e3%83%84%e3%83%bc%e3%83%ab/">セキュアなパスワードを自動生成する便利ツール</a></blockquote>
<iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="position: absolute; clip: rect(1px, 1px, 1px, 1px);" src="/officer/%e3%82%bb%e3%82%ad%e3%83%a5%e3%82%a2%e3%81%aa%e3%83%91%e3%82%b9%e3%83%af%e3%83%bc%e3%83%89%e3%82%92%e8%87%aa%e5%8b%95%e7%94%9f%e6%88%90%e3%81%99%e3%82%8b%e4%be%bf%e5%88%a9%e3%83%84%e3%83%bc%e3%83%ab/embed/#?secret=40XTxXJ3YU" data-secret="40XTxXJ3YU" width="500" height="282" title="&#8220;セキュアなパスワードを自動生成する便利ツール&#8221; &#8212; スターフィールド株式会社" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
&nbsp;
<a href="/demo/hoshino/66/" target="_blank" class="demo">ツールへのリンク</a>
&nbsp;
&nbsp;

パスワードを複数生成するツール

あくなきガントチャートへの愛。そして、生産性向上への追求。
過去に何度も生産性向上のためのツールを紹介してきましたが、その中でも未だにしっくり来ていなかったのが、スケジュール管理ツールです。
社内のタスク管理はbacklogに集約しているので、その中でスケジュール管理に不都合はないのですがbacklogやredmineなどのツールを使っていないお客様との共有をする時、複数社が集まるチームでのプロジェクトの時、backlogやredmineでも個別にアカウントが必要で初めてのツールを使って頂くとなるとよほど長く続くプロジェクトでもない限り導入ハードルがどうしても高いんですよね。
一番ハードルが低く皆さんに見て頂けるのがエクセルですが、雛形はあれど作成に一番時間が掛かり、軌道修正の必要が生じた時やバージョン管理をしていくのが非常に工数が掛かります。
そんな中でもっと手軽に共有するためのスケジュール管理ツールでしっくり来たものが正直なかったのですが今回、Googleカレンダーと連携する「<a href="https://www.ganttplanner.com/" target="_blank">GANTTplanner</a>」というサービスがあったのでご紹介します。
<h2>料金プラン</h2>
<a href="/uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart0.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-10660" src="/uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart0-300x161.png" alt="GANTTplanner Turn your Google Calendar into a Gantt chart0" width="300" height="161" srcset="/uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart0-300x161.png 300w, /uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart0-768x411.png 768w, /uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart0-1024x548.png 1024w, /uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart0-228x122.png 228w" sizes="(max-width: 300px) 100vw, 300px" /></a>
月＄19からとなっており、初回は30日の無料期間がついています。
<h2>使い方</h2>
<h3>アカウント登録</h3>
<a href="/uploads-archive/2016/05/fa6c054ac417ee8ab0d97c6fe2ac0cf2.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-10661" src="/uploads-archive/2016/05/fa6c054ac417ee8ab0d97c6fe2ac0cf2-291x300.png" alt="許可のリクエスト" width="291" height="300" srcset="/uploads-archive/2016/05/fa6c054ac417ee8ab0d97c6fe2ac0cf2-291x300.png 291w, /uploads-archive/2016/05/fa6c054ac417ee8ab0d97c6fe2ac0cf2-768x793.png 768w, /uploads-archive/2016/05/fa6c054ac417ee8ab0d97c6fe2ac0cf2-228x235.png 228w, /uploads-archive/2016/05/fa6c054ac417ee8ab0d97c6fe2ac0cf2.png 936w" sizes="(max-width: 291px) 100vw, 291px" /></a>
登録はおなじみのGoogle認証なので、フォームの入力などは一切ありませんでした。
<a href="/uploads-archive/2016/05/GANTTplanner__Turn_your_Google_Calendar_into_a_Gantt_chart.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-10662" src="/uploads-archive/2016/05/GANTTplanner__Turn_your_Google_Calendar_into_a_Gantt_chart-300x159.png" alt="GANTTplanner__Turn_your_Google_Calendar_into_a_Gantt_chart" width="300" height="159" srcset="/uploads-archive/2016/05/GANTTplanner__Turn_your_Google_Calendar_into_a_Gantt_chart-300x159.png 300w, /uploads-archive/2016/05/GANTTplanner__Turn_your_Google_Calendar_into_a_Gantt_chart-768x406.png 768w, /uploads-archive/2016/05/GANTTplanner__Turn_your_Google_Calendar_into_a_Gantt_chart-1024x542.png 1024w, /uploads-archive/2016/05/GANTTplanner__Turn_your_Google_Calendar_into_a_Gantt_chart-228x121.png 228w" sizes="(max-width: 300px) 100vw, 300px" /></a>
<h3>ガントチャートの登録</h3>
<a href="/uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart00.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-10663" src="/uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart00-300x161.png" alt="GANTTplanner Turn your Google Calendar into a Gantt chart00" width="300" height="161" srcset="/uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart00-300x161.png 300w, /uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart00-768x411.png 768w, /uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart00-1024x548.png 1024w, /uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart00-228x122.png 228w" sizes="(max-width: 300px) 100vw, 300px" /></a>
ガントチャート用のカレンダーを新規作成します。
今回は「test」という名前で作成しました。
最初、自分の日々の予定を入れているメインのカレンダーを選択してしまったら打ち合わせの予定などが全て読み込まれカオス状態になりました。
<a href="/uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-10665" src="/uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart-300x161.png" alt="GANTTplanner Turn your Google Calendar into a Gantt chart" width="300" height="161" srcset="/uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart-300x161.png 300w, /uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart-768x411.png 768w, /uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart-1024x548.png 1024w, /uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart-228x122.png 228w" sizes="(max-width: 300px) 100vw, 300px" /></a>
あとはガシガシとタスクの大項目を作り、
<a href="/uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart2.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-10666" src="/uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart2-300x161.png" alt="GANTTplanner Turn your Google Calendar into a Gantt chart2" width="300" height="161" srcset="/uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart2-300x161.png 300w, /uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart2-768x411.png 768w, /uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart2-1024x548.png 1024w, /uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart2-228x122.png 228w" sizes="(max-width: 300px) 100vw, 300px" /></a>
横にドラッグして個別タスクを登録していきます。
サービスの画面は英語ですが、日本語も登録いけます。
まさに、横スクロールに最適化したGoogleカレンダーといったところです。
<h3>日、週、月、四半期さまざまな表示形式に対応</h3>
<a href="/uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart6.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-10667" src="/uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart6-300x161.png" alt="GANTTplanner Turn your Google Calendar into a Gantt chart6" width="300" height="161" srcset="/uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart6-300x161.png 300w, /uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart6-768x411.png 768w, /uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart6-1024x548.png 1024w, /uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart6-228x122.png 228w" sizes="(max-width: 300px) 100vw, 300px" /></a>
大きなプロジェクトから小さなプロジェクトまでさまざま対応出来ますし、俯瞰して見るときにも便利ですね。
<h3>ガントチャートのエクスポート</h3>
<a href="/uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart4.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-10657" src="/uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart4-300x161.png" alt="GANTTplanner Turn your Google Calendar into a Gantt chart4" width="300" height="161" srcset="/uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart4-300x161.png 300w, /uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart4-768x411.png 768w, /uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart4-1024x548.png 1024w, /uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart4-228x122.png 228w" sizes="(max-width: 300px) 100vw, 300px" /></a>
画像かPDFでダウンロード出来ます。
<a href="/uploads-archive/2016/05/test_export.jpg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-10658" src="/uploads-archive/2016/05/test_export-300x80.jpg" alt="test_export" width="300" height="80" srcset="/uploads-archive/2016/05/test_export-300x80.jpg 300w, /uploads-archive/2016/05/test_export-768x206.jpg 768w, /uploads-archive/2016/05/test_export-1024x274.jpg 1024w, /uploads-archive/2016/05/test_export-228x61.jpg 228w, /uploads-archive/2016/05/test_export.jpg 1360w" sizes="(max-width: 300px) 100vw, 300px" /></a>
こちらは実際にダウンロードした画像です。
<h3>ガントチャートの共有</h3>
ガントチャートの共有の仕方はGoogleカレンダーに準拠します。
<a href="http://help.ganttplanner.com/knowledgebase/articles/447142-how-do-i-share-a-gantt" target="_blank">http://help.ganttplanner.com/knowledgebase/articles/447142-how-do-i-share-a-gantt</a>
<a href="/uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart5.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-10656" src="/uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart5-300x160.png" alt="GANTTplanner Turn your Google Calendar into a Gantt chart5" width="300" height="160" srcset="/uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart5-300x160.png 300w, /uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart5-768x409.png 768w, /uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart5-1024x546.png 1024w, /uploads-archive/2016/05/GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart5-228x122.png 228w" sizes="(max-width: 300px) 100vw, 300px" /></a>
共有されていないアカウントでアクセスするとこのようにアラートが出て表示されません。
<h3>Googleカレンダーからの見え方</h3>
<a href="/uploads-archive/2016/05/625a077e6f47afd099ac2404e2ad379b.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-10653" src="/uploads-archive/2016/05/625a077e6f47afd099ac2404e2ad379b-300x161.png" alt="スターフィールド株式会社 カレンダー 2016年 5月 15日 の週" width="300" height="161" srcset="/uploads-archive/2016/05/625a077e6f47afd099ac2404e2ad379b-300x161.png 300w, /uploads-archive/2016/05/625a077e6f47afd099ac2404e2ad379b-768x411.png 768w, /uploads-archive/2016/05/625a077e6f47afd099ac2404e2ad379b-1024x548.png 1024w, /uploads-archive/2016/05/625a077e6f47afd099ac2404e2ad379b-228x122.png 228w" sizes="(max-width: 300px) 100vw, 300px" /></a>
testというカレンダーだけを表示しています。
初めて知ったのですが、一つのカレンダーの中でも予定別に色を変更出来るのですね。
<h2>まとめ</h2>
お手軽さでは一番よいツールかもしれません。
必要十分な機能を備えつつ、Googleカレンダーで出来ることをガントチャートツールとして見せてくれています。
共有は申し分ないのですが、エクスポートがもし、スプレッドシートかエクセル形式で出力出来たら最強です。

large_GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart3-1024x548.png

medium_GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart3-1024x548.png

small_GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart3-1024x548.png

thumbnail_GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart3-1024x548.png

GANTTplanner-Turn-your-Google-Calendar-into-a-Gantt-chart3-1024x548.png

Googleカレンダーからガントチャート「GANTTplanner」

こちらの「Bootstrap Editor」はブラウザで使用できるエディタで、 
Bootstrapをベースにしたサイトを制作するのに適したツールになります。
このツール自体もBootstrapを元に作成されてますね！！
Bootstrap自体、CSSのフレームワークとして有名で比較的簡単に、カッコイイデザイン、レイアウトを実装することができるツールです。
ただし、Bootstrap自体の記述ルールみたいなものがあり、使いはじめるには少し学習しないといけません。
初心者やエンジニア向けのBootstrapですが(個人の見解です笑)、ちょっと手間がかかってしまいます。
しかし、この「Bootstrap Editor」は、ブラウザ上でコードの編集ができ、結果も右に即時反映されますので直ぐに使用することができます！！
さらに、テンプレートも用意されているのでそのまま作るのはもちろん、ローカルで作っているコードに、「Bootstrap Editor」で呼び出したテンプレートの一部を持ってきたりとかいろんな使い方ができますね。
<h2>Bootstrapの使い方</h2>
<img decoding="async" src="/uploads-archive/2016/03/Bootstrap-Editor.jpg" alt="Bootstrap Editor" width="640" class="alignnone size-full wp-image-10125" srcset="/uploads-archive/2016/03/Bootstrap-Editor.jpg 994w, /uploads-archive/2016/03/Bootstrap-Editor-300x221.jpg 300w, /uploads-archive/2016/03/Bootstrap-Editor-768x566.jpg 768w, /uploads-archive/2016/03/Bootstrap-Editor-228x168.jpg 228w" sizes="(max-width: 994px) 100vw, 994px" />
<a href="http://www.venezia-works.com/bst/index.html" target="_blank">Bootstrap Editor</a>を開き、「Let&#8217;s Start」ボタンを押します。
それだけでもう使えます！
<img decoding="async" src="/uploads-archive/2016/03/Bootstrap-Editor2-1024x689.jpg" alt="Bootstrap Editor2" width="640" class="alignnone size-large wp-image-10126" srcset="/uploads-archive/2016/03/Bootstrap-Editor2-1024x689.jpg 1024w, /uploads-archive/2016/03/Bootstrap-Editor2-300x202.jpg 300w, /uploads-archive/2016/03/Bootstrap-Editor2-768x517.jpg 768w, /uploads-archive/2016/03/Bootstrap-Editor2-228x153.jpg 228w, /uploads-archive/2016/03/Bootstrap-Editor2.jpg 1268w" sizes="(max-width: 1024px) 100vw, 1024px" />
あとはこの画面でLet&#8217;s コーディングです！！
<h2>Bootstrapの機能</h2>
主な機能は以下になります。
<a href="#menu01">１．CODE</a> 
エディタの色を選択（Emmet使用可能）
<a href="#menu02">２．Template</a> 
Bootstrapテンプレートを選択
<a href="#menu03">3. Nomal(Theme)</a> 
Bootstrapテンプレートの色(Theme)を選択
<a href="#menu04">４．Live View</a> 
編集中のCODEをプレビュー（PC,Tablet,Phone,CodeOnry）
<a href="#menu05">５．Save/Open</a> 
「Save」は編集中のデータを一時保存します。「Open」は保存データを再表示します。
<a href="#menu06">６．Download</a> 
編集中データをHTMLファイルダウンロード
<h3 id="menu01">CODE</h3>
<img decoding="async" src="/uploads-archive/2016/03/Bootstrap-Editor3-1024x714.jpg" alt="Bootstrap Editor3" width="640" class="alignnone size-large wp-image-10117" srcset="/uploads-archive/2016/03/Bootstrap-Editor3-1024x714.jpg 1024w, /uploads-archive/2016/03/Bootstrap-Editor3-300x209.jpg 300w, /uploads-archive/2016/03/Bootstrap-Editor3-768x536.jpg 768w, /uploads-archive/2016/03/Bootstrap-Editor3-228x159.jpg 228w, /uploads-archive/2016/03/Bootstrap-Editor3.jpg 1153w" sizes="(max-width: 1024px) 100vw, 1024px" /> 
コードを書くスタイルを、Chrome,github,tommorrow_night_bright,dreamweaverから選択できます。
<h3 id="menu02">Template</h3>
テンプレートが予め用意されていますので、それを元にコーディングを開始することができます。 
テンプレートの一部分のパーツをコピーして使うという方法もいいですね！
<img decoding="async" src="/uploads-archive/2016/03/ibLdlBsdRf.gif" alt="ibLdlBsdRf" width="640" class="alignnone size-large wp-image-10118" />
<h3 id="menu03">Nomal(Theme)</h3>
サイトに色（テーマ）を変更することができます。豊富に用意されています。 
<img decoding="async" src="/uploads-archive/2016/03/oQN8i8LUAg.gif" alt="oQN8i8LUAg" width="640"class="alignnone size-large wp-image-10119" />
ちなみに、<a href="https://bootswatch.com/">Bootswatch: Free themes for Bootstrap</a>のテーマを使用しているようです。テーマのサイトのプレビューをみるより、このエディタで切り替えた方が断然早くテーマの中身をチェックできますね！
<h3 id="menu04">Live View</h3>
左側でソースを編集し、その編集した結果が即時右側でプレビューとして表示されています。 
直感的に幅を変えられるのが素晴らしく、スマホ、PCのチェックもラクにできます！
<a href="/uploads-archive/2016/03/9Gjh4CWqxM.gif" rel="attachment wp-att-10121"><img decoding="async" src="/uploads-archive/2016/03/9Gjh4CWqxM.gif" alt="9Gjh4CWqxM" width="640" class="alignnone size-large wp-image-10121" /></a>
<h3 id="menu05">Save/Open</h3>
「Save」で今編集しているコードを一時保存します。 
「Open」で一時保存したコードを表示します。
ブラウザの「localstorage」に保存しているので、 
違うブラウザを使用すると保存されてないので注意！(当たり前か&#8230;)
<h3 id="menu06">Download</h3>
編集したhtmlをダウンロードします。 
bootstrap.htmlがダウンロードできます。
こんなに簡単に無料で使用できるツールはなかなかないと思います。（しかも日本製） 
おそらく今後もパワーアップしそうな予感がありますので、ますます期待です！！
Bootstrapを扱う方はぜひ使用してみると良いと思います！！

無料かつログイン不要のブラウザエディタ「Bootstrap Editor」

WordPressやLaunchCartのように高機能なCMS機能がついていれば問題ないのだが、 
システムや環境によってsitemapを自動生成できない場合がたまにある。 
sitemap.xmlはSEOにおいての重要度が高く、設置しないわけにはいかず 
このような場合には手動か、それが難しければ今回紹介するようなツールを使って設置しなければならない。
今回はURLからクローリングして自動でsitemap.xmlを生成してくれるタイプの中から 
web上での評判が良いと思ったものを10点比較してみた。
&nbsp;
<table>
<tbody>
<tr>
<td rowspan="2"></td>
<td colspan="4">オプション</td>
<td rowspan="2">Priorityの指定方法</td>
<td rowspan="2">最大取得可能URL</td>
</tr>
<tr>
<td>lastmod</td>
<td>changefreq</td>
<td>priority</td>
<td>その他</td>
</tr>
<tr>
<td><a href="#sm1">1</a></td>
<td>◯</td>
<td>◯</td>
<td>◯</td>
<td>除外ディレクトリ / 同一タイトルURLの除外</td>
<td>自動(階層に応じる)</td>
<td>1,000</td>
</tr>
<tr>
<td><a href="#sm2">2</a></td>
<td>◯</td>
<td>◯</td>
<td>◯</td>
<td>&#8211;</td>
<td>自動</td>
<td>500</td>
</tr>
<tr>
<td><a href="#sm3">3</a></td>
<td>◯</td>
<td>◯</td>
<td>◯</td>
<td>除外ディレクトリ / 同一タイトルURLの除外</td>
<td>自動</td>
<td>1000</td>
</tr>
<tr>
<td><a href="#sm4">4</a></td>
<td>◯</td>
<td>◯</td>
<td>◯</td>
<td>セッションの削除</td>
<td>自動又は固定値</td>
<td>3500</td>
</tr>
<tr>
<td><a href="#sm5">5</a></td>
<td>◯</td>
<td>◯</td>
<td>◯</td>
<td>拡張子指定、getパラメータ等複数</td>
<td>固定値</td>
<td>無制限</td>
</tr>
<tr>
<td><a href="#sm6">6</a></td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>&#8211;</td>
<td>&#8211;</td>
<td>500</td>
</tr>
<tr>
<td><a href="#sm7">7</a></td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>&#8211;</td>
<td>&#8211;</td>
<td>500</td>
</tr>
<tr>
<td><a href="#sm8">8</a></td>
<td>◯</td>
<td>◯</td>
<td>◯</td>
<td>セッションの削除</td>
<td>固定</td>
<td>300</td>
</tr>
<tr>
<td><a href="#sm9">9</a></td>
<td>◯</td>
<td>◯</td>
<td>◯</td>
<td>&#8211;</td>
<td>固定</td>
<td>?</td>
</tr>
<tr>
<td><a href="#sm10">10</a></td>
<td>◯</td>
<td>◯</td>
<td>◯</td>
<td>Auto upload、Auto ping</td>
<td>&#8211;</td>
<td>5000</td>
</tr>
</tbody>
</table>
<h2></h2>
<h2 id="sm1">1. sitemapxml.jp</h2>
<img decoding="async" loading="lazy" class="alignnone size-full wp-image-10085" src="/uploads-archive/2016/03/1.png" alt="1" width="660" height="384" srcset="/uploads-archive/2016/03/1.png 660w, /uploads-archive/2016/03/1-300x175.png 300w, /uploads-archive/2016/03/1-228x133.png 228w" sizes="(max-width: 660px) 100vw, 660px" />
http://www.sitemapxml.jp/
安定感があり使いやすい
&nbsp;
<h2 id="sm2">2. xml-sitemaps.com</h2>
<img decoding="async" loading="lazy" class="alignnone size-full wp-image-10088" src="/uploads-archive/2016/03/2-1.png" alt="2" width="608" height="547" srcset="/uploads-archive/2016/03/2-1.png 608w, /uploads-archive/2016/03/2-1-300x270.png 300w, /uploads-archive/2016/03/2-1-228x205.png 228w" sizes="(max-width: 608px) 100vw, 608px" />
<a href="https://www.xml-sitemaps.com/" target="_blank">https://www.xml-sitemaps.com/</a>
使いやすいが500件の上限が人によっては少ないかも
&nbsp;
<h2 id="sm3">3. xml-seo.com</h2>
<img decoding="async" loading="lazy" class="alignnone size-full wp-image-10089" src="/uploads-archive/2016/03/3-1.png" alt="3" width="660" height="404" srcset="/uploads-archive/2016/03/3-1.png 660w, /uploads-archive/2016/03/3-1-300x184.png 300w, /uploads-archive/2016/03/3-1-228x140.png 228w" sizes="(max-width: 660px) 100vw, 660px" />
<a href="http://xml-seo.com/sitemap/input" target="_blank">http://xml-seo.com/sitemap/input</a>
1とほぼ同じ。提供元が同じか
&nbsp;
<h2 id="sm4">4. web-site-map.com</h2>
<img decoding="async" loading="lazy" class="alignnone size-full wp-image-10092" src="/uploads-archive/2016/03/4-1.png" alt="4" width="574" height="628" srcset="/uploads-archive/2016/03/4-1.png 574w, /uploads-archive/2016/03/4-1-274x300.png 274w, /uploads-archive/2016/03/4-1-228x249.png 228w" sizes="(max-width: 574px) 100vw, 574px" />
<a href="http://www.web-site-map.com/" target="_blank">http://www.web-site-map.com/</a>
使いやすく上限も多いが、認証がめんどくさい
<h2 id="sm5">5. xmlsitemapgenerator.org</h2>
<img decoding="async" loading="lazy" class="alignnone size-full wp-image-10083" src="/uploads-archive/2016/03/5.png" alt="5" width="615" height="649" srcset="/uploads-archive/2016/03/5.png 615w, /uploads-archive/2016/03/5-284x300.png 284w, /uploads-archive/2016/03/5-228x241.png 228w" sizes="(max-width: 615px) 100vw, 615px" />
<a href="https://xmlsitemapgenerator.org/" target="_blank">https://xmlsitemapgenerator.org/</a>
オプションが多い。細かな設定をしたい人にはおすすめ
&nbsp;
<h2 id="sm6">6. www.sitemapdoc.com</h2>
<img decoding="async" loading="lazy" class="alignnone size-full wp-image-10084" src="/uploads-archive/2016/03/6.png" alt="6" width="660" height="78" srcset="/uploads-archive/2016/03/6.png 660w, /uploads-archive/2016/03/6-300x35.png 300w, /uploads-archive/2016/03/6-228x27.png 228w" sizes="(max-width: 660px) 100vw, 660px" />
<a href="http://www.sitemapdoc.com/" target="_blank">http://www.sitemapdoc.com/</a>
シンプル
&nbsp;
<h2 id="sm7">7. pro-sitemaps.com</h2>
<img decoding="async" loading="lazy" class="alignnone size-full wp-image-10086" src="/uploads-archive/2016/03/7.png" alt="7" width="604" height="131" srcset="/uploads-archive/2016/03/7.png 604w, /uploads-archive/2016/03/7-300x65.png 300w, /uploads-archive/2016/03/7-228x49.png 228w" sizes="(max-width: 604px) 100vw, 604px" />
<a href="https://pro-sitemaps.com/" target="_blank">https://pro-sitemaps.com/</a>
シンプル
<h2 id="sm8">8. xmlsitemap.com</h2>
<img decoding="async" loading="lazy" class="alignnone size-full wp-image-10087" src="/uploads-archive/2016/03/8.png" alt="8" width="605" height="501" srcset="/uploads-archive/2016/03/8.png 605w, /uploads-archive/2016/03/8-300x248.png 300w, /uploads-archive/2016/03/8-228x189.png 228w" sizes="(max-width: 605px) 100vw, 605px" />
<a href="http://xmlsitemap.com/create-sitemap/" target="_blank">http://xmlsitemap.com/create-sitemap/</a>
使いやすいが上限が少ない
&nbsp;
<h2 id="sm9">9. xsitemap.com</h2>
<img decoding="async" loading="lazy" class="alignnone size-full wp-image-10090" src="/uploads-archive/2016/03/9.png" alt="9" width="645" height="388" srcset="/uploads-archive/2016/03/9.png 645w, /uploads-archive/2016/03/9-300x180.png 300w, /uploads-archive/2016/03/9-228x137.png 228w" sizes="(max-width: 645px) 100vw, 645px" />
<a href="http://www.xsitemap.com/" target="_blank">http://www.xsitemap.com/</a>
シンプル
&nbsp;
<h2 id="sm10">10. freesitemapgenerator.com</h2>
<img decoding="async" loading="lazy" class="alignnone size-full wp-image-10091" src="/uploads-archive/2016/03/10.png" alt="10" width="411" height="520" srcset="/uploads-archive/2016/03/10.png 411w, /uploads-archive/2016/03/10-237x300.png 237w, /uploads-archive/2016/03/10-228x288.png 228w" sizes="(max-width: 411px) 100vw, 411px" />
<a href="https://freesitemapgenerator.com/new-account.html" target="_blank">https://freesitemapgenerator.com/new-account.html</a>
上限が多い

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - タグ: #ソフト・ツール

2020/07/04

2018/11/14

2018/03/14

2018/02/21

2018/01/16

2017/05/10

2017/03/15

2016/10/12

2016/09/21

2016/09/06

2016/08/30

2016/08/10

2016/07/19

2016/07/13

2016/06/15

2016/05/18

2016/03/30

2016/03/29