Nuxt.jsを使おう:日常業務編

  • 環境構築編
    • PCの設定など、一回だけ行う作業
    • 記事ではMacを対象としていますが、Windowsでも応用可能です
  • プロジェクト構築編
    • 新規に作業するときなど、新たに仕事を請け負うたびに行う作業
  • 日常業務編(いまここ
    • プロジェクトの進行中、つまり仕事を進めるときに行う作業
  • 初心者のとっかかり編
    • 初心者がまず最初に何から学べばわかりやすいかを弊社なりに考えた結果

全4回にわたって弊社が猛プッシュしているNuxt.js。そこまでしてオススメするほど、導入するとサイト制作が便利になる、段違いに価値のあるツールですがいよいよ日常業務編。
この日常業務が使いやすくなければ導入する意味がないので、ここはさくっといきます。
作業を始める前や作業中、「あれ?あれどうやってするんだっけ?」と思ったときにはこのページを思い出してもらえれば、すんなり解決すると思います。

作業開始と作業終了時

作業開始はコマンド一発。作業終了はショートカットキー一発です。
そのものずばりを書いておきます。

作業開始

npm run dev

デフォルトなら
http://localhost:3000
で作業用サーバーが立ち上がります。ターミナル画面にその旨が表示されます。

作業終了

ターミナルでCtrl + C

ちなみにターミナルを停止させたいときはCtrl + C です。カーソルが明滅しながら表示されていれば、入力受け付け状態、それ以外は実行状態。実行状態を停止するには Ctrl + C。これを覚えておくとNuxt.jsの開発時だけでなくいろいろと応用が利いて便利です。

何かうまく動かないとき

最近のターミナルはけっこう親切で、うまく動かないときも表示されているメッセージを読むとそのものずばりな解決方法が提示されてたりするんですが、そうでない場合も多いですし初心者はとくにうまく動かないときにパニックになってしまう気持ちもよくわかります。
うまく動かないときはまず次の点を再確認してみましょう。

Nuxt.jsのプロジェクトフォルダで作業してるか(ls -lコマンドを打ったときにpackage.jsonとnuxt.config.jsは表示されるか)?

それでもうまくいかない場合、次の作業を試してみます。

  1. [ node_modules ]フォルダをまるごとゴミ箱に入れる
  2. そのあと、次のコマンドを実行
npm install

これは、プロジェクトに使ってるパッケージのいずれかに問題がある可能性を疑っていて、どれがその問題のパッケージなのか探り当てるのも作業コストがかかりすぎるのでそれならば一旦全部削除して、もういちど最初からパッケージのインストールを試みています。
この操作はたまに行うことになるかもしれませんので、覚えておくと良いです。
ターミナル作業に慣れてくると、このような複雑な作業もコマンド一発で再現できるようになるので、その便利な恩恵を活用しています。

それでもうまく動かない場合、npm(とNode.js)のアップデートを試みます。
次のコマンドを実行してみます。

nodebrew install-binary stable

続けて次のコマンドを実行します。

nodebrew use stable

納品時、仮アップ時

納品ファイルや仮アップファイルを作るには次のコマンドを実行します。

npm run generate

distというフォルダが出来るので(おそらくディストリビュートの略)、できあがったこのdistフォルダの中身が納品物一式です。

参考までに

「なんのコマンド打ったらいいんだっけ?」と忘れるたびに、このページを開けばいいのですが、作業中のコマンドにはある程度覚えやすい法則があります。

完全に習得する必要はありませんが、頭の片隅に置いておくと、いずれ役に立つかも知れません。

npm run 何々、で作業中はコマンドを実行させてる

題の通りですが、作業中はnpm run に続けて、何かしらのコマンドを打つことが多いです。このことさえ覚えておくだけでもだいぶスムーズになるかもしれません。

では、npm run のあとに続く何々のコマンドはどうなってるのか、と言いますと、一連の記事で何度も出てくる[ package.json ]に書かれてあります。

{
  "name": "test_project",
  "version": "1.0.0",
  "description": "My wonderful Nuxt.js project",
  "author": "Masamune",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "nuxt": "^2.0.0",
    "bootstrap-vue": "^2.0.0-rc.11",
    "bootstrap": "^4.1.3",
    "@nuxtjs/axios": "^5.3.6"
  },
  "devDependencies": {}
}

[ package.json ]を開くとこんな感じで書かれてあると思いますが(中が多少違ってても大丈夫です。むしろ全然違う場合もありえます。後述しますが部分的にあってればこのまま説明を読み進められます)、注目するのは次の部分です。

  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },

この、”scripts”に入ってある値が、何々の部分になります。
詳しく書くと、npmにある“コマンドのエイリアス機能”なんですが、つまりは本来複雑な入力をしないとうまく動かないコマンドを、package.jsonの”script”部分で設定しておけば、[ npm run ]のあとに続いて別名で実行できる機能になります。何のことやらわからなくても、とりあえずこれを見れば、[ npm run ]のあとに続けて [ dev ] と入力したり、 [ generate ] と入力したりすれば良いのかーという手がかりすることができます。

日常でつかうコマンドなどをマスターすれば、あとは初心者としてのとっかかりを伝えていきます

Nuxt.jsをつかおう:プロジェクト構築編

  • 環境構築編
    • PCの設定など、一回だけ行う作業
    • 記事ではMacを対象としていますが、Windowsでも応用可能です
  • プロジェクト構築編(いまここ)
    • 新規に作業するときなど、新たに仕事を請け負うたびに行う作業
  • 日常業務編
    • プロジェクトの進行中、つまり仕事を進めるときに行う作業
  • 初心者のとっかかり編
    • 初心者がまず最初に何から学べばわかりやすいかを弊社なりに考えた結果

プロジェクト用のフォルダを作る

まずはプロジェクトを作成します。どこか適切なフォルダを作ったらVScodeを立ち上げて「ファイル」→「フォルダーを開く」からそのフォルダーを選びます。

メニューから「ファイル」→「フォルダーを開く」で該当フォルダーを開く

VScodeの画面下にターミナルウインドウが表示されていなければ(通常は表示されているはず)、メニューから「表示」→「ターミナル」を実行してターミナルウィンドウを表示します。

メニューから「表示」→「ターミナル」でターミナルを表示

この時点で、プロジェクトフォルダがカレントフォルダ(現在の位置)の状態でターミナルが開きますので、ターミナル作業がしやすいです。今後、特に記載がなければターミナル作業はこのVScodeのターミナル画面で作業することを前提とします。

プロジェクトにNuxt.jsを構築

ターミナルウインドウをクリックして、入力状態にします。入力状態になっているとカーソルが明滅します。
公式サイトの説明を参考に、次のコマンドを実行します。

npx create-nuxt-app <project-name>

<project-name>のところは適切なプロジェクト名にしてください。このプロジェクト名がフォルダ名にもなります。
npxコマンドは、最新のnpmがインストールされていれば(具体的には5.2.0 以降)標準でインストールされているはずです。

例えばプロジェクト名を「test_project」にしたいなら、

npx create-nuxt-app test_project

と入力します。

しばらくいろいろとPCが働いたのち、何やらいくつか質問されます。環境やバージョンによって画面は若干違う場合がありますが、基本は同じはずなので適宜自分の環境に置き換えて操作してください。

? Project name (test_project) 

↑プロジェクト名を再度聞かれます。括弧内にデフォルトが提示されるので、デフォルトのままで良ければそのままEnterキーを押します。変更したい場合はここで直接入力してください。

? Project description (My remarkable Nuxt.js project) 

↑プロジェクトの概要文を聞かれます。デフォルトで良ければそのままEnterキーを押してください。

? Author name (Masamune) 

↑作成者の名前を聞かれます。デフォルトで良ければそのままEnterキーを押してください。

? Choose the package manager (Use arrow keys)
❯ Yarn 
  Npm 

↑パッケージマネージャーをYarnとNpmのどちらを使うかを聞かれます。何のことかわからない場合は、カーソルをNpmにあわせてEnterキーを押してください。このブログではNpmを使う前提で説明を進めます。

? Choose UI framework (Use arrow keys)
❯ None 
  Ant Design Vue 
  Bootstrap Vue 
  Buefy 
  Bulma 
  Element 
  Framevuerk 
  iView 
  Tachyons 
  Tailwind CSS 
  Vuetify.js 

↑UIフレームワークを使用したい場合、何を使うか聞かれます。このブログではBootstrapを使う前提で説明を進めますので、カーソルをBootstrap VueにあわせてEnterキーを押してください。
ちなみに、この操作はあとで変更できます。
Nuxt.jsに慣れてきたら、ほかのUIフレームワーク、たとえばVuetify.jsなどに挑戦してみてもいいと思います。

? Choose custom server framework (Use arrow keys)
❯ None (Recommended) 
  AdonisJs 
  Express 
  Fastify 
  Feathers 
  hapi 
  Koa 
  Micro 

↑サーバーサイドのフレームワークを聞かれます。このブログでは使わない前提で説明を続けるのでNone(Recomended)にカーソルをあわせてEnterキーを押してください。
Nuxt.jsに慣れてきて、サーバーサイドレンダリングなどにも挑戦したい場合、Expressなどをこの段階で導入しておくと、あらかじめさまざまな設定がされた状態でプロジェクトがセットアップされますのでおすすめです。

? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to inv
ert selection)
❯◯ Axios
 ◯ Progressive Web App (PWA) Support

↑ここは操作方法が少し変わっていて、カーソルを合わせてスペースキーを押すたびに選択/選択解除が切り替わります。Webページのフォームのチェックボックスみたいな動きです。
この記事では触れませんが、使う機会が多いのでAxiosを選択状態にしてください。
PWAサポートのほうは、モバイルアプリを作るときに選択するものなのでこのブログでは触れません(選択解除状態のまま進めて結構です)。

? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to inver
t selection)
❯◯ ESLint
 ◯ Prettier
 ◯ Lint staged files

↑キレイなコーディングかどうか、機会が判断してくれるおせっかい機能を導入するかしないか聞かれます。
Nuxt.jsに慣れてきたらESLintなどの導入をおすすめしますが、Nuxt.jsを使う前から一度にたくさんのツールを覚えるのは大変なので、このブログでは触れません。全部空白のままEnterキーを押して次のステップに進めて結構です。

? Choose test framework (Use arrow keys)
❯ None 
  Jest 
  AVA 

↑テストフレームワークを選びます。こちらも慣れてきたらJestなどの導入をおすすめしますが、現段階では何もなしで結構です。ブログでも触れません。

? Choose rendering mode (Use arrow keys)
❯ Universal (SSR) 
  Single Page App 

↑サーバーで動作するサイトを作るか、それとも普通にアップロードするだけの静的ページを作るか聞かれます。
このブログでは静的ページをつくる説明にとどめますのでSingle Page AppにカーソルをあわせてEnterキーを押してください。

? Choose development tools (Press <space> to select, <a> to toggle all, <i> to i
nvert selection)
❯◯ jsconfig.json (Recommended for VS Code)

↑VSCodeを使うときに便利な設定ファイルをあらかじめ作成しておくかどうか聞かれます。
jsconfig.json (Recommended for VS Code)にカーソルを合わせてスペース機を押して選択状態にして次に進みます。

🎉  Successfully created project test_project

  To get started:

        cd test_project
        npm run dev

  To build & start for production:

        cd test_project
        npm run build
        npm run start

↑しばらく待って、上のようなメッセージが表示されればプロジェクトは作成成功です。
この記事では例としてプロジェクト名を「test_project」にしたので同名のフォルダーが出来てるはずです。

現時点で操作に不安があった場合、フォルダーごと削除してもう一度同じ操作を実行すれば何度でもやり直しが出来ます。
もしここまでの作業で不安があるままプロジェクトを進行してしまってから、あとでこの作業をやり直したいと思った場合はやり直しが効かないことはないのですが考慮すべき事項がたくさん増えてしまうためさまざまなスキルが要求されます。ですので、現時点で不安がある場合は思い切って作成したフォルダーを捨ててしまって、この記事の最初からプロジェクト作成をやり直すのもひとつの手でしょう。
また、時間のあるときに「test_project1」「test_project2」など、プロジェクト作成を何回もやってみることも強くおすすめします。間違えても間違えなくても、作成したフォルダを捨ててしまえばいいので、何回か操作をやるうちにプロジェクト作成の自信がついてくると思います。

プロジェクトディレクトリーに移動する

ターミナルが苦手な人が一番迷うのが、「カレントディレクトリ(現在どのフォルダの中で作業してるのか)を意識していない」ことが原因の場合が多い気がします。
つまり逆に言うと、現在どのフォルダの中で作業してるのかを意識するようになれば、迷うことはかなり少なくなります。

ややこしいのが、このブログ記事でも今までのようにコピペだけで動作するものと、カレントディレクトリを意識しないといけない作業も混在していて、初心者は特に迷うように思えます。
目安としては、システムのセットアップやアプリのインストールなどはどのディレクトリからでもコマンドをコピペでOK、プロジェクトを作ったりファイル・ディレクトリを操作する作業はカレントディレクトリを意識する必要がある、というふうに考えられるようになると、作業がだいぶわかりやすくなるかと思います。

現在のフォルダを知る、わかりやすい方法

というわけで、意識して現在どのフォルダで作業しているかを知る必要があります。
慣れた人ならコマンド待機状態の表記だけでも知ることが出来るのですが、もっと手っ取り早い方法があります。

それは、現在のフォルダの中身を一覧するコマンドを打つこと、です。

ls -l

上記のコマンドを打ち込んでください。毎回コピペするのも面倒だと思うので、覚えておくといいでしょう。半角エルエス半角スペース、半角ハイフン、半角エルです。使ってるとそのうち覚えます。

実は、「現在どのフォルダなのか」を知るそのものずばりなコマンドもあるにはあるのですが、そちらよりも現在のフォルダの中身を一覧する方がわかりやすいのです。それには理由があります。

ふだん作業してるときも中身の一覧を表示させてる

ふだん作業してるときも、わたしたちは「どのフォルダか」よりも「中に何が入ってるか」を常に表示させています。
GUIだと中身の一覧が常に表示されてるので困らないのですが、ターミナルで作業してると普段から表示されているわけではないので、時々迷うのです。ですので、迷ったらエルエス、ハイフンエルを唱える癖を付けて、フォルダの中身を一覧すれば、どのフォルダで作業しているのか把握しやすくなります。

Nuxt.jsのプロジェクトフォルダーの中にいるか確認する

ですので、エルエス、ハイフンエルを打ち込んで、フォルダの中身を表示してみましょう。

ls -l

結論から言うと、次の二つのファイルがあるかどうか、が見分けるための重要な鍵になります。

  • package.json
  • nuxt.config.js

さらに結論からいうと、プロジェクトを作成した直後では、上の二つは表示されないと思います。つまり今現在はNuxt.jsのフォルダの中にはいないということです。

ではどういうふうに表示されているかというと、プロジェクト作成直後には

test_project

とだけ表示されているはずです(この記事ではプロジェクト名をtest_projectとして進めているのでこういうふうに表示されていますが、もし違うプロジェクト名で作業をした場合はそのプロジェクト名に適宜置き換えて読んでください。つまりプロジェクト名として設定したフォルダが存在しているはずです)。

そこで、そのプロジェクトフォルダに移動します。

cd test_project

そしてフォルダの中身を表示してみましょう。

ls -l
  • package.json
  • nuxt.config.js

たくさん表示されると思いますが、上の二つのファイルが表示されていれば、プロジェクトフォルダで作業していることになります。
今後は、ここで作業するのが基本になりますので、この二つのファイルが存在するフォルダに今現在いるのかどうかをしっかり意識しながら作業を進めてください。

PugとStylusをインストールする

プロジェクトが作成できたら、次にPugとStylusを使えるようにします。
PugはHTMLの閉じタグを書かなくてもすむようになる便利ツール、StylusはCSSの波括弧やコロンやセミコロンを書かなくても済むようになる便利ツール、のようなものです。
たったそれだけ?と思うかも知れませんが、作業が絶大に楽になるので、是非入れておきましょう。この一連のブログ記事でも入れてあるものとして説明します。

前章で長々と説明したように、プロジェクトフォルダの中(package.jsonとnuxt.config.jsが存在してるフォルダ)で次のふたつのコマンドを実行します。

npm i -D pug pug-loader pug-plain-loader
npm i -D stylus stylus-loader

上がPugのインストールで、下のコマンドがStylusをインストールするコマンドです。

2020-01-10 追記
VUetifyが2.0からstylusではなくsassに移行したようです。当社でもVuetifyはよく使うので、あわせてsassに移行しています。stylusの代わりに以下のコマンドでsassをインストールすることも検討してみてください。

npm i -D node-sass sass-loader

公式サイトを参考に
CSS プリプロセッサを使うには? – NuxtJS
以下のように一気にインストールしても構いません。

npm install --save-dev pug@2.0.3 pug-plain-loader coffeescript coffee-loader node-sass sass-loader

以上です。詳しくは以下のリンクを参考にしてください。
プリプロセッサ – Nuxt.js

これでプロジェクトのセットアップは完了しました。
次はいよいよ実際の作業編です。

Nuxt.jsをつかおう:環境構築編

サイト制作にNuxt.jsを取り入れると何がいいのか、というと、公式ページのトップにかかれてある言葉がそのまま一言一句同意できます。

Nuxt.js は Vue.js アプリケーションの開発を楽しくするために必要なすべての設定が揃っています。

https://ja.nuxtjs.org/

とはいえ、いきなり「Nuxt.jsはいいぞ」と言われてもナンノコッチャかわからん上にどうしたらいいかも迷うと思いますので、ここではNuxt.jとは何か、何が便利なのか、にはできるだけ触れずに、Nuxt.jsを導入してサイト制作を便利に進めるための準備について書いていきます。
全三回、次のような構成になっています。

  • 環境構築編(いまここ)
    • PCの設定など、一回だけ行う作業
    • 記事ではMacを対象としていますが、Windowsでも応用可能です
  • プロジェクト構築編
    • 新規に作業するときなど、新たに仕事を請け負うたびに行う作業
  • 日常業務編
    • プロジェクトの進行中、つまり仕事を進めるときに行う作業
  • 初心者のとっかかり編
    • 初心者がまず最初に何から学べばわかりやすいかを弊社なりに考えた結果

VSCodeのインストール

Nuxt.jsとは直接関係ないですが、VSCode(Visual Studio Code)をインストールしておくととても便利なので(特にターミナル画面に心理的抵抗のある人は、プロジェクトフォルダからターミナル開けるだけでも安心感やばいはず)先にインストールしておきます。

  1. このページから必要ファイルをダウンロード
  2. ダウンロードしたファイルは圧縮されてるので解凍
  3. 解凍してできたファイル(Visual Studio Code.app)を「アプリケーション」フォルダに移動
  4. アプリケーションを立ち上げる。初回だけ実行許可を問われるので問題なければ「開くボタン」(ないし肯定するボタン)を押す

VSCodeをコマンドから開けるようにしておく

これもNuxt.jsとは直接関係ないのですが、ターミナルでの操作はどうしても多少増えますのでターミナルからVSCodeを立ち上げるコマンドも入れておいたほうがあとあと便利です。

ちなみに、「おれこの作業してたっけな?(ターミナルからVSCodeを立ち上げるコマンドを入れてたっけな?」と不安に思ったら、ターミナルに次のコマンドを打ち込むとすでにインストールされているかされていないかが結果によってわかります。

code -v

次のように、バージョン情報が表示されたら、コマンドはすでにインストールされていると考えられます。

$ code -v
1.37.1
f06011ac164ae4dc8e753a3fe7f9549844d15e35
x64

すでにインストールされている場合は以下の作業は必要ありません。

  1. こちらのページを参考に、まずVSCodeを起動します
  2. (Ctrl+Shift+P) を押して出てきた入力欄に次の文字を打ち込みます(途中まで打ち込むと、候補が出てくるので、それを選ぶと楽かと思います)
  3. Shell Command: Install ‘code’ command in PATH
  4. VSCodeを再起動します。

Gitのインストール

これも直接はNuxt.jsと関係ないのですが、プロジェクト進行中に複数人数でファイルのやり取りをする場合に大変便利なので先にインストールしておくことをおすすめします。
そう、「バージョン管理とか難しそうだし自分には特に必要ないかなー」と思ってる方も、多少の追加作業でファイルのやり取りがとても便利になるので gitはインストールしておいたほうがいいのです。
手順は以下のとおりです。

  1. すでにgitがインストールされてるかチェック
  2. されていない場合、homebrewがインストールされているかチェック
  3. されていない場合、まずXcodeとhomebrewをインストール
  4. gitをインストール

こちらのページが大変わかりやすくまとまっています。
Git のインストール 〜Git をMacにインストールしよう〜 | バージョン管理システム入門(初心者向け)

すでにGitがインストールされてるかチェック

次のコマンドをコピペして実行してください。

git --version
git version 2.17.1

上記のようにバージョン情報が表示されればすでにGitがインストールされています。
表示されない場合、先にHomebrewをインストールします。

Homebrewがインストールされているかチェック

次のコマンドをコピペして実行してください。

brew doctor
Your system is ready to brew.

上記のような表示が出ればすでにインストールされています。
表示されない場合、XcodeとHomebrewをインストールします。

Homebrewをインストール

HomebrewはMacのパッケージ管理ソフトです。これをインストールしておくと、Gitに限らず今後いろいろとインストールしたりバージョンアップしたりするときに便利なので先にインストールしておきます。Homebrewをインストールする前に、まずXcodeをインストールします。
次のコマンドをコピペして実行してください。

xcode-select --install

しばらくしてXcodeがインストールされたら、次に以下のコマンドを実行してHomebrewをインストールします。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

最新の情報はHomebrewの公式サイトを参考にしてください。

Gitをインストール

Homebrewがインストールされていれば、まず最初に次のコマンドを実行してください。

brew update

しばらくして、アップデートチェックが完了したら次はこのコマンドを実行します。

brew install git

これでGitのインストールは完了です。

Node.jsとnpmをインストール

Node.jsとは:ウェブ開発環境において事実上のデファクトスタンダードになりつつある、Javascript実行環境。

npmとは:上記Node.jsのライブラリなどを扱うパッケージマネージャー。Node.jsをインストールすると一緒にインストールされる。

なんのことやらわからないかもしれませんが、ウェブ開発のややこしいことをいろいろしてくれるお助けアプリみたいなものです。え?Node.jsそのものがややこしいって?そうは言っても、Node.jsが無いともっとややこしくなったことを、Node.jsがだいぶラクにしてくれてるんです。これでも。
というわけでインストールしていきましょう。

  1. Node.jsがすでにインストールされているかチェック
  2. されていなければNode.jsのバージョン管理ソフトであるnodebrewをインストール
  3. Node.jsをインストール

Node.jsがすでにインストールされているかチェック

次のコマンドを実行して、バージョンが表示されればインストールされています。

node -v
v11.16.3

上記のようにバージョン情報が表示されればすでにインストールされています。表示されなければ次の手順を実行していきます。

Node.jsのバージョン管理ソフト、nodebrewをまずはインストール

次のコマンドを実行してnodebrewをインストールしてください。

brew install nodebrew

念のため、インストールするディレクトリをあらかじめ作成しておきます。

mkdir -p ~/.nodebrew/src

nodebrewを使って、Node.jsの安定バージョンをインストールします。

nodebrew install-binary stable

おそらくこれが終わった時点でインストールされた安定版が使用されますが、念の為「安定版のNode.jsを使う」というコマンドも実行しておきます。

nodebrew use stable

次のコマンドを実行して、パスを通します。

echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile

今おこなった設定を反映させます。

source ~/.bash_profile 

さいごに念の為、次のnodeコマンドを実行してバージョン情報が表示されればインストール成功です。

node -v

これにて環境構築編は終了です。
PCを新たな環境にしない限り、この記事の作業は一回ですみます。
続いてプロジェクト構築編に進みます。

YouTubeのおすすめVR動画を紹介するよ

3年間程前からYouTubeでVR動画を見まくってる筆者が、おすすめのVR動画を紹介しちゃいます。ちなみに先に言っておきますがえちえちな動画はナシです。なぜか?このブログが何のブログか知っていますか?そう、会社のブログです。そして私は社長です。自分の会社のブログにえっちな動画紹介する社長がどこの世界におりますか?弊社“子育てとか応援する会社です”みたいなメッセージも発信してるのに違う意味に捉えられるやないですか。ってことで、あの、ちゃんとしたやつばっかりです。

VR動画って何?っていう疑問とか、どうやって再生するの?みたいな紹介は後回しにして、さっそくバシバシ紹介しまくっていきましょう。VR動画といっても、普通にPCでも再生できますしスマホだとスマホそのものを動かすともっと良い感じに見れるんですよ。
これをきっかけにVR動画に興味を持ったら、記事の最後のほうにあるVR機器の紹介も覗いてみてください。

ウクライナ3連発。名も知らぬ遠き町がぐっと身近に感じる。

なんかおそらくウクライナの小学生達の課外授業風景。
マーベル模様を作るときの子供達のぱっとした表情。金床を打つ得意顔。すべてがいい。
ウクライナのコスプレイベント。遠く海を隔てた知らないところで体験する日本。
トップモデルを目指す女の子達のトレーニング風景。

このウクライナのチャンネルはVR動画作成とともにモデルの育成事業も行っているのか、活発にVR動画の作成を行っています。全然知らない国の全然知らない地方の、がんばってる人たちをこうしてVRで間近に見ることができると、なぜだか感情移入もマシマシになって、親近感が湧きますね。

どうぶつさんたちだいしゅうごうだわいわい

おおかみ
アホウドリ
ナマケモノ
ペンギン
ゾウ

まさかナショジオをチャンネル登録してない人なんていないと思いますが、ねんのため。VRで居ながらにして動物さんたちと仲良くできますね!ナショジオのチャンネルにたくさんありますので、ひとつひとつ紹介していくとキリがないですがどれも楽しいのでぜひご覧ください。
ナショジオではないですが、動物編で特におすすめなのはオオカミ。
どこからともなくオオカミの鳴き声が聞こえてきたなと思ってあたりを見回していると、知らないうちに群れのボスに近づかれます。群れのほかの者たちにも、姿は見えないがどうも囲まれているよう……。ただ、警戒しているのはこちらだけではなく群れも同じようで、正体不明のわれわれ(実際はVRカメラ)に対して無闇に群れを危険に導くことをボスは避けます。ボスの一声でさっといなくなるオオカミたち。一瞬の出来事です。森に住む動物たちとの、気高く不思議な接触を1分半で体験できる秀逸なVR動画となっています。

音楽、ダンス部門、選りすぐり3選

ラ・ラ・ランドのミュージカルをVRで。完成度の高さから、もうこれだけでほかに何もいらない
こちらもミュージカル。目の前どころか鼻先で繰り広げられる美男美女達の熱演が大迫力!
OneRepublicの最新MVもVRで

このジャンルとVR動画との相性の良さは折り紙付きで、仕事で疲れたあととか眠る前に毎日でも見たいくらい癒やされます。

舞台・演劇

中国のすごい田舎の観光地にある宮廷舞踊っぽい
中国のどこか地方の獅子舞
https://youtu.be/RDNUdPk4ZHQ
やってる子のピリッとしたムードまで伝わってくる

私個人の好みで、地味〜なラインナップを紹介しています。ものすごいお金のかかった舞台よりも全然知らないところの何でもない催し物を意味もわからず体験するのが好きなので、どうしても紹介動画が地味になってしまいます。本当はサルティンバンコVRとかも紹介したいんですけどね〜。
VR動画で舞台系が残念だな、と思うのが、VR動画の特性上、被写体が遠いと迫力が不足するんですよね。舞台との距離があればあるほど、いや仮に舞台と撮影距離が近かったとしても迫力に欠けるというのが目下の課題だと感じています。それでも、一生のうち絶対に行かないであろう名も知らぬ催し物に臨場する感覚はVRならではの体験ですので、個人的に好んで検索するジャンルの筆頭になっています。

旅・アクティビティ・人・その他

ニューヨークをヘイタクシー!
インドの女性のとある一日
夕暮れ間近の海岸。美しい女性がなんでか知らないけど布ヒラヒラさせててきれい!
旅行先でのジップライン。これが酔わないようになってくるとVR動画慣れしてると言える
ミャンマー、カトマンズの町並み
華やかなバーレスクの舞台裏!こういうのを待ってた
宇宙をVRで見ると、思ったより臨場感ない。なんだろう、あまりに現実離れしてるからなのか、それとも遠景はVRとして臨場感に欠ける法則から抜け出せないからなのか
ロープダンスをVRで。ふと振り返ると立っている、演者にスポットライトを向ける人物の何とも言えない表情が記憶に強く残る
工事現場のモノレールをVR体験。こういう、わざわざ絶対行かないところの体験がVRの醍醐味
女性登山家たちのフリークライミング体験

大学堂でもVR動画作ってみました

地元の盆踊りをVRにしてみました。
無編集で、撮った動画をそのままアップしています。私はこういう、何でもない地元の日常をVRにして、豊能町のこと知らない人に見てもらうことにとてもロマンを感じています。今後もできるだけ豊能町の日常風景をVR動画として残していきたいと考えています。

VR動画をみてみよう!

さてさて、ここまで紹介したVR動画。ただPCやスマホで見れなくもないですが、せっかくなら機材をそろえて臨場感ある状態で鑑賞してみたいですよね。
安いやつでいいならスマホにとり付ける以下のようなものもあります。

値段もピンキリでいろいろありますが、この手のものなら自分の好きなものを選ぶと良いと思います。結局はレンズ二つでスマホの画面をのぞき込む構造に変わりはなくて、あとの付加価値としてはイヤホンがあるかないか、あるとしたらどんな感じで装着するか、みたいな違いになってくるのですがこのへんに意味を感じる感じないと思うのも個人差がありますので、つまりは好きなものを選ぶのが良いかと思われます。

スマホにつける上記のようなものではなくて、VRとか専用機となると大きく分けてPCにつなぐやつと単体でいいやつ(PCにつながなくてもいいやつ)の二種類から選びます。
PCにつなぐやつは、高性能PCの処理能力を活かしたより高画質な体験が期待できますが、VR動画の再生だけでしたらPCに繋がないで単体で動くやつでも充分な画質を期待できますので、そっちのほう(PCに繋がなくても良くて、単体で動くやつ)を紹介します。

いろいろある中で今最も手に入りやすい(価格の面でも、販売網など入手性の良さなどの面でも手に入りやすいと言っています)のがOculusというシリーズの機器になります。
Oculusの中でもいろんな種類があって、中にはPCにつなぐやつもありますがここではPCに繋がなくてもいいやつを紹介します。

Oculus goは、VRゲームをあまりせずに、VR動画を主に体験したい場合、今のところ最も適した機械です。デメリットは、近々モデルダウンする噂が流れていることくらいで、そこを気にしないのであれば選ばない理由がないVR動画機器だと思います。

Oculus quest

現在amazonでの売値が高いので公式ストアから購入したほうが良いのが、Oculus questです。VR動画もみたいしVRゲームも楽しみたい場合、選ばない理由はないと思われます。デメリットとしては、ゲームを楽しみたいなら選ぶべき機器なのに、遊べるゲームが極端に少ないという意味わからないことになっていますが、VR好きならそんなこと気にもしないですよね。

大学堂では今後もVRの可能性について研究を続けてまいります

実は数年も前からこんな記事を書いていたりと、地方で暮らすこととVRとの融和性についての研究にいろいろと取り組んでいます。社長はガチのプログラマーなのでVRコンテンツそのものを作ることもできますし、VR動画を作ることもできます。
VR元年と言われて久しいですが(VRが普及しそうでしない、VRが業界特有の言い回し)今後もVRの可能性は模索し続けていきます。

【ちちペディア企画 VOl.2】 電車博士になろう!

父ペディア企画vol.2『電車博士になろう!』が開催されました!!

今回は、なんと!!!✨

近畿日本鉄道様より全面ご協力を頂き、実際に勤務で使用されている備品や鉄道まつりなどでしかお目にかかることのできない『こども制服』なども体験できちゃう、かなーりスペシャルなイベントとなりました✨!!

今回のお父さん先生は、豊能町在住で、4歳と6歳の子をもつお父さん👨‍✈️

お仕事は近鉄電車の運転士をされていて、みなさんがよく利用される通勤電車はもちろん、伊勢志摩ライナーアーバンライナーなどの特急電車も運転している現役の運転士さんです✨!!

なりたい職業ランキングでも、常に上位に入る人気の高い電車の運転士さんですが、実際のお仕事ってどんなかなー!?…ということで、おとうさん先生、よろしくお願いしま〜す!!👨‍✈️

夏休み序盤のこの日、大学堂にはたくさんのファミリーが集まってくださいました!✨

まさに、満員御礼です‼️🙏🙇‍♀️
一気に緊張するお父さん先生…(笑)

自己紹介のあと、まずは運転士さんがどんな風にお仕事をしているのか、『運転士さんの一日』をご紹介✨👨‍✈️

こちらは、一例になりますが、

運転士さんや車掌さんは、終電や始発の電車を動かすために、列車区にお泊りすることや、出勤から退勤まで、運転士さんと車掌さんはペアで乗務すること、出勤時の点呼の際に行うアルコール呼気検査のことなど、普段はなかなか聞けない勤務の裏側などをお話ししてくれました!

そして、運転士さんや車掌さんが持っているこの大きなカバン

中には何が入っているのかな?と、見るたびに思っていたのですが、このカバンの中身も見せてもらうことができました!!✨

トラブル発生時の対処方法が書かれたマニュアルや、お客様への案内資料、3色に光る合図灯などが入っていて、子供たちも興味深々でお話を聞いていました!

この長〜い紙、何だか分かりますか??

こちらは、『ダイヤグラム』という列車の運行表です。

普段は、蛇腹状に畳まれているのですが、広げるとこーんなに大きいんです!!

お客様へ案内する際に何時発で何時着かを調べることができるそうですが、たくさんの線が細かく描かれていて、私たちが見ただけではチンプンカンプン?!笑

皆さんも、駅員さんなどに案内してもらう機会があれば、是非注目してみてください♪

そしてこちら…

実は、イベントが終わってから『あー!!コレ見せるの忘れてたーーー!!💦』と、おとうさん先生がポケットから取り出した鉄道時計。(笑)

運転士さんが電車を時間通りに運行するために欠かせない時計です。

正確な時間にするために、出勤時に毎回時間を合わせるそうです!✨

その他には、近鉄電車や、運転士にまつわるクイズもありました!!

『Q.近鉄には、日本で一番短い名前の駅があります。さて、それは何という名前の駅でしょう??』という問題☝️

みなさんは、分かりましたか〜??♪

正解は…

『つ』〜!!

私たちの地域は、近鉄電車に乗る機会がなかなか無いので、初めて知った!!という方がほとんどでしたが、楽しいクイズでみんな大盛り上がりでした!♪

他にも、近畿日本鉄道さんのホームページでは、こどもから大人まで楽しめるクイズがたーくさん載っていますので、近鉄電車博士になりたい人は、是非クイズにチャレンジしてみてくださいね♪!

URL➡️https://www.kintetsu.jp/kouhou/quiz/

楽しいイベントもいよいよ終盤です!!

残りの時間は、

このイベントの為だけに!!特別に!!

お借りした、こども用制服&制帽体験です♪

こうやって、運転士さんとお写真を撮ることって、なかなかレアな事かも?!💓

大人もお子様も、ノリノリで♪楽しく撮影会をしました♪📸👨‍✈️✨

制帽は、男の子用と女の子用があって、どちらも実際の制帽のキッズサイズ✨リアルでとってもカッコ良かったです❣️

そして今回、このイベントに来て頂いた方には、もうひとつステキなプレゼントが‼️‼️‼️✨❤️

それがコチラ、

じゃ〜〜〜ん‼️‼️

『しまかぜステッカー』✨✨✨

実際に現場で働いているおとうさん先生も、「初めて見た!」と言っていた完全非売品のステッカーだそうです‼️✨👨‍✈️笑

このステッカーを誰よりも喜んでいたのが、他でもない、我らが大学堂の社長🙋🏻‍♂️✨笑

大学堂インターホンのすぐ上にご注目✨
どーーーーん!!✨

「となりの人間国宝さんに、認定〜‼️」…的な感じで、大学堂の一番目立つ場所に貼っていました‼️😆💕

大学堂の前を通る際は、是非、このしまかぜステッカーを見つけてくださいね!✨笑

今回、このイベントに参加してくださった皆様、暑い中、足を運んでくださり誠にありがとうございました!!🙏✨

今後も大学堂では、ちちペディアをはじめ、様々なイベントを開催いたしますので、ぜひご家族やお友達と一緒にご参加くださいませ!💕

イベント企画・運営のご相談承ります!

大学堂では、町内外、大阪市内外、大阪府内外を問わずイベントの企画・運営についての相談も承っています。
こういったイベントで地域や子育てを盛り上げたい方や団体、自治体などございましたらお気軽にお問い合わせください!

お問合わせはこちら

DevLOVE様 キャラクター・アニメーション制作

DevLOVE10周年記念の新しいコミュニティサイト< https://devlove.link/ >のイラストとキャラクターアニメーションを制作いたしました。

約20種のキャラたち


DevLOVEとは2008年発足の開発(Develop)を愛する者たちの集まり。たった二人からはじまったコミュニティは、いまや6000名を超えるメンバーがいるのだとか。

このコミュニティの魅力は
・肩書きやスキルを超えた「ありのままの自分」でいられること
・相談できる仲間がいて、なんでも教え合える仲間がいる。お互いに助け合う文化があること

自分の領域からほんの少しはみ出して挑戦しようとする─……つまりDevLOVEは『越境』する開発者たちのコロニーなんです。

と担当者さんは言います。

越境があるからこそ、みんながまとまって同じ方向を向いていけるんです、と結んだ言葉には、そういう現場を数多く見ているからだろうなと思わせる説得力がありました。

そんなDevLOVEが10周年をむかえるにあたってリニューアル。

多種多様な種族たち

年齢、性別、学歴やスキルの差を越えて、共に学ぶ今の姿を彷彿させるような、多様性のあるキャラクターを、とのことでご依頼いただきました。

業界あるあるを想像しながら、キャラクターの種類や表情・アニメーションを作り上げています。勇者、ケモノ、ロボ、戦隊ヒーロー、モンスター、ドワーフ、マッドマックス、名脇役、力士、恐竜と全部で10タイプいます。ちなみに例えば同じ力士でも、陽気な性格の光属性と斜にかまえがちな闇属性がいたりします(笑)

隣のデスクのあの人は何タイプ?

オフィシャルでは日の目を見ないかもしれませんが、実はそれぞれのキャラに簡易的な性格設定がされていまして。

たとえば学芸会の名脇役タイプは、

名脇役タイプ(リンゴの木役とわかめ役)

一見モブキャラ、目立たない存在。だが、いないと確実に困る人材。 神のひとこと「それ、もう作ってます」

ロボタイプは

ロボタイプ2種(闇属性・光属性)

言われたことしかしない。柔軟性はゼロ。ゆえにチームメイトに誤解されがちだけれど、指示に常に忠実な「仕様書の番人」。

などなど。

これは私だな、あれはあの人だな、なんて想像を巡らせながら見ていただけると嬉しいです。


クライアント情報