働く主婦たちがあなたの町やお店を盛り上げます！
大学堂の取り組みのひとつとして、小さなお店が地域に根差すような社会にしたいという思いがあります。そしてその考え方のもとに取り組んでいる事業のひとつに、“町に小さなお店を根ざしていこう”というものがあります。
大学堂はもともとネット系の会社なのもあって、ネットでは自分が得たノウハウは多くの人にシェアする文化が根付いています。こういった地域の取り組みも、うまくいったノウハウは広くシェアして、多くの人が真似できるようになったほうが、地域の活気に繋がると信じて取り組んでいます。
「桐島、部活やめるってよ」っていうのとおんなじノリで、大学堂、のせでんアートラインのインフォメーションセンターやってるってよ。
やめるとかやってるとか、例えが悪すぎですね。でもやってます。
そもそも、そもそもの「そも」って何なんでしょうかね。そっちも気になりますが、話が進まないのでのせでんアートラインって何なのか、概要だけをざっくり説明します。
公式の説明ではなく、あくまで個人の見解です。
アートラインというのは催しです。何の催しかといいますと、芸術祭です。のせでんアートラインは芸術祭です。2年に一回やってまして、今年で4回目になるそうです。
芸術祭、と聞くとなにやらとっつきにくいような、自分とは関係の薄いような気がするかもしれませんが、気のせいです。関係大ありです。オオアリクイです。関係ないとか言わずに、せっかくのお祭りですので、ここは乗っかって楽しみましょう。
「どこに何があるの？」ですとか「どんな芸術作品があるの？」ですとか、「そもそも何やってるの」とか、ほかにも見どころとか、どんなことでもいいのでインフォメーションやってますんでぜひ大学堂に来てください。
会期中は10:00から16:30まで毎日空いてます！
タイトルの通りなんですが、せっかく自分の住んでる近所で大規模な芸術祭やってるんで、楽しめるなら楽しんだほうが絶対良いに決まってますよね。
私なんかが何も言わなくても、芸術を楽しめちゃう人はもうすでにバリバリ楽しんでると思うので、せっかくなのでここでは「芸術なんて自分には関係ないわ～」と思ってる人向けに、楽しみ方のコツみたいなものを教えちゃいます。
とくに体系立てて芸術を学んだこともない、学の浅い私が言うことなので、それだけにタメになる人にはタメになるかもしれないし、そうでない人には一切響かないとは思いますが、ひとつの余興だと思って読んでいただければ幸いです。
芸術って、ぱっとみてすぐ楽しめること、少ないかもしれません。これだけ娯楽が発達した世の中で、芸術ほど能動的に参加しても楽しめるかどうかわからないものも珍しいと思います。
ものごとには例外もあるので、極めて芸術性の高い娯楽作品、もしくは極めて娯楽性の高い芸術作品というものも存在しますので、芸術作品のほとんどが簡単に楽しめるわけでは無い、と決めつけるのも語弊がありますが、少なくとも芸術家は娯楽を提供しようとしているわけでは無いことのほうが多いので芸術作品の鑑賞すなわち誰もが簡単に楽しめるというふうに紹介するのは難しいと思います。
ですが、というか、ですので、というか、芸術作品には楽しみ方のちょっとしたコツがあります。それが小見出しにも書いたとおり、「自分の内側から生まれてくる問いかけに、耳を傾けること」です。
すでに用意された答えが多い世の中で、芸術作品とはあなたへの問いかけだと思います。
それも外側から問いかけるのでは無く（外部から用意された問いかけは最近だと謎解きゲームとか人気ですよね）、あなたの内側から問いかけが生まれてくるように設定されています。なぜだろう、どうしてだろう、なんなんだろう……。などなど。
芸術作品を通じて自分の内側から問いかけが生まれてくる、ということそのものが日常では滅多に無い体験なので、はじめのうちはその内側の問いかけに気づかないかもしれません。そして気づかないまま、モヤモヤとするかもしれません。
ですが、この問いかけに耳を傾けることが出来れば、ものすごく貴重な体験を得ることになるはずです。
「近所でやってる芸術祭ってことで行ってみたんだけど正直よくわからなかった」
そう、よくわからなくていいんです。大正解なんです。
すぐ見つかる答えが用意されているわけではないのです。
よくわからなかった、その気持ちをおみやげに持ち帰ることが出来れば、最初は大成功だと思います。そんな体験、近所で滅多にできませんよね。
まずはそこからはじめてみて、次から次へと生まれてくる「あれはどうだったんだろう、なんなんだろう、なぜなんだろう」へと耳を傾けることが出来れば、もう充分に芸術を楽しんだと言えると思います。
もちろん、関係者含めスタッフは「よくわからなくて正解。だからわかりにくくしてる」なんて思ってる人一人もいないので、よくわからなくならないように、楽しみ方を日夜ガイドしています。大学堂のインフォメーションセンターもその一環です。
考え方が変われば行動が変わります。行動が変われば人生が変わるかもしれません。ひとつの芸術作品から、考え方が変わり人生まで変わった体験は、そう珍しいものではありません。
何歳になっても楽しめます。90歳でも。3歳でも。早すぎることも遅すぎることもないですので、これを機会にぜひとも芸術に親しんでみてください。
普段の街角を曲がれば、あなたに問いかけてくる。
自分の住む町の芸術祭。
インフォメーションセンターでは、そんなのせでんアートラインの楽しみ方、教えちゃいます。ぜひお気軽に大学堂までお立ち寄りください。
Nuxt.jsを業務で使うための必要最低限は前回までの3回で説明できたと思いますが、おそらくそもそもNuxt.jsって何？ってところから疑問が残る形になっていると思います。
公式サイトが、これ以上ないくらいわかりやすく的確に説明されていますので上記以外のページもとにかく熟読することを強くオススメします。
しますが、公式ドキュメントにおびえる初心者の気持ちもよくわかりますので（私も初心者の時は初心者ですので）このページではその補足として、まずとっかかりを探すための勘所などを説明していきたいと思います。
再度紹介しますが、公式ドキュメントのこちら
はじめに – Nuxt.js https://ja.nuxtjs.org/guide
にあるように、Vue.jsやVueRouterなど、いろいろなライブラリがあらかじめ便利に設定された状態がNuxt.jsと考えることも出来ます。
ということはNuxt.jsを使いこなすには土台となるVue.jsやVueRouterなどの知識が前提として必要になるということでもありますが、そんなに一度に覚えるのはとても大変だと思いますので、ひとまずはNuxt.jsはそういうもんだと覚えておくにとどまることにします。
ただし、Vue.jsについて全く予備知識ゼロだとつらいかと思われますので、ひとまずVue.jsについて説明します。
ややこしいですが、Vue.jsというライブラリを使いやすくしたのがNuxt.jsというフレームワークです。言葉を意味まで含めて正確に理解する必要はないですが、なんとなくNuxt.jsというものがあってそれはVue.jsというものを使ってるんだな、と思っていれば理解が深まります。で、まずはNuxt.jsを置いといてVue.jsのリンクから紹介します。
はじめに — Vue.js https://jp.vuejs.org/v2/guide/
こちらの、Vue.js公式サイトの説明を熟読することをオススメしますが、最初に読んだだけでは大部分がなんのこっちゃかわからないと思います。それでいいです。
Vue.jsについて、誤解を恐れずに説明するなら、jQueryのようなJavaScript便利ツール、あれのもっと高性能版がVue.jsです。
「自分はjQueryで事足りてるし、それ以上の高性能版は特に必要ないかな」と思われるのもごもっともです。最初に出しといてなんですがこの記事でjQueryと比較してどうこう、ということについてこれ以上突き詰めることはしませんので、Vue.jsが必要ないと感じたら無理に使う必要はないものです。
ただし、Nuxt.jsはVue.jsなどをひとまとめに便利に使うフレームワークですので、Nuxt.jsを使いたいのであれば最低限のVue.jsへの理解は必要になってきます。どの部分が最低限かは人によって意見が違うと思いますが、最初はVue.jsがさっぱりわからなくてもNuxt.jsを使っていくうちに自然と使いこなしていくようになります。
逆に、今までVue.jsやVueRouterを使いこなしていた人なら、Nuxt.jsの強力な機能はきっと気に入るはずですし、トラブルシュートや「こんなことしたい」ときの検索語句の切り分けなども適切に行えるはずです。
早い話がつまり、わかってないまま読み進めていってもOKということです。
公式サイト [ ディレクトリ構造 – Nuxt.js https://ja.nuxtjs.org/guide/directory-structure ] を読みながら、補足する形で説明を進めていきましょう。
ディレクトリの中には設定次第で構成を変えることが出来るものも存在しますが、ここではデフォルトの設定で進めるものとします。
上の3つのリンクを参考にしながら、説明を進めます。ちなみに上記3つは全て同じページですがアンカーリンク先が違います。
まずプロジェクトのルートフォルダに置いたapp.htmlファイルが大本のテンプレートになります。通常、このブログを参考にプロジェクトを作成した場合は存在しませんが、特に理由がない限りわざわざ作る必要はないと思います。headやbodyタグの属性をちょっといじりたい場合なんかは、nuxt.config.jsで設定できますので、app.htmlを触る機会というのはまず起こらないと考えて差し支えありません。
次にlayoutsフォルダについて説明します。layoutsフォルダに置いたvueファイルが、レイアウトファイルになります。
このブログのやり方でプロジェクトを作成した場合はすでに layouts/default.vueというファイルが出来ているはずなので、参考にしてください。このファイルがデフォルトのレイアウトになります。
もしページによっては違うレイアウトを使いたい場合、例えばlayouts/blog.vueというファイルを作るとページによってレイアウトを指定することも出来ます。詳しくはlayoutsディレクトリを参考にしてください。
ちなみにですが、layouts/default.vueを開いてみてください。
<template>
<div>
<nuxt />
</div>
</template>こんな記述があるかと思います。templateという見慣れないタグがありますが、その直下にdivタグ、さらにその下にnuxtというまた見慣れない独自タグがあります。vueファイルはこういうのなんだなーと現段階ではなんとなく認識しておいてください。
ちなみにちなみになんですが、nuxtタグの部分が、後述するpagesフォルダの中のページに置き換わります。置き換わります、って言ってもこれも現段階ではナンノコッチャだと思いますが、そのままわからないままで読み進めて結構です。
次はPagesフォルダの説明です。pagesフォルダに置いたvueファイルが、静的ページでいうところのページ遷移の役割をします。
詳しくは公式ガイドのルーティングをご覧ください。「動的なルーティング」以降はちょっとむずかしいかも知れませんが、完全に理解できなくても心配いりません。vueファイルの配置がサイトマップと対応しているんだな、ということだけわかれば結構です。
ここもデフォルトでindex.vueというファイルが出来ているはずなので、開いてみてください。
<template>
<!-- HTMLに馴染みの深い記述がある -->
</template>
<script>
// JavaScriptが書かれてある
</script>
<style>
/* CSSが書かれてある */
</style>この形になっていることに気が付かれたのではないでしょうか。これこそがNuxt.jsフレームワークが使っているVue.jsというライブラリの、コンポーネントという機能の基本形ですので、少し頭の片隅に置いといてみてください。
pagesフォルダでごりごりNuxt.jsサイト制作が行えるようになってきたら、ぜひとも使っていきたいのがこのcomponentsディレクトリです。
デフォルトでLogo.vueというファイルが入っているはずです。どこで使われているかと言うと、デフォルトで入ってたpages/index.vueです。
~/pages/index.vueの中に
<script>
import Logo from '~/components/Logo.vue'
export default {
components: {
Logo
}
}
</script>↑こういう記述と、
<template>
<!-- 中略 -->
<logo />
<!-- 中略 -->
</template>こんな記述があります。
ちょっと話題が関連情報にずれますが、〜（半角チルダ）とか＠（半角アットマーク）の記号はエイリアスと言ってプロジェクトのトップディレクトリを指せる、Nuxt.jsで使える便利な記号なのでフォルダの指定のときには積極的に使っていきたい機能のひとつです。
話題をcomponentsフォルダに戻しますが、このフォルダに入れたvueファイルはコンポーネントとして使うことが出来ます。
使う時は、
他の使い方も出来ますが、基本形は上記のような手順が一般的になります。
このとき名前に法則性があって、
となっています。命名規則に関してはこちらも参考にしてみてください。
例えば
<template>
<div>
<h1>テスト</h1>
<p><daigaku-map</p>
</div>
</template>
<script>
import DaigakuMap from '~/components/DaigakuMap.vue'
export default {
components: {
DaigakuMap
}
}
</script>こういう対応になります。
馴染みがないと最初ちょっと戸惑うと思いますが、回数重ねればだんだんと馴染んできますので、がんばって習得してみてください。
少しお説教臭くなるかも知れませんが、わたしがウェブサイトデザイナーさんやコーダーさんにNuxt.jsをおすすめしたい理由のひとつに、このコンポーネントが使いやすいことがあります。
ウェブサイトにマテリアルデザインを取り入れてみたり、BootstrapやVuetify.jsなどのフレームワークを取り入れてみたりしてると、いえ、そうでなくてもサイトにちょっとした要素を追加するたびに思いの外深くなるネストや複雑化するCSSに悩まされるコーダーは多いと思います。
そんなとき、画面の要素を気軽にコンポーネント単位で切り離して設計できるVue.jsとそれを簡単に使うNuxt.jsの恩恵は、使えば使うほど多大なものに感じるはずです。
最初の取っ掛かりは難しい印象を受けるかも知れませんが、必ずマスターできますので、マスターしたときの恩恵が計り知れないほどコーダーさんにも大きいので、ぜひとも挑戦してみてほしい機能です。
assetsディレクトリとstaticディレクトリのどちらに何を入れれば良いのか、議論の余地があるのですが、我社では原則として以下のようなルールで振り分けています。
ディレクトリに関して、最初の取っ掛かりは以上を踏まえていればなんとかなるかと思います。
静的ページだけでなくて、Nuxt.jsをつかってガンガンにリアクティブなフロントエンド開発やサーバーサードレンダリングなどに挑戦したくなったら、他のディレクトリにも関心がいくかと思いますが、その頃にはリンク先の公式ガイドも読めるようになっていて何が書かれてあるかわかると思いますので、ぜひとも挑戦してみてください。
componentsディレクトリの項目でも触れましたが、ディレクトリ構造、フォルダのパスと言った方がわかりやすいでしょうか、プロジェクトのトップディレクトリをエイリアスで指定できます。
このとき、~半角チルダか@半角アットマークがソースディレクトリのトップを指してて、~~半角チルダ二つか@@半角アットマーク二つがプロジェクトディレクトリのトップを指しています。
初期設定ではふたつのディレクトリに違いはないので、つまり半角チルダも半角アットマークも、半角チルダ二つも半角アットマーク二つも、どれでも好きなものを使えることになります。
選び方の目安としては、将来的にソースディレクトリとプロジェクトディレクトリのパスを分けたい事情が出てくる可能性を考えたときに、ふだんだいたいはソースディレクトリのトップを指したい場合が多いと思うので半角チルダひとつか半角アットマークひとつのほうを選べばいいと思います。
チルダとアットマークのどちらを使うかに関しては、好きなほうを使いたいところですが、CSSのパス指定の時に半角チルダを使うと「~/」半角チルダと半角スラッシュの組み合わせでエラーになるため、アットマークのほうを優先的に使っていった方が良いように思えます。
詳しくはこちら公式サイトにも少し書いています。
デフォルトでは
nuxt.config.js
に書きます。詳しくはこちらを参考にしてください。
ディレクトリ構成の項目でも少し触れましたが、プロジェクトのトップにapp.htmlを置かなければデフォルトで以上の設定が効くようになります。オリジナルのapp.htmlを置いた場合にはその設計に従ってください。
こちらを参考にしてください。
最初のうち、特に難しいことをせず静的ページを構築したいだけなら、次のポイントを押さえておけばすぐに作業に取りかかれると思います。
ディレクトリの説明でも使いましたが、
<template>
<!-- HTMLに馴染みの深い記述がある -->
</template>
<script>
// JavaScriptが書かれてある
</script>
<style>
/* CSSが書かれてある */
</style>ひとつのvueファイルにtemplate（HTMLのようなもの）、script、cssを一度に書けます。
今までscriptはscriptファイルに、cssはcssファイルにと、それぞれ専用のファイルに分けるほうが良しとされてきたのに、vueファイルでは一度に書いた方が管理しやすいとされています。これは、vueがカスタムコンポーネントと言って機能をひとかたまりの単位にわけて、コンポーネントにつきひとつのファイルで管理できるようになっているためです。「お問い合わせボタン」とかを、コーディング進うちに機能や要件が増えてきてHTMLもCSSもJavascriptもぐっちゃぐっちゃになったり、影響範囲が把握できずに別のところで不具合が出てしまったり、しかもそれをローンチまでに見つけられずに稼働してから発見される、みたいなシナリオが、だいぶ回避しやすくなります。
弊社では、Nuxt.jsを使った静的ページ作成にとどまらず、サーバーサイドレンダリングのアプリケーション、シングルページアプリケーション、プログレッシブウェブアプリなどなど、横文字かっこよさげな今時の技術トレンドを押さえた案件も多数行っております。技術に縛られるのでは無く、人や地域に活かすために技術のその先を提供するためにも、基礎的な技術探求を追い求めています。なにかお手伝いできそうなことありましたらぜひともお声がけください。
全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は表示されるか）？
それでもうまくいかない場合、次の作業を試してみます。
npm installこれは、プロジェクトに使ってるパッケージのいずれかに問題がある可能性を疑っていて、どれがその問題のパッケージなのか探り当てるのも作業コストがかかりすぎるのでそれならば一旦全部削除して、もういちど最初からパッケージのインストールを試みています。
この操作はたまに行うことになるかもしれませんので、覚えておくと良いです。
ターミナル作業に慣れてくると、このような複雑な作業もコマンド一発で再現できるようになるので、その便利な恩恵を活用しています。
それでもうまく動かない場合、npm（とNode.js）のアップデートを試みます。
次のコマンドを実行してみます。
nodebrew install-binary stable続けて次のコマンドを実行します。
nodebrew use stable納品ファイルや仮アップファイルを作るには次のコマンドを実行します。
npm run generatedistというフォルダが出来るので（おそらくディストリビュートの略）、できあがったこのdistフォルダの中身が納品物一式です。
「なんのコマンド打ったらいいんだっけ？」と忘れるたびに、このページを開けばいいのですが、作業中のコマンドにはある程度覚えやすい法則があります。
完全に習得する必要はありませんが、頭の片隅に置いておくと、いずれ役に立つかも知れません。
題の通りですが、作業中は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 ] と入力したりすれば良いのかーという手がかりすることができます。
日常でつかうコマンドなどをマスターすれば、あとは初心者としてのとっかかりを伝えていきます。
まずはプロジェクトを作成します。どこか適切なフォルダを作ったらVScodeを立ち上げて「ファイル」→「フォルダーを開く」からそのフォルダーを選びます。
VScodeの画面下にターミナルウインドウが表示されていなければ（通常は表示されているはず）、メニューから「表示」→「ターミナル」を実行してターミナルウィンドウを表示します。
この時点で、プロジェクトフォルダがカレントフォルダ（現在の位置）の状態でターミナルが開きますので、ターミナル作業がしやすいです。今後、特に記載がなければターミナル作業はこのVScodeのターミナル画面で作業することを前提とします。
ターミナルウインドウをクリックして、入力状態にします。入力状態になっているとカーソルが明滅します。
公式サイトの説明を参考に、次のコマンドを実行します。
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だと中身の一覧が常に表示されてるので困らないのですが、ターミナルで作業してると普段から表示されているわけではないので、時々迷うのです。ですので、迷ったらエルエス、ハイフンエルを唱える癖を付けて、フォルダの中身を一覧すれば、どのフォルダで作業しているのか把握しやすくなります。
ですので、エルエス、ハイフンエルを打ち込んで、フォルダの中身を表示してみましょう。
ls -l結論から言うと、次の二つのファイルがあるかどうか、が見分けるための重要な鍵になります。
さらに結論からいうと、プロジェクトを作成した直後では、上の二つは表示されないと思います。つまり今現在はNuxt.jsのフォルダの中にはいないということです。
ではどういうふうに表示されているかというと、プロジェクト作成直後には
test_project
とだけ表示されているはずです（この記事ではプロジェクト名をtest_projectとして進めているのでこういうふうに表示されていますが、もし違うプロジェクト名で作業をした場合はそのプロジェクト名に適宜置き換えて読んでください。つまりプロジェクト名として設定したフォルダが存在しているはずです）。
そこで、そのプロジェクトフォルダに移動します。
cd test_projectそしてフォルダの中身を表示してみましょう。
ls -lたくさん表示されると思いますが、上の二つのファイルが表示されていれば、プロジェクトフォルダで作業していることになります。
今後は、ここで作業するのが基本になりますので、この二つのファイルが存在するフォルダに今現在いるのかどうかをしっかり意識しながら作業を進めてください。
プロジェクトが作成できたら、次にPugとStylusを使えるようにします。
PugはHTMLの閉じタグを書かなくてもすむようになる便利ツール、StylusはCSSの波括弧やコロンやセミコロンを書かなくても済むようになる便利ツール、のようなものです。
たったそれだけ？と思うかも知れませんが、作業が絶大に楽になるので、是非入れておきましょう。この一連のブログ記事でも入れてあるものとして説明します。
前章で長々と説明したように、プロジェクトフォルダの中（package.jsonとnuxt.config.jsが存在してるフォルダ）で次のふたつのコマンドを実行します。
npm i -D pug pug-loader pug-plain-loadernpm 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 は Vue.js アプリケーションの開発を楽しくするために必要なすべての設定が揃っています。
https://ja.nuxtjs.org/
とはいえ、いきなり「Nuxt.jsはいいぞ」と言われてもナンノコッチャかわからん上にどうしたらいいかも迷うと思いますので、ここではNuxt.jとは何か、何が便利なのか、にはできるだけ触れずに、Nuxt.jsを導入してサイト制作を便利に進めるための準備について書いていきます。
全三回、次のような構成になっています。
Nuxt.jsとは直接関係ないですが、VSCode(Visual Studio Code)をインストールしておくととても便利なので（特にターミナル画面に心理的抵抗のある人は、プロジェクトフォルダからターミナル開けるだけでも安心感やばいはず）先にインストールしておきます。
これもNuxt.jsとは直接関係ないのですが、ターミナルでの操作はどうしても多少増えますのでターミナルからVSCodeを立ち上げるコマンドも入れておいたほうがあとあと便利です。
ちなみに、「おれこの作業してたっけな？（ターミナルからVSCodeを立ち上げるコマンドを入れてたっけな？」と不安に思ったら、ターミナルに次のコマンドを打ち込むとすでにインストールされているかされていないかが結果によってわかります。
code -v次のように、バージョン情報が表示されたら、コマンドはすでにインストールされていると考えられます。
$ code -v 1.37.1 f06011ac164ae4dc8e753a3fe7f9549844d15e35 x64
すでにインストールされている場合は以下の作業は必要ありません。
これも直接はNuxt.jsと関係ないのですが、プロジェクト進行中に複数人数でファイルのやり取りをする場合に大変便利なので先にインストールしておくことをおすすめします。
そう、「バージョン管理とか難しそうだし自分には特に必要ないかなー」と思ってる方も、多少の追加作業でファイルのやり取りがとても便利になるので gitはインストールしておいたほうがいいのです。
手順は以下のとおりです。
こちらのページが大変わかりやすくまとまっています。
Git のインストール 〜Git をMacにインストールしよう〜 | バージョン管理システム入門(初心者向け)
次のコマンドをコピペして実行してください。
git --version
git version 2.17.1
上記のようにバージョン情報が表示されればすでにGitがインストールされています。
表示されない場合、先にHomebrewをインストールします。
次のコマンドをコピペして実行してください。
brew doctorYour system is ready to brew.
上記のような表示が出ればすでにインストールされています。
表示されない場合、Xcodeと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の公式サイトを参考にしてください。
Homebrewがインストールされていれば、まず最初に次のコマンドを実行してください。
brew updateしばらくして、アップデートチェックが完了したら次はこのコマンドを実行します。
brew install gitこれでGitのインストールは完了です。
Node.jsとは：ウェブ開発環境において事実上のデファクトスタンダードになりつつある、Javascript実行環境。
npmとは：上記Node.jsのライブラリなどを扱うパッケージマネージャー。Node.jsをインストールすると一緒にインストールされる。
なんのことやらわからないかもしれませんが、ウェブ開発のややこしいことをいろいろしてくれるお助けアプリみたいなものです。え？Node.jsそのものがややこしいって？そうは言っても、Node.jsが無いともっとややこしくなったことを、Node.jsがだいぶラクにしてくれてるんです。これでも。
というわけでインストールしていきましょう。
次のコマンドを実行して、バージョンが表示されればインストールされています。
node -vv11.16.3
上記のようにバージョン情報が表示されればすでにインストールされています。表示されなければ次の手順を実行していきます。
次のコマンドを実行してnodebrewをインストールしてください。
brew install nodebrew念のため、インストールするディレクトリをあらかじめ作成しておきます。
mkdir -p ~/.nodebrew/srcnodebrewを使って、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を新たな環境にしない限り、この記事の作業は一回ですみます。
続いてプロジェクト構築編に進みます。
3年間程前からYouTubeでVR動画を見まくってる筆者が、おすすめのVR動画を紹介しちゃいます。ちなみに先に言っておきますがえちえちな動画はナシです。なぜか？このブログが何のブログか知っていますか？そう、会社のブログです。そして私は社長です。自分の会社のブログにえっちな動画紹介する社長がどこの世界におりますか？弊社“子育てとか応援する会社です”みたいなメッセージも発信してるのに違う意味に捉えられるやないですか。ってことで、あの、ちゃんとしたやつばっかりです。
VR動画って何？っていう疑問とか、どうやって再生するの？みたいな紹介は後回しにして、さっそくバシバシ紹介しまくっていきましょう。VR動画といっても、普通にPCでも再生できますしスマホだとスマホそのものを動かすともっと良い感じに見れるんですよ。
これをきっかけにVR動画に興味を持ったら、記事の最後のほうにあるVR機器の紹介も覗いてみてください。
このウクライナのチャンネルはVR動画作成とともにモデルの育成事業も行っているのか、活発にVR動画の作成を行っています。全然知らない国の全然知らない地方の、がんばってる人たちをこうしてVRで間近に見ることができると、なぜだか感情移入もマシマシになって、親近感が湧きますね。
まさかナショジオをチャンネル登録してない人なんていないと思いますが、ねんのため。VRで居ながらにして動物さんたちと仲良くできますね！ナショジオのチャンネルにたくさんありますので、ひとつひとつ紹介していくとキリがないですがどれも楽しいのでぜひご覧ください。
ナショジオではないですが、動物編で特におすすめなのはオオカミ。
どこからともなくオオカミの鳴き声が聞こえてきたなと思ってあたりを見回していると、知らないうちに群れのボスに近づかれます。群れのほかの者たちにも、姿は見えないがどうも囲まれているよう……。ただ、警戒しているのはこちらだけではなく群れも同じようで、正体不明のわれわれ（実際はVRカメラ）に対して無闇に群れを危険に導くことをボスは避けます。ボスの一声でさっといなくなるオオカミたち。一瞬の出来事です。森に住む動物たちとの、気高く不思議な接触を1分半で体験できる秀逸な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動画機器だと思います。
現在amazonでの売値が高いので公式ストアから購入したほうが良いのが、Oculus questです。VR動画もみたいしVRゲームも楽しみたい場合、選ばない理由はないと思われます。デメリットとしては、ゲームを楽しみたいなら選ぶべき機器なのに、遊べるゲームが極端に少ないという意味わからないことになっていますが、VR好きならそんなこと気にもしないですよね。
実は数年も前からこんな記事を書いていたりと、地方で暮らすこととVRとの融和性についての研究にいろいろと取り組んでいます。社長はガチのプログラマーなのでVRコンテンツそのものを作ることもできますし、VR動画を作ることもできます。
VR元年と言われて久しいですが（VRが普及しそうでしない、VRが業界特有の言い回し）今後もVRの可能性は模索し続けていきます。
大学堂ではかねてから“豊能町に放送局を作ろう”というプロジェクトのもと、まずは手始めにYouTubeを使った動画配信サービスを手がけています。
企業と言っても実態はまだまだ、世代平均以下の所得しか無い1個人のポケットマネーから捻出した予算を使って赤字を出しながらやりくりしている現状で、つまり平たく言えば「ちょっと貧乏なおじさんのお小遣いをやりくりしてどうにかこうにか回してる趣味の領域」に過ぎません。
ゆくゆくは賛同が得られるようになって予算が増えることもひとつの理想ですが、限られた予算のなかでいかに工夫してミニマムに動画配信を行っていくか、そのノウハウにもきっと需要があるはずです。
こんな経験、一生のうちに一度する人のほうが少ないなかで需要がある情報なら共有した方がきっと誰かの役に立つと思い、まだまとめきれてない中でもどのように機材をそろえていったか書き記しておきます。
お前 野菜買う
おれ 野菜売る
おれ 電子決済はじめた
お前 電子決済で野菜買う
みんな幸せ
電子決済 登録しただけで最初に500円分タダで買い物できる
電子決済で 野菜買う
500円分 野菜タダで手に入る
お前 野菜食べる
お前 幸せ
町の農業 500円分ちょっと潤う
農業も 幸せ
電子決済 タダで野菜食べる
おれもお前も幸せ
「商売ってのは結局は人通りの掛け算だ。一日に何人が店の前を通るか、そのうちの何割が店に入るか、そのうちの何割が物を買って帰るか、その単価 × 25日が月商、その計算でしかない。だから、あなたの店でそんなこと始めても、ビジネスにならないよ」
そんな話を聞いた。ましてや野菜。仮に一日に全部売れても儲けは何十円、何百円の世界。
でも。だから。
だからぼくは、ぼくの町で野菜を売る。今日はそんな話。
「大学堂で野菜販売を始めたって聞いたけど、大学堂ってホームページ屋さんでしょ？なんで野菜売ってるの？」という疑問にお答えすべく。
物流がこれだけ発達して、いつでもどこでも、日本全国どころか世界中の食べ物が手に入るようになった。それはとても良いこと。
じゃあ、自分の住むところ、地元の野菜が欲しいと思ったとき、いきなり問題にぶち当たった。どこで手に入るの？そもそも地元で野菜って作ってるの？こういうのをことわざで何ていっただろうか……。灯台……。灯台……もと暗し……。だめだ。ここまで出かかってるのに、全く思い出せない。
遠くの情報が簡単に手に入り、遠くの物が簡単に手に入るとても便利な世の中で、あなたに伝えたいことが届かない。あなたにあげたいものが届けられない。
野菜を作っても誰も知らないし、野菜が欲しくてもだれが売ってるか知らない。「地元の野菜を食べたい願いなんて、地元に明るい人の特権なんだろうな……。移住してきたばかりの私たち家族は、食べられないだろうな……」この町の人が作った、とれたての野菜を子供といっしょにたくさん食べたい。そんなささやかな願いはかなわないだろうとあきらめかけていた。
幸いにも、たくさんの方の協力とご尽力のおかげで、地元の野菜を手に入れることは出来た。ここを端折ると急展開のようだが、実際には１年越しの活動を通じてまとまった話ではある。だけど本筋ではないのでここでは割愛するとして、とにかく地元の野菜を売ることが“できる”ことになった。
できるから、やるの？やらないの？選択肢はあった。選択権も持っていた。できる。できるし、やる。決定したのは、ぼくだ。
野菜を売ると決めたとき、必ず守ろうと思ったことがある。それが、手作りで売る、だ。
お店の内装を、きれいにお金をかけて整えることもできたかもしれない。それもとっても良いことだと思う。だけどぼくは選ばなかった。代わりに、商品の陳列から値札、看板にいたるまで、従業員の手作りでやると決めた。
それには狙いがあった。短期的に見て、内装に手間やお金を投資した方が、お店としての体を保ちやすく、売り上げも見込めるかもしれなかった。卵が先かニワトリが先かはわからないが、お客はお店屋さんらしい外観のお店に買い物をして、お店はお店屋さんらしい外観を構えて客を待つ。
それをあえてしない選択をした背景には、この当たり前とも思えるループを断ち切ってみたいという思いがあった。
本当に、本当にお店はお店らしい外観をしていないといけないんだろうか？何十年か前まで、地元には個人商店があって、今みたいなおしゃれなお店っていう感じじゃなかったし、そういういわゆる普通の外観のお店に買い物に行ってた。たったここ数十年で強力な資本が入ってきて、お金をかけたお店しか生き残れなくなったけど、だからといってぼくらがその競争に乗っかっても、資本をどれだけつぎ込めるかの勝負になるのは目に見えている。そういうのに疲弊したのが、今の地方都市なわけで、その地方都市の再生を目指すのに資本力勝負の壇上に登りたくなかった、というのがまず一つ。
よく田舎は不便、田舎は不便、というけど、そもそもこの町が田舎かどうかの議論は置いといて、都会と比べれば相対的に不便と感じることには異論は無い。不便だと思う人が多いから住む人が減っていく、その理屈もわかる。
だが、今よりもっと不便だった昔から、この町には人が住んでいた。
不便だから衰退したんじゃない。ここ数十年で、資本に人を吸い上げられてしまっただけだ。
住みやすさや暮らしやすさって、本来はもっと別のところにあるはずなのに、資本をたくさん持ってる店のある都市が、便利だ便利だと宣伝してるに過ぎない。都市が資本を使って宣伝するのは一向に構わないが、相対的に見て、それ以外の町が不便だと感じられるようになった。そんなものに、自分の住む町が負けてしまってたまるかという思いが、あるにはある。
とはいえ、誤解しないで欲しいのが、都会憎しでやっているわけではない。「巨大資本は敵だ〜」といった何かしらの思想強めな主張がしたいわけでもない。ただ、地方が再生するとき、町に住む人々がちょっとの工夫でお店を始められたら、もっと町は賑やかになるんじゃないか、ささやかながらもその方向の道を作るお手伝いを大学堂ができれば、野菜販売を始めた意味があると思う。そういうことがしたくて、そもそも会社を作った。
黙ってレジにかごを出せばお金が表示されて、お金を支払ってレシートとおつりをもらう。たくさんの人の努力で、買い物はとても便利になった。そのほうが売る側も効率が良いし、買う側も何も考えなくて良い。便利はとても良いことだ。
でも便利になったから、買い物から作業だけが残った。
別に懐古主義ではないし、昔はこうだった、だからこう戻すべきと言うつもりもない。誤解されやすいけど。
昔はこうだった、と言うつもりもないけど、買い物にコミュニケーションを戻したい。
もしよければ。
もしよければでいいんだけど、ぜひうちとコミュニケーションして、野菜を買ってほしい。
スタッフが毎回一所懸命企画して、用意して、野菜を売ってる。その野菜を買う、そこにコミュニケーションがほしい。
ユーザー数何万で、売り上げが何万、とかの巨大なマネーゲームじゃないからこそ。
あなたに野菜を買って欲しい。あなたが野菜を買ってくれれば、わたしは何十円か儲かる。
たったそれだけなのに、人と人どうしのコミュニケーションが生まれる。差額のお金はこの町の野菜生産者に渡り、次の野菜の苗や肥料、畑の獣害避け設備に使われる。町で野菜が作られ、あなたに野菜が届く。
「ビジネスになんないよ」と言われるからこそ、思う。ビジネスだけが地方再生につながるんだろうか、商業的に成功しなければ衰退する世の中で、そのままで次の世代に渡して、本当にいいんだろうか。と。
大学堂の商売に、数字はあまりない。
あるのは、“誰に？” もしくは、”あなたに”
ここからは商売の話になりますので文体を変えます。
今のところ残念ながら不定期なので、販売できる時がきたらSNSなどでお知らせするしか方法がありません。
LINEが一番便利で、なんと取り置き注文も受け付けています！下のボタンをクリックすると、大学堂公式アカウントを友だち追加できます。
LINEでの地元野菜の取り置き注文。これは実はとっても画期的なことでして、それについての詳細な記事を後日アップしますので、そちらもお楽しみに！
