拝啓 貴社ますますご盛栄のこととお喜び申し上げます。
平素は格別のご高配を賜り厚く御礼申し上げます。
弊社は創業以来皆様より格別のご厚情を賜り今日まで存続してまいりましたが 諸般の事情により、2020年9月30日をもちまして廃業いたすことになりました。
これまでに皆様から賜りましたご厚情に対し心より感謝申し上げるとともに、ご迷惑をおかけする結果となりましたことを深くお詫び申し上げる次第でございます。
皆様の今後のご発展を心よりお祈り申し上げます。
敬具
上記に関する連絡先は
[email protected]
までお願いいたします。
疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。
2014年頃から、グーグルストリートビューに過去の画像が見られる「タイムマシン」という機能が追加されました。 […]]]>2014年頃から、グーグルストリートビューに過去の画像が見られる「タイムマシン」という機能が追加されました。
あまり知られていないこの機能ですが、6年経った現在は過去の写真が多くなり、結構楽しい機能になっていたので記事にします。
まず初めに、グーグルマップを表示します。
グーグルマップ
左上のテキストボックスに地名や建物名を入力して検索します。
画面右下の人形をドラッグ（クリックして押しっぱなし）して、見たい地図の位置に人形の位置を合わせてドロップします。
ストリートビューが表示されたら、画面左上の時計のアイコンをクリックします。
小さい画面の中に、過去の映像が残されている年代が表示されますので、ボタンのアイコンを見たい年代に移動させて日付の文字をクリックします。
過去の画像が表示されます。
左側の建物の1階の日高屋さんは昔はモスバーガーだったんですね、懐かしいです。
過去の映像はグーグル側に記録が残っている箇所のみになりますので、場所によっては過去の映像がない場合もありますが、相模原周辺の大通りであれば10年前の映像も残っていました。
コロナの影響で遠方への旅行ができないストレスが溜まっている方は、ストリートビューで過去への旅行をしてみるとストレス解消になるかもしれません。
地元を知る友だちや親戚と過去の建物や施設を懐かしんだり、昔の街並みについてクイズをしてみると盛り上がるかもしれませんね！
ではまた！
疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。
テレワークが推奨されるようになり、世間にはオンラインイベントやウェビナーといった、インターネットを使ったユーザ […]]]>テレワークが推奨されるようになり、世間にはオンラインイベントやウェビナーといった、インターネットを使ったユーザーへのアプローチが積極的になっています。
その中で、YouTubeを利用した動画での告知やお知らせ、紹介などを行いたい方々も増えました。
ここでは、動画のサムネイルの変更の仕方と、簡単なSEOをご紹介します。
1.YouTube動画のホームから右上のアカウントiconをクリックし、「YouTube Studio」をクリック。
2.YouTube Studioの左メニューから「動画」をクリックすると、投稿した動画の一覧が表示されます。
3.編集したい動画をクリックすると、編集画面が開きます。
4.「サムネイル」の項目で作成したサムネイルをアップロードすることができます。
YouTubeの動画サムネイルは以下のように推奨されています。
大まかに分けて「タイトル」「説明」「タグ」の三項目があります。
また、基本的なSEOは、WEBサイトの投稿記事などと同じ法則になります。
YouTubeの動画終了、最後の 5～20秒に、終了画面を追加することができます。他の動画を宣伝したり、ユーザーにチャンネル登録を促したりする目的に利用できます。
YouTube動画の画面上に特定のカードを表示することができます。
動画、再生リスト、チャンネルの他、外部サイトへも誘導することが可能です。（他リンクへの誘導にはYouTubeパートナープログラムに参加する必要があります）
基本的にテキストで表示されます。カスタマイズメッセージ（30文字）で紹介文を別途掲載することもできます。
カスタムチャンネル登録ボタンと呼ばれることもあります。
ユーザーにチャンネル登録を促すことができます。画像を利用することが可能です。
150×150ピクセル以上の正方形で、サイズは1MB未満にする必要があります。
設定をしっかりと行い、情報をユーザーに届けていきましょう！
疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。
Youtubeが流行っていることもあり、ホームページのトップビューで動画を流すサイトが多くなりました。 ホーム […]]]>Youtubeが流行っていることもあり、ホームページのトップビューで動画を流すサイトが多くなりました。
ホームページ上で動画が流れるようなサイトは中身のコンテンツも凝っていることが多いので「すごく難しい事をやっているんだろうなぁ…」と思ってしまいますが、実はそんなことはなかったりします。
ということで、今回は表題の通り「動画を自動再生させて、動画の中央に画像を被せて表示する方法」を紹介します。
下記のように、動画の上に画像を被せた表示ができるようになります。
画像は弊社のロゴを使用します。
動画は著作権フリーで非常に良質な動画がダウンロードできる「pixabay」様のサイトから取得しました。
準備はたったこれだけですが、単純な技術だからこそ素材の質が非常に重要になるので、素材の選定にはこだわりましょう！
設置するコードは下記になります。
<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
用意するコードはたった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>
これだけのコードで、今風のホームページによくあるサンプルのような表示が実現できてしまいます。
少しでもホームページの見栄えをよくしたいと思ったら、今回のような動画と画像を組み合わせたコンテンツを表示しても良いかもしれませんね。
ではまた！
疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。
Adobe製品にはいずれのソフトウェアにもラーニングページが設けられていますが、Adobe XDにおいては専用 […]]]>Adobe製品にはいずれのソフトウェアにもラーニングページが設けられていますが、Adobe XDにおいては専用のサイトが設置され、さらに多様なチュートリアル動画が用意されています。
Adobe XD Trailでは、無料で検定を受けることができます。
初級、中級、上級の3つのレベルから検定を選ぶことができ、問題に答えるだけで、得意分野や強化ポイントをカテゴリ別に診断することができます。
検定は一問一答形式の4択で、制限時間はありません。
途中で「もう一息！」など応援するコメントが出ます。地味に勇気づけられます。
一通り返答すると、以下の画面に切り替わります。
「結果を見る」をクリックすると、以下の画面に切り替わります。
総合上級問題に促すボタンとともに、スクロールしていくと各問題の解説を見ることができます。
その際、「関連する解説動画を見る」をクリックすると、問題の解説を動画で閲覧することができます。
UIデザイン、プロトタイピング、共有、デザインシステム、機能拡張とツール連携、というカテゴリがあります。
現在は2つしか動画がありませんが、目的に合わせてXDを使ってデザインを作成することができます。
ConnpassのAdobe XD Trailグループでワークショップを行なっています。
ConnpassとはエンジニアをつなぐIT勉強会支援プラットフォームです。
現在439人のメンバーがいるようです。
学習にワークショップキットも用意されているので、動画を見ながら自分で勉強することができます。
XD Trail ワークショップで実際に使われる、オリジナル学習キットを公開しています。
また、初級編、中級編とスターターキットが用意されており、レベルに応じて学習が可能です。
さらに、UI Kitなどの便利なリソースもダウンロード可能です。
Adobe XDは初心者でも楽しくわかりやすく学べる環境がしっかり整っています。ぜひ勉強してみましょう！
疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。
夏季休暇についてお知らせいたします。 誠に勝手ながら、弊社の2020年の夏季休暇は下記の期間とさせていただいて […]]]>夏季休暇についてお知らせいたします。
誠に勝手ながら、弊社の2020年の夏季休暇は下記の期間とさせていただいております。
2020年8月13日（木）～2020年8月16日（日）
上記期間中のお問い合わせは弊社のホームページ「お問い合わせ」からご連絡いただけますようお願いいたします。
ご不便おかけいたしますが、何卒ご了承くださいますようよろしくお願い申しあげます。
新型コロナウイルス対策で、新しい生活様式が取り入れられ、マスクの着用による熱中症のリスクが高まっています。
マスクを付けると皮膚からの熱が逃げにくくなったり、気づかないうちに脱水になるなど、体温調整がしづらくなってしまいます。
暑さを避け、水分を摂るなどの「熱中症予防」と、マスク、換気などの「新しい生活様式」を両立させましょう。
「新しい生活様式」における熱中症予防行動のポイントをまとめました｜厚生労働省
【新型コロナウイルス】マスク着用で熱中症リスクが高まるおそれ 熱中症を予防するための8ヵ条｜日本生活習慣病予防協会
外に出るのはちょっと今は怖いなぁ、という場合には、様々なオンライン体験を利用することができます。
お家時間を楽しもう！オンラインイベント特集｜PassMarket
日が高くなって暑くなったら海を眺めて癒やされる今日このごろのテレワークです。
ウィズコロナで生活に様々な変化が起きていますが、じっくりと向き合って素敵な夏を過ごしましょう！
疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。
ファッション系のECサイトと相性の良さそうな「着せ替え」機能を簡単に実装するプログラムを作ってみました。 使用 […]]]>ファッション系のECサイトと相性の良さそうな「着せ替え」機能を簡単に実装するプログラムを作ってみました。
※JavaScriptやjQueryの基本的な使い方は割愛させてただきます。
服の画像をクリックすると、服を組み合わせた画像を上部に表示します。
<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「base-img」の要素には、切り替えても消さない基準となる画像を入れておきます。
class「select-img」の二枚の画像は、一枚目がユーザーがクリックする選択用の画像、二枚目は着せ替え用の画像として使います。
二枚目の画像は着せ替えのみに使いますので、CSSの設定で非表示化しておきます。
着せ替え用の画像を作成する際には、基準となる画像と同じサイズで、レイヤーのように組み合わせた際に違和感が無いような位置に調整して作成します。
<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>
画像がクリックされたら、HTMLコードに予め仕込んである二枚目の画像のURLを取り出し、z-indexを正しい順序で埋め込みながらimgタグを生成します。
選択済みのimgタグを全て取得したら、class「base-img」以外の画像を一度消して、選択された画像のみで取得したimgタグを着せ替え画像のエリアに埋め込みます。
※z-indexは後半に取得した要素ほど上にくるような処理になっているため、画像の順番に気を付けてください。
<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>
CSSの重要な設定は「#kisekae-area img」の箇所となります。今回は簡易的なコードで組みましたが、画像の命名規則などをしっかり決めることができれば、隠している画像も不要になるかもしれませんね。
コロナの影響でECサイトが盛り上がっていますので、今回の着せ替えプログラムはECサイトで役立つかもしれません！
弊社では本記事のようなシステムの実装に関するご相談も承っておりますので、もし興味がありましたらお問い合わせまでお気軽にご連絡ください。
ではまた！
疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。
パソコン版（Windows版）のLINEをインストールして、スマートフォンと同じアカウントで利用している人とい […]]]>パソコン版（Windows版）のLINEをインストールして、スマートフォンと同じアカウントで利用している人というのは多いのではないでしょうか？
先日、パソコンを買い替えたのですが、パソコン版のLINEのデータ（トーク履歴）を新しいパソコンに引越しさせる方法がGoogle先生で検索してもなかなか見つけられませんでしたが、分かったので備忘録として残します。
普通に
「パソコン版 LINE バックアップ」
で検索しても、パソコン版のLINEはバックアップできません！！テキストコピーして残すしかありません！などとなぜか断言しているページばかりなんですが、全然そんなことはなくて・・・
appdataの中にデータが保存されていて、コピーして上書きするだけで
「テキストも画像も新しいパソコンに引越しできる」んです！
できないって書いている投稿が多くて、困ってる人も多いと思ったので、書くことにしましたｗ
パソコンとスマートフォンと両方の端末で同じアカウントで使うことができるので便利です。
Windowsで使う場合は、Windows版を選択してインストールをしてください。
まずは古いパソコンのLINEのトーク履歴をバックアップしたいと思います。
タスクバーのLINEのアイコンを右クリックして、【終了】を選択して、パソコン版のLINEアプリを終了させます。
LINEのデータは初期設定のままでは見えないところ（隠しファイル）に保存されています。
隠しファイルを表示するために、以下の箇所にチェックを付けます。
隠しファイルにチェックをつけると、以下のようにAppDataというフォルダが見えるようになります。
で、実際のLINEの保存場所は以下のフォルダです。
C:\Users\自分のユーザー名\AppData\Local\LINE
このLINEフォルダをまるごとUSBメモリなどに保存すれば、バックアップは完了です。
新しいパソコンに古いパソコンのLINEトーク履歴を復元する方法は簡単です。
たったこれだけです！ｗ
これで古いパソコンのLINEのトーク履歴を新しいパソコンに引越しさせることができます。
これで新しくパソコンを買っても安心です！ぜひお試しください。
疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。
新型コロナウイルス接触確認アプリ（COCOA) COVID-19 Contact-Confirming App […]]]>COCOAは、厚生労働省が公式に発光している、新型コロナウイルス接触確認用のスマートフォンアプリケーションです。
新型コロナウイルス接触確認アプリ（COCOA) COVID-19 Contact-Confirming Application
7/31 17:00の段階でのダウンロード数は約996万件、日本の人口の約8%がダウンロードしている計算となります。意外と少ないですね！
なお、個人におけるスマートフォンの保有率が64.7%なので、約8,150万人がスマートフォンを持っていると考えると、約12％ほどしかこのアプリをダウンロードしていないということになります。少ないですね！
一ヶ月前ほどからリリースが開始され、最終アップデートは8/3現在3週間前となっています。（iPhone8調べ）
先日キャリアからメールでご案内が来ていたので、さてどんなものかと思いつつ、DLして使ってみました。
基本的にできることはこの2つです。
これはつまり、
ということです。
できれば新型コロナウイルスにかかってしまったかも……という場合の対処方法もアプリ内に記載してほしいなと思うのですが、その場合はこちらをどうぞ。
基本的には各市区町村に専用相談窓口があります。決して病院に突然いかず、まずは連絡を。
まずはアプリをダウンロードします。
以下はiPhoneの画面です。
ダウンロードしてアプリを起動すると、以下のように案内が表示されます。
「次へ」を押すと、利用しているスマートフォンへのプライバシーに関する注意事項が表示されます。プライバシーは全て暗号化され、行政や第三者によって利用されることはなく、また、アプリ自体をアンインストール・削除すれば、接触記録はいつでも止められるようです。
記録の蓄積も14日で終わると明言されています。
引き続き、「次へ」を押すと、利用規約、プライバシーポリシーへの同意を求められます。
最後に通知を有効にするかどうか求められます。難しいこと書いてありますが「新型コロナウイルスがめちゃくちゃ近かったぞ、というときに通知しますか？」と尋ねられています。有効にしておいて損はないでしょう。
これらの作業が終了すると、登録完了です。簡単ですね。
なお、使い方は特にありません。スマートフォンを携帯するのみです。画面ではこのように確認できます。
「陽性者との接触を確認する」をクリックすると、以下のようにアンサーがあります。
以下の4点が確認できます。
それぞれにアプリでできることが詳しく書いてあります。
このアプリをダウンロードしていて有意義なことは、「感染を広げない」という一点につきます。
自分が陽性者に接触した場合、何をしたらいいのか。
自分が陽性者になった場合、どうしたらいいのか。
自分も周囲もきちんと正しく守るために、アプリを利用したいですね！
疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。
栄養バランスの良いお弁当やお惣菜の宅配を行う「有限会社あさのやおふぃす」様のホームページ制作を行いました。 ホ […]]]>栄養バランスの良いお弁当やお惣菜の宅配を行う「有限会社あさのやおふぃす」様のホームページ制作を行いました。
ホームページはこちらから。
写真を多用することで、賑やかで活力のある元気なサイトへ仕上げました。
ユーザーのクリック頻度の高いコンテンツやリンクはトップビューに設置し、各種ページへのリンクは専用のバナーを作成することで視覚的に分かりやすいデザインに仕上げました。
お弁当の画像にはちょっとした遊び心を加える事で、見るだけでも楽しくなるようなメニュー表に仕上げました。
レスポンシブデザインで構成することで、パソコンと同じ情報量がスマホユーザーにも届くようにしています。
更新の際も「スマホ用」「パソコン用」と二つの情報を更新する手間が無くなるため、ホームページの更新作業も楽になります。
ブログページは単純に記事の一覧が並ぶようなページではなく、文字よりも写真をメインにしたタイル型の記事を敷き詰めるようなページに仕上げました。
記事を投稿するごとに一覧ページの華やかさが変わるため、見ているユーザーだけでなく、投稿者の楽しみにもなるように設計しております。
WordPress
本制作の作業期間は下記の通りです。
構成検討：約3日
デザイン：約5日
実装：約10日
確認・調整：約3日
制作に関する費用は下記フォームよりお問い合わせください。
疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。