• , , ,

    Nuxt.jsでブログサイトを作りました。

    こんにちは。今日は、Nuxt.jsで作ったブログサイトのソースコードの紹介と感想をシェアしたいと思います。 記事を読む

  • , , , ,

    Vue3とVuetifyでゲームみたいなメニューを作る

    今日は前回紹介したVueのUIライブラリのVuetifyを使ってゲームのスタート画面のようなUIを作ってみます。 今日のテーマは、Vueの基礎、JavaScriptの基礎、CSSの基礎の復習や知識を固めるために練習する良い素材になると思います。 完成したコードはGitHubで公開しているので見てみてください。 前回の続きなのでVue＋Vuetifyのプロジェクトを用意して早速とりかかりましょう。 もし、Vuetifyを使いたくない方はViteでVueのプロジェクトを作成するだけでも同じことができるのでご安心を。 まずは、使えそうなレイアウトをコピペします。 v-containerは、コンテンツを左右の真ん中と、上下の真ん中に位置させることができるコンポーネントです。 v-rowは、v-colのwrapper（囲うもの）でflexを使って中のcol（カラム）のレイアウトをコントロールすることができます。 v-colはかならずv-rowの直下に位置されます。ここに表示されるコンテンツを入れることになります。 v-sheetは複数のコンポーネントで使えるベースラインになります。… 記事を読む

  • , , , ,

    Vue3でVuetifyをインストールしよう

    Vueを使い始めてUIライブラリを探すと色々出てきますね。PrimeVue、BootstrapVue、Quasar、Buefyなど他にも選択肢はあります。今日はそのうちでも人気のVuetifyのインストールから基本的な使い方まで説明します。 Vue3の良いところ VueはReactと比べて初心者向けという位置づけで認識されがちです。しかし機能的にはReactに劣らず、書くコードの数も減ることがよくあります。個人的な意見になりますが、ReactのようにFacebookのような大企業のブランドがバックアップしていないというだけでマーケティングで負けてしまったように受けられます。 Vueは素晴らしいフレームワークで仕事でReactに縛られるという事がなければVueを使っていくべきだと思います。 なぜVuetify ①無料で使える Vuetifyはソースコードを公開しているオープンソースになります。MITライセンスなので安心して商用で使えます。必要があればソースコードをいじることもOKです。 ②フレキシブルなコンポーネント コンポーネントのカスタマイズがしやすいように作られているため個性を出しやすいです。また、Googleのマテリアルデザインをテーマに作成されているのでスッキリとした見た目でデザインができます。 ③ツールが豊富… 記事を読む

  • , , ,

    コピペだけ！anime.jsでクールなスライドを作ろう

    今日はanime.jsのライブラリを紹介します。このライブラリを使う事で複雑なアニメーションをJavaScriptを使ってよりシンプルに書くことができます。 anime.jsはオープンソースなのでソースコードをGitHubからも見ることができます。CodePenから実際のデモを見ることもできるので見てみてください。 今日の完成プロジェクトはこのようになります。 今日の環境 では、大体どのようなことができるかを理解できたところで早速、基本のコードを書いていきましょう。 プロジェクトの作成 今回はVanilla JavaScriptでプロジェクトを作成しますがビルドツールとしてViteを使います。 anime.jsのインストール では、npmを使ってanime.jsをインストールしましょう。… 記事を読む

  • ,

    ViteとBootstrapで最速で開発しよう

    今日は、JavaScriptでウェブ開発するにあたり、最速でコーディングに入れる環境を作ります。 現在のフロントエンド開発ではReactやVueや欠かせないですが、これを使わずにVanilla JavaScriptで開発をしたいときに有利です。 しかしnpmを使ってライブラリを管理したい場合に最適になります。 さらにBootstrapのセットアップの仕方も紹介するのでプロジェクトをセットアップしたのちにすぐにコーディングに取り掛かることができますね。 今日の環境 Viteとは ViteはVueの創生者Evan Youとそのチームが作った最新のビルドツールです。特徴としてはWebpack、Gulp、Parcelのバンドリングで使うパッケージがデベロップメント用のサーバーを起動する際（npm start)でかなり遅くなる原因を起こしていたものをすべて取り除きました。さらにコードの量が多くなるにつれ再度バンドルしなおすのでその分時間がかかっていました。… 記事を読む

  • , ,

    Google Map APIを使ってカスタムマップを作成しよう

    今日はGoogle Map（グーグルマップ）のAPIを使ってカスタムマップを作成してみましょう！ワードプレスをお使いの方は簡単にプラグインを使って、カスタムマップを作成することができますね。同じことをマニュアルで行います。 これで不動産の物件を地図に表示したり、お店の位置情報を紹介することなどに使えたりすると思います。 完成したコードはGitHubから見てください。 注意 クレジットカードの登録なしでもAPIコールはかけられますが、Googleからのエラーのポップアップが表示されます。もし、一般ユーザー向けにAPIを使用したい場合は、アカウントの登録を完了してください。クレジットカードの登録が必要になります。 2023年の2月時点での参考料金表になります。 今日の環境 サンプルプロジェクトの確認 実際にコードを書く前にどのようなことができるのかデモで確認したい人はこの手順を追ってください。… 記事を読む

  • , ,

    three.jsを使って360度動画をブラウザ上で再生してみる

    今日は、three.jsを使って360度動画をブラウザ上で再生してみます。 さらにマウスを使ってカメラの方向を変えてみます。 今回使う360動画はmp4形式ですが、OggとWebM形式でもブラウザで再生できます。 完成イメージはこんな感じになります。 GitHubで完成したコードはこちらになります。 動画に使っている動画をそのまま再生すると下記の画像のように伸びたような状態になっています。 three.jsを使ってこれを球体に変換してあげます。 その球体の中央にカメラを置いて360度に見えるようにすることが今日の目的です。 今回はthree.jsのサンプルコードを参考にしています。 今日の環境… 記事を読む

  • , ,

    three.jsを使ってみよう

    今日はJavaScriptライブラリで３Dオブジェクトを使う事ができるthree.jsを紹介します。 今回は基本としてオブジェクトを作成するところまで説明したいと思います。 環境 three.jsをインストール では、公式ドキュメンテーションに沿ってライブラリをインストールしましょう。 ついでにgsapのライブラリもインストールします。 これはブラウザに関係なくJavaScriptのアニメーションを動かしてくれるヘルパーになります。 Viteを使わなくても良いですが、お勧めなのでVanilla JSでもViteを使ってプロジェクトを作成してみましょう。 これでブラウザからデフォルトのぺージが見れるようになりました。… 記事を読む