Youtubeが流行っていることもあり、ホームページのトップビューで動画を流すサイトが多くなりました。
ホームページ上で動画が流れるようなサイトは中身のコンテンツも凝っていることが多いので「すごく難しい事をやっているんだろうなぁ…」と思ってしまいますが、実はそんなことはなかったりします。
ということで、今回は表題の通り「動画を自動再生させて、動画の中央に画像を被せて表示する方法」を紹介します。

この記事を読んでできる事（サンプル）

下記のように、動画の上に画像を被せた表示ができるようになります。

準備は簡単！動画と画像を用意するだけ！

画像は弊社のロゴを使用します。
動画は著作権フリーで非常に良質な動画がダウンロードできる「pixabay」様のサイトから取得しました。
準備はたったこれだけですが、単純な技術だからこそ素材の質が非常に重要になるので、素材の選定にはこだわりましょう！

設置するHTMLコード

設置するコードは下記になります。

<div id="movei-contents">
  <video id="video" src="https://incloop.com/wp-content/uploads/2020/08/fishing.mp4" loop autoplay muted></video>
  <img src="https://incloop.com/wp-content/uploads/2020/08/logo.png">
</div>

上記のように、videoタグとimgタグに用意した素材のURLを貼り付けるだけでOKです。
注意点としては、videoタグには「loop」「autoplay」「muted」という属性を付けています。
「loop」は映像のループ、「autoplay」は自動再生、「muted」は動画の消音設定になります。
GoogleChromeでは「muted」属性が付いていないと「autoplay」が動かないので、その点のみ注意が必要です。

詳細は下記記事が参考になりますので、詳しく調べたい方はリンク先をご確認ください。
video: 動画埋め込み要素 – HTML: HyperText Markup Language | MDN

CSS（スタイルシート）の設定

用意するコードはたった3つのセレクタになります。

<style>
#movei-contents {
  position: relative;
  display: inline-block;
}
#movei-contents video {
  width: 100%;
}
#movei-contents img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
  padding: 50px 100px;
  background-color: rgba(255,255,255,0.6);
}
</style>

これだけのコードで、今風のホームページによくあるサンプルのような表示が実現できてしまいます。

少しでもホームページの見栄えをよくしたいと思ったら、今回のような動画と画像を組み合わせたコンテンツを表示しても良いかもしれませんね。

ではまた！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

夏季休暇についてお知らせいたします。

誠に勝手ながら、弊社の2020年の夏季休暇は下記の期間とさせていただいております。

2020年8月13日（木）～2020年8月16日（日）

上記期間中のお問い合わせは弊社のホームページ「お問い合わせ」からご連絡いただけますようお願いいたします。
ご不便おかけいたしますが、何卒ご了承くださいますようよろしくお願い申しあげます。

熱中症に気をつけましょう！

新型コロナウイルス対策で、新しい生活様式が取り入れられ、マスクの着用による熱中症のリスクが高まっています。
マスクを付けると皮膚からの熱が逃げにくくなったり、気づかないうちに脱水になるなど、体温調整がしづらくなってしまいます。
暑さを避け、水分を摂るなどの「熱中症予防」と、マスク、換気などの「新しい生活様式」を両立させましょう。

「新しい生活様式」における熱中症予防行動のポイントをまとめました｜厚生労働省

【新型コロナウイルス】マスク着用で熱中症リスクが高まるおそれ　熱中症を予防するための8ヵ条｜日本生活習慣病予防協会

夏にできるオンライン体験

外に出るのはちょっと今は怖いなぁ、という場合には、様々なオンライン体験を利用することができます。

online experience｜アクティビティジャパン

お家時間を楽しもう！オンラインイベント特集｜PassMarket

オンラインアカデミー｜ベルトラ

日が高くなって暑くなったら海を眺めて癒やされる今日このごろのテレワークです。

ぼーっと沖縄

ウィズコロナで生活に様々な変化が起きていますが、じっくりと向き合って素敵な夏を過ごしましょう！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

ファッション系のECサイトと相性の良さそうな「着せ替え」機能を簡単に実装するプログラムを作ってみました。

使用する言語

• HTML
• CSS
• JavaScript
• jQuery

※JavaScriptやjQueryの基本的な使い方は割愛させてただきます。

着せ替え機能のサンプル

服の画像をクリックすると、服を組み合わせた画像を上部に表示します。

各種コードの説明

HTMLコード

<div id="kisekae-area">
  <img class="base-img" src="https://incloop.com/wp-content/uploads/2020/07/base.png">
</div>

<div id="select-img-area">
  <p class="select-img">
    <img src="https://incloop.com/wp-content/uploads/2020/07/item1-cutout.png">
    <img src="https://incloop.com/wp-content/uploads/2020/07/item1.png">
  </p>
  <p class="select-img">
    <img src="https://incloop.com/wp-content/uploads/2020/07/item2-cutout.png">
    <img src="https://incloop.com/wp-content/uploads/2020/07/item2.png">
  </p>
  <p class="select-img">
    <img src="https://incloop.com/wp-content/uploads/2020/07/item3-cutout.png">
    <img src="https://incloop.com/wp-content/uploads/2020/07/item3.png">
  </p>
  <p class="select-img">
    <img src="https://incloop.com/wp-content/uploads/2020/07/item4-cutout.png">
    <img src="https://incloop.com/wp-content/uploads/2020/07/item4.png">
  </p>
</div>

class「select-img」の二枚の画像は、一枚目がユーザーがクリックする選択用の画像、二枚目は着せ替え用の画像として使います。
二枚目の画像は着せ替えのみに使いますので、CSSの設定で非表示化しておきます。

着せ替え用の画像を作成する際には、基準となる画像と同じサイズで、レイヤーのように組み合わせた際に違和感が無いような位置に調整して作成します。

jQuery(JavaScript)コード

<script>
<!--
  jQuery(function($) {
    // 画像エリアクリックイベント
    $('.select-img').on('click', function(){
      $(this).toggleClass('selected');
      change_img();
    });

    // 画像変更処理
    function change_img(){
      var s_html = '';
      var i_z_index = 1;
      $('.select-img.selected').each(function(index, element){
          s_html += '<img src="' + $(element).find('img').eq(1).attr('src') + '" style="z-index:' + i_z_index + '">';
          i_z_index++;
      });
      // 要素削除
      $('#kisekae-area img').each(function(index, element){
        if(!$(this).hasClass('base-img')){
          $(this).remove();
        }
      });
      // 要素追加
      $('#kisekae-area').append(s_html);
    }
  });
-->
</script>

選択済みのimgタグを全て取得したら、class「base-img」以外の画像を一度消して、選択された画像のみで取得したimgタグを着せ替え画像のエリアに埋め込みます。

※z-indexは後半に取得した要素ほど上にくるような処理になっているため、画像の順番に気を付けてください。

CSS（スタイルシート）の設定

<style>
#kisekae-area {
    border: solid;
    margin-bottom: 10px;
    text-align: center;
    position: relative;
}
#select-img-area {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.select-img {
    border: solid 1px #000;
    text-align: center;
    padding: 10px;
    width: 20%;
    margin-right: 5px;
    cursor: pointer;
}
.select-img img {
    display: none;
}
.select-img img:first-child {
    display: inline-block;
}
.select-img:hover {
    background-color: #e6e6e6;
    opacity: 0.6;
}
.select-img.selected {
    background-color: #e6e6e6;
}
#kisekae-area img {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}
#kisekae-area img.base-img {
    position: relative !important;
    top: auto;
    left: auto;
    transform: none;
    -webkit-transform: none;
    -ms-transform: none;
}
</style>

今回は簡易的なコードで組みましたが、画像の命名規則などをしっかり決めることができれば、隠している画像も不要になるかもしれませんね。

コロナの影響でECサイトが盛り上がっていますので、今回の着せ替えプログラムはECサイトで役立つかもしれません！

弊社では本記事のようなシステムの実装に関するご相談も承っておりますので、もし興味がありましたらお問い合わせまでお気軽にご連絡ください。

ではまた！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

パソコン版（Windows版）のLINEをインストールして、スマートフォンと同じアカウントで利用している人というのは多いのではないでしょうか？

先日、パソコンを買い替えたのですが、パソコン版のLINEのデータ（トーク履歴）を新しいパソコンに引越しさせる方法がGoogle先生で検索してもなかなか見つけられませんでしたが、分かったので備忘録として残します。

普通に
「パソコン版 LINE バックアップ」
で検索しても、パソコン版のLINEはバックアップできません！！テキストコピーして残すしかありません！などとなぜか断言しているページばかりなんですが、全然そんなことはなくて・・・

appdataの中にデータが保存されていて、コピーして上書きするだけで
「テキストも画像も新しいパソコンに引越しできる」んです！

できないって書いている投稿が多くて、困ってる人も多いと思ったので、書くことにしましたｗ

パソコン版LINEとは？

パソコンとスマートフォンと両方の端末で同じアカウントで使うことができるので便利です。

https://line.me/ja/download

Windowsで使う場合は、Windows版を選択してインストールをしてください。

LINEのトーク履歴のバックアップ方法

まずは古いパソコンのLINEのトーク履歴をバックアップしたいと思います。

①パソコン版のLINEを終了させる

タスクバーのLINEのアイコンを右クリックして、【終了】を選択して、パソコン版のLINEアプリを終了させます。

②隠しファイルを表示する

LINEのデータは初期設定のままでは見えないところ（隠しファイル）に保存されています。

隠しファイルを表示するために、以下の箇所にチェックを付けます。

③LINEのデータの保存場所

隠しファイルにチェックをつけると、以下のようにAppDataというフォルダが見えるようになります。

で、実際のLINEの保存場所は以下のフォルダです。

C:\Users\自分のユーザー名\AppData\Local\LINE

このLINEフォルダをまるごとUSBメモリなどに保存すれば、バックアップは完了です。

LINEのトーク履歴の復元方法

新しいパソコンに古いパソコンのLINEトーク履歴を復元する方法は簡単です。

1. 新しいパソコンにパソコン版LINEをインストールする。
   ダウンロード先：https://line.me/ja/download
2. インストールし終わったら、タスクバーからLINEを終了させる。
   ※上記に説明した方法です。
3. USBメモリなどに保存しておいたLINEフォルダの中身を全部コピーして、
   C:\Users\自分のユーザー名\AppData\Local\LINE
   に上書きする。
4. パソコン版LINEを起動する。

たったこれだけです！ｗ

これで古いパソコンのLINEのトーク履歴を新しいパソコンに引越しさせることができます。

これで新しくパソコンを買っても安心です！ぜひお試しください。

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

新型コロナウイルス接触確認アプリ（COCOA) COVID-19 Contact-Confirming Application　とは？

COCOAは、厚生労働省が公式に発光している、新型コロナウイルス接触確認用のスマートフォンアプリケーションです。

新型コロナウイルス接触確認アプリ（COCOA) COVID-19 Contact-Confirming Application

7/31　17:00の段階でのダウンロード数は約996万件、日本の人口の約8%がダウンロードしている計算となります。意外と少ないですね！

なお、個人におけるスマートフォンの保有率が64.7%なので、約8,150万人がスマートフォンを持っていると考えると、約12％ほどしかこのアプリをダウンロードしていないということになります。少ないですね！

スマートフォン保有率

一ヶ月前ほどからリリースが開始され、最終アップデートは8/3現在3週間前となっています。（iPhone8調べ）

先日キャリアからメールでご案内が来ていたので、さてどんなものかと思いつつ、DLして使ってみました。

COCOA -接触確認アプリ-  でできること。

• 新型コロナウイルスで陽性と診断された方との接触を確認することができます。
• 新型コロナウイルスと診断された場合、その情報を登録することができます。

基本的にできることはこの2つです。

これはつまり、

• 新型コロナウイルスから自分の身を守るために情報収集ができます。
• 新型コロナウイルス陽性者になった場合、周囲の人たちを守ることができます。

ということです。

できれば新型コロナウイルスにかかってしまったかも……という場合の対処方法もアプリ内に記載してほしいなと思うのですが、その場合はこちらをどうぞ。

新型コロナウイルスに関するQ&A（一般の方向け）

基本的には各市区町村に専用相談窓口があります。決して病院に突然いかず、まずは連絡を。

COCOA -接触確認アプリ-  の使い方

まずはアプリをダウンロードします。

アンドロイド系【Google Play】

iPhone【App Store】

以下はiPhoneの画面です。

ダウンロードしてアプリを起動すると、以下のように案内が表示されます。

「次へ」を押すと、利用しているスマートフォンへのプライバシーに関する注意事項が表示されます。プライバシーは全て暗号化され、行政や第三者によって利用されることはなく、また、アプリ自体をアンインストール・削除すれば、接触記録はいつでも止められるようです。

記録の蓄積も14日で終わると明言されています。

引き続き、「次へ」を押すと、利用規約、プライバシーポリシーへの同意を求められます。

最後に通知を有効にするかどうか求められます。難しいこと書いてありますが「新型コロナウイルスがめちゃくちゃ近かったぞ、というときに通知しますか？」と尋ねられています。有効にしておいて損はないでしょう。

これらの作業が終了すると、登録完了です。簡単ですね。

なお、使い方は特にありません。スマートフォンを携帯するのみです。画面ではこのように確認できます。

「陽性者との接触を確認する」をクリックすると、以下のようにアンサーがあります。

COCOA -接触確認アプリ-  アプリ内で確認できること

以下の4点が確認できます。

それぞれにアプリでできることが詳しく書いてあります。

このアプリをダウンロードしていて有意義なことは、「感染を広げない」という一点につきます。

自分が陽性者に接触した場合、何をしたらいいのか。

自分が陽性者になった場合、どうしたらいいのか。

自分も周囲もきちんと正しく守るために、アプリを利用したいですね！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

先日東京国立博物館に行ってきました。

一週間ごとで提示される日付に対し、オンラインでの事前予約が義務付けられ、入場にはQRコードが必須になりました。入り口ではサーモカメラによる体温チェック。当たり前のようにアルコール消毒液が用意され、外にあったキャラクター看板にはマスクがつけられていました。展示物も絞られて、徹底した密の回避が行われていました。マスクをつけてない人はひとりもいませんでした。

新型コロナウイルスの驚異が1月に勃発し、2/27から臨時休館であった東京国立博物館ですが、このシステムを3ヶ月以内に企画、制作、実行している東京国立博物館の迅速な動きに尊敬の念が湧くばかりです。

そして、これを筆頭にだいぶ世の中が変わってきたな、という印象です。

でも予約システムに15分以内に決算まで、という時間制限がついており「これは慣れている人はいいかもしれないけれどそうじゃない人は何回かミスしてしまうだろうな」とも思いました。しかし、セキュリティ的にはそうならないとだめなのでしょうね。

ITの基本的な知識と、そのリテラシーの学習は今後個人個人で必須となることでしょう。

6月に入ってから、感染症対策としてどんなことが起きているのか、見ていきましょう。

テレワーク

発言量や会話をリアルタイムに可視化するWeb会議システム　オンライン授業などで活用を想定

https://news.yahoo.co.jp/articles/a319538af471687c4d5294565346082b8f196678

まだらテレワークの問題

https://www.itmedia.co.jp/news/articles/2006/10/news088.html

1時間440円の「おひとりさま会議室」

https://news.goo.ne.jp/article/sankei/nation/sankei-wst2006090026.html

東京都　テレワーク向きのホテルを探せるサイト

https://internet.watch.impress.co.jp/docs/yajiuma/1258529.html

はんこ文化

Dropboxが電子署名との連携に本腰

https://news.yahoo.co.jp/articles/3c62aea8499820870536fff03016cd769521b742

GMO　政府認定の“電子社印”発行サービス開発へ

https://news.yahoo.co.jp/articles/1c89645a5aa9a5e113e752b8613bcad9e4624de5

みずほ銀行「はんこ文化」見直し

https://www3.nhk.or.jp/news/html/20200610/k10012465671000.html

密を見つける

東芝　“密”な状態を検知するAI

https://www.excite.co.jp/news/article/Itmedia_news_20200612099/

レジに並ばずに支払いを済ませる「スマホレジ」

https://www3.nhk.or.jp/news/html/20200614/k10012470101000.html

博物館、コンサート、飲食店でも

東京国立博物館

https://www.itmedia.co.jp/news/articles/2006/03/news036.html

TOHOシネマズ　検温器設置

https://news.yahoo.co.jp/articles/93b81a15d21bef06b0f4a92570a3b061f1bb3959

やよい軒　おかわりロボ

https://techable.jp/archives/127776

KDDI　バーチャルコンサート

https://japan.cnet.com/article/35154884/

世の中はどんどん変化しています。自分たちのITの基礎知識をアップデートしたり、登録などの基本動作を覚えたりしていかないと、どんどん取り残されてしまう可能性も見えてきました。

今からでも遅くない！　という気持ちで自分もどんどんアップデートしていきましょう！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

…という経験をしたので記事にしてみました。

原因が分かってしまえば一瞬で治るのですが、原因が分からないと結構引っかかる問題だったりします。
ちなみに私は今回の問題で1時間程悩みました！ …泣けます。

あまりにも悔しかったので、クイズっぽい感じの記事にして過去の自分に届けます（？）

あれ？XAMPP環境で動作確認したシステムがXserverにアップロードしたら動かない…？

とあるページをXAMPP環境で編集して動作確認をしていました。
実装のイメージとしては、下記のようにphpファイルとcssファイルを用意して同じディレクトリに格納しました。

■phpファイル

■cssファイル

■ディレクトリ構成

上記の構成でローカルのULRにアクセスすると下記のような表示になります。

スタイルシートも反映されていて想定通りの表示になりました。

作成が完了したので、早速Xserverにアップロードしてページにアクセスしてみます。
すると…

変化が少ないので分かりづらいですが、CSSファイルが反映されていません。

「おかしいな？」と思ってファイルのエラー内容を見てみると…。

「i-sp-style.css」が読み込まれていないらしい…。

アップロードの失敗を疑いましたが、しっかりとサーバーにアップロードできていました。（※10回ほど上書きしてアップロードしました。）

ではCSSの読み込みの記述が間違っているのか？　再度確認してみましたが…。

パスも間違っていない…。
そもそもXAMPPで確認ができているので、アップロードの失敗以外で読み込みエラーになるのはおかしい…。

どういうことなの…？

…というバグに遭遇して、1時間も悩みました…(´;ω;｀)

どうでしょうか、皆さんはこのバグの修正方法がわかりましたか？

早速、答えを見てみましょう！

バグの原因は「ファイルの大文字と小文字の違い」にありました

先程のディレクトリ構成をよく見てみるとcssのファイル名の頭文字が大文字になっています。

これがスタイルシートが読み込めない原因となっていました。

ですが少し待ってください。XAMPP環境では問題なくスタイルシートは読めていました。
何故ローカル環境とXserverの環境で表示が変わってしまったのでしょうか？

これはサーバーを構成するOS（※WindowsやLinuxの違い）によって、ファイル名の大文字/小文字を区別するかしないかの違いにありました。

参考記事：大文字／小文字の問題とマルチ・プラットフォームの開発 | 東陽テクニカ | “はかる”技術で未来を創る | ソフトウェア 開発支援

私のXAMPP環境はWindowsサーバーなので、ファイルの大文字と小文字を区別しません。一方で、XserverはLinuxサーバーなので、大文字と小文字を区別しています。
このように、今回のバグはサーバーのOSの違いによって発生していたため、原因を突き止めるのに時間がかかってしまいました。

サーバーを構築したことのある方なら「こんなもの当然でしょ？」となるのですが、知識が浅いとこんな些細な問題に気づくのも一苦労でした…。

「もっとサーバーの勉強をしなさい！」というサーバーからのメッセージを受け取った気がします( ;∀;)

日々精進です！ではまた！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

新型コロナウイルスに関する緊急事態宣言が発令されてから、働き方や生活の変化が必要とされる場面が多くなりました。
多くの人々がこの未曾有の危機に立ち向かっている中で、IT企業からも様々なクラウドサービスやアプリが提供されています。その一部をご紹介します。

弊社のコロナウィルス（COVID-19）に伴う緊急事態宣言に関する弊社の対応についてはこちら

GoogleのCOVID-19コミュニティモビリティレポートについてはこちら

コロナウイルスについての情報提供

基本情報

新型コロナウイルス感染症対策｜内閣官房

新型コロナウイルス感染症について｜厚生労働省

新型コロナウイルスに関するQ&A｜厚生労働省

政府CIOポータル｜情報通信技術（ＩＴ）総合戦略室　

GoogleとAppleがBluetoothで濃厚接触を検出できる技術を提供（実装予定5月）

4月10日、AppleとGoogleから、新型コロナ感染者と濃厚接触の可能性を検出するアプリケーションを展開すると発表がありました。

Privacy-Preserving Contact Tracing

なお、Apple社では、すでにCOVID-19スクリーニングツールを発表しています。自身の体調に不安を覚えた時は、是非活用してみてください。

COVID-19スクリーニングツール

Googleでは、Googleマイビジネスを利用したCOVID-19の影響を受けている場合の、ユーザーへの情報提供を促しています。

COVID-19 の影響を受けているビジネス: 情報の更新と臨時休業に関するガイダンス

また、Googleの新型コロナウイルスに関するサイトはこちら

COVID-19 Information & Resources

NewsDigest｜感染事例が報告された場所の情報マップが提供　…株式会社JX通信社

＞＞ iPhone版「NewsDigest」
＞＞ Android版「NewsDigest」

新型コロナウイルス感染者の利用等の事例が公表された場所の情報を地図上でピンポイントで確認できます。

提供企業はこちら＞＞株式会社JX通信社

テレワーク、在宅ワークのパソコン購入をご検討なら、リサイクルパソコン、中古パソコンのインクループにご相談を！

新型コロナウイルス感染の拡大阻止によるテレワーク実施要請に関して、PCの中古販売、リサイクルPCの需要が急増しています。コストを押さえてご購入したいう方、お気軽にご相談ください！

インクループ株式会社「リサイクルパソコン販売」

病院・クリニック向けアプリ

オンライン診療サービス「クリニクス」

クラウド診療支援システム

予約からオンライン診療、カルテ、会計、レセプトまで、診察業務システムを統合したクラウド診療支援システムです。

提供企業はこちら＞＞MEDLEY

導入例：岡村記念クリニック

スマホで医師に相談できる医療相談アプリ「LEBER」

ドクターシェアリングプラットホームの医療相談アプリLEBERは、いつでもどこでも、気軽に医師と相談できるアプリケーションです。まずはチャットボットで、自身の体調を確認しましょう。
企業向けにも展開しており、社員の健康相談も可能。産業医との連携もできます。

提供企業はこちら＞＞株式会社AGREE

導入例：茨城県全世帯が対象　24時間医師に健康・医療の相談が無料でできるようになりました　2020年4月9日より開始

診療までの待ち時間をお知らせできる「シンプルオーダー」

インクループ株式会社「シンプルオーダー」

弊社が開発したお客様に待ち状況をお手軽にお知らせできるインストール不要なクラウドアプリケーションです。
無料プランの他、有料プランも20日間のトライアル期間があります。緊急事態宣言が発令されてからお問い合わせが激増しています。

厚生労働省が公開している全国医療機関の医療提供体制の状況

厚生労働省は、内閣官房と連携し、全国の入院病床を有する病院（20床以上）の医療提供状況を公開しています。

https://cio.go.jp/hosp_monitoring_c19

自身や家族の症状に不安や心配がある場合は、まずは各地域の「帰国者・接触者相談センター」への電話相談をしてみましょう。

新型コロナウイルスに関する帰国者・接触者相談センター

小売店、自営業などショップ向けクラウドサービス

【無料体験30日間】ネットショップ作成サービス「カラーミーショップ」

安価にネットショップを開業できるサービスです。（月額3,000円）サポートも万全。販売手数料0円、決済手数料も割安です。

カラーミーショップ

新型コロナウイルスに関する支援も始まっています。

カラーミーショップによる事業者さま向け支援策のご案内

提供企業はこちら＞＞GMOインターネット株式会社

【無料】手軽にECショップが作成できる「BASE」

ネットショップ開設実績3連続ナンバーワン（マクロミル調べ・2020年2月）の「無料でECショップが作れる」サービスです。URLなどは自由に決められませんが、多種多様なAPPで自由なカスタマイズが可能です。

BASE

こちらも新型コロナウイルスに関する支援も始まっています。

BASEの新型コロナウイルスへの対応

提供企業はこちら＞＞BASE株式会社

【無料】自分だけのネットショップが作成できる「STORES」

決済手段が豊富なSTORESは「あれこれもだいたいできます」と宣言する通り、大概のことはだいたいできます。有料にすると楽天ペイやAmazonペイができるのも魅力です。

STORES

もちろんこちらも新型コロナいウイルスに関する支援が始まっています。

【4/7】新型コロナウィルス、及び緊急事態宣言に関するSTORESの対応について

小売店でもECショップを作成するのは今がチャンス！

「うちはそんなに商品がないから……」「発送はできるけど、それまでのフローはどうしたらいいのかわからない」「そもそもECショップとかネットショップってどうやって運営したらいいの？」「パソコンが苦手なの……」といったお悩みで、ECショップ、ネットショップの作成をためらっていた方は、今がチャンスです！　上記の通り、無料で作成できるツールもありますので、「作ってみよう」というお気持ちがあれば、弊社で全力でサポートします！

「なんにもわからない……」という方も、お気軽にご相談ください。ご協力のもと、運用代行も可能です。

＞＞インクループ株式会社にお問い合わせをする

ECショップの敷居が高い、という方はこちら

• 大手フリマアプリ　メルカリ
• 楽天のフリマアプリ　楽天ラクマ（農業、農家様にはオススメ）
  ＞楽天のフリマアプリ「ラクマ」農産物の取引実態について調査結果を発表
• 地元の掲示板「ジモティー」（地域に突出、SNSと併用して）
• ポケットマルシェ　（農家・漁師様大注目！　なお、お買い物もオトク）

お店専用のアプリを作って集客管理「店舗アプリ」

新型コロナウイルスに伴い、テイクアウトやデリバリーメニューを告知していきたい飲食業様には嬉しいアプリ。また、クーポンやイベント情報の提供なども独自で構成可能。今の自粛中にさくっとオリジナルアプリを作成して今後に備えてみては？

店舗アプリ

提供企業はこちら＞＞株式会社トランスメディアGP

飲食店特化の情報提供サイト「CAROT」

CAROTは飲食店に特化したサービス比較・資料請求サイト。飲食店に関するITツールやサービスは1,000種類以上もあり、それらの利用のための資料請求も多大な手間がかかります。CAROTはそんな情報収集を代わりにやってくれるサイトです。

CAROT

企業向けツール

今後、働き方改革やこの新型コロナウイルスの影響により、社員の働き方はより柔軟に、よりIT寄りに変化すること間違いなし。テレワークを中心とした在宅ワークなどに適したツールをご紹介します。
弊社で利用しているツールなどについてはこちらをご参照ください。

 incloop.com

話題になっている「テレワーク」を短期間で実現した弊社の働き方をご紹介します！

本日の昼頃に、弊社事務所から歩いて数分の場所にある相模原中央病院にて、5人目となる新型コロナウイルスの感染者が確認されました。参考記事：感染経路不明…なぜ５人...

【無償提供あり・有料】ビジネスのIT化を促進する業務アプリ「Platio」

ビジネスツールを手軽にカスタマイズできるスマートフォン酔うモバイルアプリ作成ツールです。企業に合った項目や見た目を設定し、勤怠連絡から配送報告、顧客対応記録、クレーム管理など多種多様なテンプレートが用意されています。
新型コロナウイルス感染拡大防止支援として、以下のツールが5月末まで無料提供されています。
企業でアプリから体温検温報告ができ、労務管理担当者が即時に把握できる「検温レポートアプリ」も搭載されています。

新型コロナウイルス感染拡大防止支援【無償提供】テレワークツール

Platioの他、会議資料の配布や管理、セールステック、電子マニュアル、学校教育などでも利用可能な、タブレット活用に適したHandbookなども開発されています。

提供企業はこちら＞＞アステリア株式会社

【無料あり】ウェブフォームの作成「FormOK」

お問い合わせフォームやお申し込みフォームなど、あらゆるウェブフォームを迅速に作成でき、かつ、大容量ファイルの添付の大いに可能にするフォームです。テレワークでの資料のやり取りに最適。

FormOK

提供企業はこちら＞＞KODAMA こちらもお読みください

一般社団法人日本テレワーク協会

テレワークを導入したい企業様はまず最初に読むべきサイト。厚生労働省の新型コロナウイルス感染症対策としてのテレワークについても詳しく解説してくれています。

一般社団法人日本テレワーク協会

テレワーク緊急導入支援プログラムもあります。＞新型コロナウイルス感染症対策：テレワーク緊急導入支援プログラムのご紹介

総務省のテレワーク導入手順書はこちら。

テレワークについて詳しく紹介してくださっているサイトはこちら

テレワークを緊急導入したいときに開くべきWebサイト【2020年春版】

テレワークに有効なアプリケーションを探しましょう！

コミュニケーションツール

• Google Hungout
• Slack
• Zoom
• Chat Work
• LINE WORKS

簡単勤怠管理

• Freee（弊社はこちらで管理しています）
• ジョブカン勤怠管理
• G Suite

データ送信

• ギガファイル便
• Dropbox
• Google Drive

学校、教育、子どもの学習向け

期間限定の無償提供「Gakken」

学習コンテンツが無料公開中です。

Gakken

家庭学習応援プロジェクト

一斉休校対応「進研ゼミ」

自宅で学習するための様々なサービスを無償で公開しています。

進研ゼミ

オンライン自習室「G-room」

【無料】G-room

オンライン自習室はZoomを利用して、いっしょにオンライン上で勉強できるツールです。

NHK for School

全てのコンテンツがネット上でムービーとして閲覧できます。

小学校～中・高校生向け　NHK for School

高校生向け　NHK高校講座

子供の学び応援サイト

小学校から中学校、特別支援教室、幼児教育まで、学校の強化などを学ぶ際に便利なサイトとなっています。

子供の学び応援サイト｜文部科学省

また、新型コロナ感染症による学校休業対策として、以下のようなサイトがオープンしています。

学びを止めない未来の教室|経済産業省

IT導入補助金でこれらのツールが導入可能！　2/3の補助を受けて業務改革を！

IT導入補助金ホームページ

本公募は、昨今の新型コロナウイルス感染症の感染拡大に伴い、同感染症が幅広い中小企業・小規模事業者等の経営及び生産活動に多大なる影響を与えることが懸念されることを鑑み、経済に与える影響を緩和するべく臨時対策として、公募を行うものです。申請にあたっては、本要領に加え交付規程をよく読み理解のうえ、申請・手続きを進めてください。

インクループでもIT導入補助金のサポートを行っています。
お気軽にご相談・ご依頼くださいませ！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

4月3日（現地時間）、米Googleが新型コロナウイルス感染症（COVID-19）に対して、人々の動きの変化を記録したCOVID-19 Community Mobility Reportsを公開しました。

COVID-19コミュニティモビリティレポートの閲覧の仕方

以下のURLにアクセスします。

COVID-19コミュニティモビリティレポート

「国または地域で検索」に「Japan」と記載して検索すると、「日本」のデータがPDF形式でダウンロードできます。

COVID-19コミュニティモビリティレポートはどんなデータを利用しているのか

COVID-19コミュニティモビリティレポートは、Googleアカウントに紐付けられている「ロケーション履歴」を利用しています。
「ロケーション履歴」とは、スマートフォンなどの端末を持って訪れた場所が、Googleによって、自動的に、かつ定期的に、位置情報を取得される機能です。このデータはグーグルマップや検索など、Googleサービスを利用していないときでも取得されます。
インターネット接続をしていなくても、オンラインになった時点で、保管されていたデータがアカウントに保存されることがあります。
位置情報を取得されることはプライバシーに関わることです。このため、機能はデフォルトでオフになっています。

以下の手順でロケーション履歴の機能をオンにすることができます。

1. グーグルアカウントにログインする（ない場合は新規作成）
2. 「データとカスタマイズ」を選択する
3. 「アクティビティ管理」から「ロケーション履歴」を選択する
4. デフォルトで一時停止になっているタブをオンにする
5. 「ロケーション履歴を友好にしますか？」と尋ねられるので「有効にする」をクリックする
6. 外出、通勤、観光などで特定の場所を訪れた時のデータを取得し、それに関わるおすすめ情報や関連性の高い広告を表示するなど、パーソナライズ検索によく利用されていると考えられます。

COVID-19コミュニティモビリティレポートによる日本の主な主要都市の人々の動き

データは4月2日（13:21）のものです。データは常に、2～3日前のものになるようです。

前文に、「このレポートは医療診断、予後、治療目的には利用しないでください。また、個人的な旅行のガイダンスとして使用することも意図していません」と書いてあります。このデータは、医療に関わる全ての行為の根拠にはなりえません。
また、より旅行を企画するよう促しているものでもありません。
さらに、このデータを国と国、地域と地域の変化を比較するために使用することはおすすめしません、とも書いてあります。データは比較を目的としていません。単にその場所、その地域の人々の動きを示したものであり、感染率を低下させるための社会的距離測定などの、公衆衛生戦略に役立てるためのものです。
統計的に有意と認められないデータは、レポートに記載されていないようです。
十分注意した上でデータを利用しましょう。

日本全体のレポート

3月20日からの連休では、交通機関（乗換駅）の利用は大きく減少していますが、公園の利用はお花見の時期も相まってか大きく上昇しています。

3月25日に週末不要な外出自粛が東京都から出されました。これ以後、いずれのパラメータも大きく減少していますが、企業・職場での人々の動きはほぼ変わらずで、在宅率も大きく上昇していません。テレワークが推奨されていますが、現実的には厳しい状況が続いています。

神奈川県のレポート

小売店や食料店、薬局など、25日を境目に多くの販売店で動きが減少しています。公園の人々の動きも大きく減少しています。

COVID-19コミュニティモビリティレポートでわかること

外出自粛や自宅待機令などが、人々の動きに与えた変化を把握することが目的でこのレポートは作成されています。

COVID-19においては、日本では「3つの密を避ける」海外では「社会的距離を取る」といった対策が推奨されていますが、このデータはこれらの対策を行うに非常に有用であると言えるでしょう。GoogleJapanは以下のように述べています。

これは感染症流行のピークを遅らせ引き下げることを目的とした、例えば在宅勤務の推奨、外出自粛、欧米等ですでに発令されている自宅待機令といった対策が与えた変化に関するインサイトを提供することを目的としています。もちろん、本レポートは、Google の厳格なプライバシー規約とポリシーを順守しており、その上で役立つ情報となることを目指しています。

避けられない外出の傾向を把握し、営業時間や宅配サービスの提供について推奨事項を定める場合や、公共交通機関における混雑の傾向を知ることで、乗客が社会的距離を保てる空間確保のために増便の必要性を検討する場合などに、何らかのインサイトを提供できるのではないかと考えています。

GoogleJapanのブログ記事はこちら。

感染症対策の専門家を支援。新型コロナウイルス感染症（COVID-19）と戦う上で役立つデータを

有用な情報が次々に公開されています。適切な情報を手に入れて、有効活用していきましょう。

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

本日の昼頃に、弊社事務所から歩いて数分の場所にある相模原中央病院にて、5人目となる新型コロナウイルスの感染者が確認されました。
参考記事：感染経路不明…なぜ５人に　相模原の病院、対策委設置へ | 社会 | カナロコ by 神奈川新聞

そのため、弊社では新型コロナウイルスへの対策として「テレワーク」の導入を始めました。
テレワークの導入は初めてなので、本当に社内の仕事が回るのかどうか不安でしたが、弊社の業務内容と相性が良かったこともあり、滞りなく仕事が進んでいます。

今回は、弊社で実際に仕事を回している「テレワーク」の方法についてご紹介いたします。

そもそもテレワークって何…？

ざっくりと説明すると「ネットを使って場所や時間にとらわれずに働く」ことを「テレワーク」と呼びます。

詳しい説明は下記サイトで綺麗にまとまっていますので、興味のある方は読んでみてください。

• テレワークとは｜テレワークの導入・活用｜一般社団法人日本テレワーク協会
• テレワークとは何ですか？（人事労務Q&A）｜人事、採用、労務の情報ならエン人事のミカタ

工場や飲食店など、業務内容が場所に依存する業種に関してはテレワークの実現は難しそうですが、弊社のようにパソコンを使った業務が多い場合は下記の三つの方法が決まっていれば実現は可能です。

• リアルタイムで繋がる連絡手段
• ファイルの受け渡し方法
• 各々の仕事を把握する方法

上記に関して、弊社で実際に活用しているツールと使い方をご説明いたします。

リアルタイムで繋がる連絡手段

リアルタイムの連絡手段として下記のツールを活用しています。

• Google ハングアウト
• Chatwork

詳しい使い方は各サイトに掲載されていますので、そちらをご覧ください。

弊社では各ツールを下記にように使っています。

Google ハングアウト

• 社内連絡用に活用。
• 基本的には従業員のみを登録して、パソコン・スマホの両方で確認できるようにする。
• スマホへの通知も有効にすることで、緊急時も対応できるようにする。
• 既読の際にはアイコンが表示されるため、担当者が読んでいるかどうかの確認をして対応を決められる。
• 画像ファイルの添付が可能なので、簡単な指示書であれば画像を貼り付けて共有する。
• ビデオチャットが可能なので、カメラとマイクを使って打ち合わせを行う。
• ビデオチャットでパソコン画面の共有が可能なので、画面をキャプチャしながら打ち合わせを行う。

Chatwork

• お客様との連絡に活用。
• お客様との簡単なファイルの共有をする。
• お客様とタスクの共有をする。
• 画像ファイルの添付が可能なので、簡単な指示書であれば画像を貼り付けて共有する。
• ビデオチャットが可能なので、カメラとマイクを使って打ち合わせを行う。
• ビデオチャットでパソコン画面の共有が可能なので、画面をキャプチャしながら打ち合わせを行う。

おおまかな使い分けとして、ハングアウトは社内連絡用、Chatworkはお客様連絡用として使い分けています。

ツールを導入する条件として必須なのが「登録が簡単」「連絡がいつでも受け取れる」「簡単なファイルの共有ができる」という3点になります。

これらのツールを使うことで、どこにいても連絡が取れますし、お客様との打ち合わせや簡単なファイルの共有も可能となります。

ファイルの受け渡し方法

ファイルの受け渡し方法として、下記のツールを活用しています。

• Google ドライブ
• Dropbox
• ギガファイル便

弊社では各ツールを下記にように使っています。

Google ドライブ

• 社内のファイル共有に活用。
• 画像データに限らず、様々な形式のファイルを共有する。
• 基本的には容量の少ないデータを格納する。
• 議事録の作成や共有したい表計算の資料は、Google ドキュメントやスプレッドシートを使って共有する

Dropbox

• お客様とのファイル共有に活用。
• 画像データに限らず、様々な形式のファイルを共有する。

ギガファイル便

• 従業員・お客様の両方に活用。
• 動画ファイルなどの容量の大きいデータを共有する。

こちらも連絡手段と同じく、社内用・お客様用・両方といった括りで各種ツールを活用しています。

ファイル共有のツールとして重要なのは「簡単に使える」「ファイルがいつでも受け取れる」「ファイルの閲覧権限が変更できる（またはパスワードが付けられる）」という部分になります。

基本的には公にできないファイルのやり取りになるので、他の人が見られない状態にできることが最低条件となります。

各々の仕事を把握する方法

各々の仕事を把握する方法として、下記のツールを活用しています。

• Trello
• Google カレンダー

弊社では各ツールを下記にように使っています。

Trello

• 社内のタスク管理用に活用。
• 社内の全タスクを登録して、従業員全員が確認できるようにする。
• 各作業のステータスがいつでもわかるように管理する。
• 各従業員の負荷が早期に発見できるようにする。
• 指示書などの簡単な画像ファイルはタスクと一緒に添付して共有する。

Google カレンダー

• 各従業員の出勤・休暇の状況や作業場所を把握する。
• 打ち合わせスペースの確保や各社員の戻り予定などを把握する。

お客様とのタスク管理はChatworkやメール、電話でのやりとりがメインになりますので、ここでは社内のタスク管理のみに絞って使っているツールを記載しました。

タスクの管理で必要なのは「簡単に使える」「簡単なファイルのやり取りができる」「閲覧権限が変更できる」「いつでも見られる」という部分になります。

このようにして、弊社では様々なツールを活用して仕事に必要な情報を全社員が共有しています。

やや機能が重複しているツールもありますが、用途を明確にすることで従業員が作業を行う上で「〇〇をするときは××を見ればわかる」という状態を整える事で、どこにいてもパソコン1台あれば作業ができるようにしています。

様々なツールを使って複雑な事をやっているように見えますが、全てのツールがトレーニングがいらない程に操作が簡単なので、慣れてくると席を立つことなく、誰にも話しかけずに作業が完結してしまう事もあります。

このようにして、作業者が迷うことなく作業ができる環境を整える事で、テレワークが実現できるようになります。

便利なツールを使うことで「テレワーク」は実現可能になります

色々と書きましたが、弊社がテレワークを短期間で実現した大きな要因は「仕事に役立つ便利なツールを知っていたこと」にあります。

小さな事務所ですので、各々の作業者は明確に作業が分かれておらず、作業を兼任することが多いです。
そのような状態でうまく仕事を回すには、各々の作業だけでなく全体の作業を把握する事が大事になります。

そういった環境で仕事をするためには、様々な便利ツールに頼る必要がありました。

ハングアウトやTrelloは業務を円滑に回すために必要なツールとして導入しましたが、それがテレワークの為のトレーニングとなり、実際にテレワークが実施されても従業員は迷うことなく作業ができるような環境になっていました。

ハングアウトなどの便利なツールを使うことで、様々な事象に対応した「働き方」ができるのが現代なのだと、今回の件を通じて強く感じました。

「備えあれば患いなし」とは少し違うかもしれませんが、便利なツールを知っているという「備え」があることで、テレワークのような働き方が短期間で実現できるようになりました。

我々のようなネットの動きに敏感な業種は、一般の方々よりも便利なツールを知っていますので、いろんな人に便利な方法を広めていくことも大事な使命の一つなのかもしれませんね。

ではまた！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。