My Web道

WEB制作科 受講記録 …とその後も続くWEB制作に関する活動・学習記録です。

チュートリアル動画作成に使えるか!? Windows 10 意外な標準機能

f:id:sntkk3:20170916192835j:plain

意外なWindows 10標準機能 Xboxアプリでデスクトップ動画作成

Xboxアプリとは?

MicrosoftXboxと言えば、やはりゲーム、
日頃ゲームをされる方はきっとご存知のはず。
本来の目的は、Windows10上で、Xboxゲームを楽しむための機能。
ゲームの様子を録画するために実装されていたようですが、縁がなかったため、まったくこの存在に気づきませんでした。

この機能を発見したきっかけ

ユーザーさんへの説明用にチュートリアル動画を作成したいと思い、デスクトップ上のソフト操作を録画するための良いツールはないかと探しはじめたのが、この意外な標準機能に気付いたきっかけでした。

チュートリアルとは?

チュートリアルとは、アプリケーションソフトなどの基本的な操作方法を覚えるための教材のことである。

上記、以下記事より引用させていただいております。
http://www.sophia-it.com/content/チュートリアル

この機能の使い方

[Win]+[G] キーでこの機能が起動します。
録画開始ボタンをクリックすると画面操作を録画することができます。
f:id:sntkk3:20170916193157p:plain

使ってみた結果

Q. この機能は、チュートリアル動画作成に使えるか?
A. △ 機能的にちょっと不充分。場合により使えるかも。画質はイマイチです。

今回この機能を試すにあたり、やったこと

1. Excel上でVisualBasicエディタのマクロ作成、
2. Chromeブラウザのデベロッパーツールでスマホエミュレーションを使用、
上記2つの操作をXboxアプリで録画してみました。
が、
1.は、VisualBasicエディタでのウインドウが録画されない
2.は、ブラウザ上での右クリック時メニューが録画されない
といった結果となりました。

ご参考までに、以下、上記 2. の実際の録画結果です。
youtu.be

音声もキャプションも入れてない状態なのでこれでは分かりづらいと思いますが、ここでの操作内容としては以下の通りです。

=============================================
[操作内容] Chromeブラウザのデベロッパーツールでスマホエミュレーションを実行

1. ChromeブラウザでYahooトップページを表示
2. ショートカットキー [Ctrl]+[Shift]+[I]キーでデベロッパーツールを起動
3. 「Toggle Device Toolbar」アイコンをクリック
4. 画面上部のデバイス選択肢から、「iPhone6」を選択
5. 画面表示サイズを100%に変更
6. [F5]キーでブラウザを更新

→ YahooのiPhone6用ページが表示されました
=============================================

どうも、この機能で録画可能なのは、主たるウインドウでの操作のみのようです。
そういう意味で、ユーザー向けチュートリアル動画の作成には、機能的に不充分。とは言え、操作内容・条件・工夫次第では、まったく使えないというわけでもありません。

なお、録画結果は、mp4形式でPC内に保存されるため、ご覧のように、Youtubeに簡単にアップすることも可能です。
mp4動画なので、録画映像はPC上で「Media Player」「映画 & TV」アプリ等で再生可能です。

イデア次第では、応用した使い方ができそうです。

以上、ご参考まで。

参考記事

ascii.jp

「思わずエントリーしたくなるリクルートサイト 2018」 まとめ

f:id:sntkk3:20170910203114j:plain

[2017年版] 思わず引き込まれる採用情報Webページ 2018

思わず引き込まれる各社リクルートサイト(2018)、
以下、57 55サイト(2017.9.16 2サイトを追加)をご紹介いたします。

さすがの広告代理店 採用情報ページ

博報堂

f:id:sntkk3:20170910170245p:plain

求職者に向けての熱いコピー、
シングルカラム、アコーディオンによる、ページ縦、横の活かし方、
魅せる先輩社員のプロフィール、
など、
使いやすさ、見やすさ、コンテンツの充実度への配慮も充分、
デザイン、コンテンツともに素晴らしいリクルートページだと思いました。

h-mp-recruit.jp

電通

f:id:sntkk3:20170910171141p:plain


電通ならでは。
おなじみのCM作品が盛り込まれた動画、グリッドレイアウトで提供されている数々のコンテンツがとても楽しく興味深い。

www.career.dentsu.jp


東急エージェンシー

f:id:sntkk3:20170910174023p:plain

ポップでカラフル、画面スクロールに伴うアニメーションが躍動的!

www.tag-recruit.jp

ADK

www.adk-recruit.jp

「相棒採用」って企画も面白い!

朝日広告社

www.asakonet.co.jp

FICC | デジタルエージェンシー

www.ficc.jp



その他、リクルートページ

avex group holdings

recruit.avex.co.jp

ヤフー

about.yahoo.co.jp

Wiz(ワイズ)

012grp.co.jp

オロ

www.oro.com

CROOZ(クルーズ)

recruit.crooz.co.jp

ビーワークス

recruit.beeworks.jp

住商メタレックス

www.metalex.co.jp

トゥモローゲート

www.tomorrowgate.co.jp

Atrae

atrae.co.jp

アチーブメント

recruit.achievement.co.jp

ダイアモンドヘッド

diamondhead.jp

Internet Initiative Japan

www.iij.ad.jp


いえらぶGROUP

いえらぶGROUP 採用2018

リスペクト

saiyo.respect-pal.jp

パーソルキャリア

www.persol-career.co.jp


まとめ

各社なかなか凝っていて、見てて楽しいサイトばかりです。

・シングルカラム
・動画
・アニメーション
によるサイトが多いのもここ最近の特徴ですね。

【WordPress】XSERVERでのSSL設定は超簡単

f:id:sntkk3:20170903205157p:plain

WordPressサイトにSSL設定を導入してみました

SSLって?

ブラウザのアドレスバーで以下のように表示されるページのことです。
f:id:sntkk3:20170903205814p:plain

ページをSSL化(セキュリティ的に強化される)することで、SEO的に有利になる(検索エンジンで表示してもらいやすくなる)と言われています。


XSERVERでは、サイトへのSSL設定がこんなに簡単、
以下、手順をご紹介いたします。

XSERVERでのSSL設定手順

1. サーバーパネルにログインします。
www.xserver.ne.jp

2. ドメイン > 「SSL設定」をクリックします。
f:id:sntkk3:20170903204223p:plain

3. ドメイン選択画面
対象ドメインの「選択する」をクリックします。
f:id:sntkk3:20170903203507p:plain

4. 「独自SSL設定の追加」タブを選択
f:id:sntkk3:20170903203700p:plain

5. 「独自SSL設定を追加する(確定)」ボタンをクリックします。

SSL新規取得申請中です…

といったメッセージが表示され、ここから 1時間ほど待ちます。


サーバーパネルでの申請・設定は以上で完了です。


(SSL設定申請後の流れ)

ここからは、先程の設定・申請から1時間ほど経過した後の作業となります。

1. 再びXSERVERのSSL設定(前述手順2.~3.の設定画面)を確認すると、以下のように独自SSLアドレスの記載がありますので、このリンクから対象サイトにアクセスしてみます。

 f:id:sntkk3:20170904231633p:plain


2. 管理画面にログインして、
 ダッシュボード 「一般」>「設定」をクリックします。

3. 「WordPress アドレス (URL)」「サイトアドレス (URL)」のアドレスを「https://~」に変更し「変更を保存」します。
 f:id:sntkk3:20170904232523p:plain


4. 試しに記事を作成すると、ちゃんと「https://~」と表示されました。
 f:id:sntkk3:20170904232622p:plain
 

以上で独自SSLのための設定完了です。