はなちるのマイノート

Unityをメインとした技術ブログ。自分らしくまったりやっていきたいと思いますー!

Webサービス

ブログの図の作成に「draw.io」が無料ですごく便利

はじめに いつもブログの図の作成に困っていたのですが、ネットで検索してみたところ「draw.io」という無料図形作成アプリケーションにたどり着きとても気に入りました。そちらについて少しだけ紹介をしたいと思います! はじめに draw.ioとは? ブログの図…

【個人開発】「ジャスト10秒チャレンジ」というサイトをデプロイして半日で非公開にした話

はじめに この度「ジャスト10秒チャレンジ」というサイトを作成しました。 (後述の理由のため現在は非公開)追記)改良したものを公開しました!(2019/02/15)https://just-10seconds.firebaseapp.com/ そこで今回は作成の経緯や用いた技術,サイトの末路…

【Next.js】v-forのときにElements in iteration expect to have 'v-bind:key' directivesというエラーが出たときの対処法

はじめに v-forで一覧を表示しようとしたところ、 Elements in iteration expect to have 'v-bind:key' directivesといったエラーが出てしまいました。その解決法を書いていきたいと思います。 解決法 ”キー”を付け加えることで解決できます!before <li v-for="item in list">...</li> afte…

【Nuxt.js】Nuxt.jsで簡単かつシンプルにHello wouldしてみた

はじめに なにかを始めるときはやっぱりHello wouldでしょう!公式でも”スクラッチから始める”というタイトルで紹介されていますが、自分への備忘録として簡単に残しておきたいと思います。インストール - Nuxt.js 空のディレクトリを準備する まず最初にア…

【Next.js】Next.jsの公式の入門をやってみた⑩

はじめに ”Deploying a Next.js App”が最後のレッスンになります。 ということで今回が最終回にしたいと思います。 セットアップ 前回の引き続き 構築 package.jsonの中身に追加をしていきます。before { "scripts": { "dev": "node server.js", "build": "n…

【Next.js】Next.jsの公式の入門をやってみた⑨

はじめに 今回は"Styling Components"をやっていきましょう。実はこの次のレッスンはデプロイについてなので、かなり終盤に近付いてきました。 ゴールに向かって頑張りましょう! セットアップ 前回同様引き続き使っていきます。 ページをスタイリングする p…

【Next.js】Next.jsの公式の入門をやってみた⑧

はじめに 今回は”Fetching Data for Pages”を進めていきましょう。 セットアップ 今回も変わらず前回の続きを使っていきます。 ページのデータを取得する さすがアメリカといいますか、今回はバットマンテレビ番組のリストを表示していきたいと思います。番…

【Next.js】Next.jsの公式の入門をやってみた⑦

はじめに 今回は”Server Side Support for Clean URLs”をやっていきたいと思います。 セットアップ いつも通りに前回の続きを使っていきたいと思います。 カスタムサーバーを作成する 前回のルートマスキングではリロードするとエラーを吐き出してしまいまし…

【Next.js】Next.jsの公式の入門をやってみた⑥

はじめに 今回は”Clean URLs with Route Masking”をやっていきましょう! セットアップ いつも通りに前回の続きを使っていきます。 ルートマスキング ルートマスキングはNext.jsの独自の機能です。 アプリで見る実際のURLとは異なるブラウザ上のURLを表示す…

【Next.js】Next.jsの公式の入門をやってみた⑤

はじめに 今回は"Create Dynamic Pages"を進めていきましょう!また、今回は簡単なブログアプリを作成していくのが目的なので、かなり面白くできると思うので楽しみにしていてください! 投稿のリストを追加する また、いつも通り新しくアプリをダウンロード…

【Next.js】Next.jsの公式の入門をやってみた④

はじめに 今回は”Using Shared Components”を進めていきたいと思います。 ヘッダコンポーネントを作成する 公式ではサンプルコードをダウンロードして進めていますが、より実感がわくように前回の続きを使っていきたいと思います。まずはコマンドプロンプト…

【Next.js】Next.jsの公式の入門をやってみた③

はじめに 今回から”Navigate Between Pages”というレッスンをやっていきたいと思います。また前回のプロジェクトの続きからやるので、まだやっていないかたはそちらを参照してみてください。 リンクの作り方 pagesフォルダの中にあるindex.jsの中身を書き換…

【Next.js】Next.jsの公式の入門をやってみた②

はじめに 今回で公式の”Getting Started”という名前のレッスンを終わらせていきたいと思います。 内容 前回作成したpagesフォルダにindex.jsを作成します。index.jsに下のコードを打ち込みましょう。 const Index = () => ( <div> <p>Hello Next.js</p> </div> ) export defaul…

【Next.js】Next.jsの公式の入門をやってみた①

はじめに Next.jsの公式で学習用のサイトを無料で公開してくれています。nextjs.orgただ言語がおそらく英語のみなので、少し読み進めるのが厄介です。そこで、自分への備忘録としての意味合いも込めてある程度の流れを残しておきたいと思います。 環境を整え…

【firebase】firebase initにて.firebaserc already has a default project, skippingとなってしまう時の対処法

はじめに いつも通りに firebase initとコマンドプロンプト等に打ち込んだときに、 .firebaserc already has a default project, skippingと表示されてプロジェクトの選択ができませんでした。その対処法を書いておきたいと思います。 原因 おそらく、この表…

【Vue.js】Elementを導入したときにエラーがいっぱいでた話

はじめに Vue.jsにElementを導入したときにつまづいたことを書いておきたいと思います。 エラー その1 Module parse failed: Unexpected character '' (1:0)というようなエラーがでてきました。 対処法 { test: /\.css$/, loader: 'style-loader!css-loader…

【Vue.js】firebase initをしたときにつまずいたこと

はじめに Firebaseのセットアップとデプロイをしようとしたときに firebase initというコマンドを打つと思います。ここでちょっとつまずいたことがあったので紹介しようと思います。 つまずいた内容 firebaseのセットアップをするしたとき、このような指示が…

【Vue.js】ツイッターのツイートに画像がついてるツイッターカードのつけ方

はじめに よくこのようにURLと一緒に画像とその説明があるものを目にしたことがないでしょか?知識ゼロの状態から3日でwebサービスを作ってみました!《334ノートとは?》・334ツイートの自分だけのランキングが作れる・twitterログインなので5秒でログイン…

Unity使いがゼロから始めて3日でWebサービスをリリースした話

勉強のルート タイトルにも通り、ちょうど2日前からHTML,CSS,JavaScriptを触り始めてWebサービスをリリースするところまでたどり着けました。知識ゼロの状態から3日でwebサービスを作ってみました!《334ノートとは?》・334ツイートの自分だけのランキング…

Unity使いがゼロから始めるWebサービス制作!②

はじめに 前回紹介されていただいたこちらの本を今勉強しています。 blog.nabettu.comこの本の中ではGoogleアカウントでログインをしているのですが、ぜひTwitterログインも実装してみましょう!という事が書かれてます。ということで私も挑戦してみて、実装…

Unity使いがゼロから始めるWebサービス制作!①

はじめに 先日このような記事を見つけました。 blog.nabettu.com実は私はどうしても作ってみたいWebサービスがあり、以前ASP.NET Coreを少し触っていたのですが、あまり理解が深まらずに挫折してしまった経験があります。 そこからはずっとWeb関係の勉強はし…