タグ別

ユーザースキル別

初心者

firebase

【Nuxt.js】開発ブログ:firebaseでチャットアプリ⑤

前置き チャットシリーズようやくCSSです✨笑 初めにデザインを決めていなかったのでざっくりですが、整理していきました。そのためSP対応も未完ですが、⬆️上の画像イメージを元に作成しています🍎 今後はこの辺をやっていきたいですね🎈🧸・SP対応・スクロール、スクロールボタンの実装・エディタの使用 (選択テキストをコード化させる)・日付に応じて「今日」「昨日」の表示 Contents前置きメッセージを吹き出しにする画像と ...

firebase

【Nuxt.js】firebase基礎編:Cloud Storageで画像アップロード&取得

前置き input type="file" で選択した画像をFirebase Cloud Storageに送信&取得をしていきます🌸 ⬇️firebaseのプロジェクト作成などは こちらをご覧ください👀 Databaseではなく Storageを使っています💫【Nuxt.js】firebase導入編(RDB版):データの追加 取得をしよう 公式: Cloud Storage 参考:FirebaseStorageの使い方・Singl ...

Vueと共通

【Nuxt.js】Nuxt文法編:cookie②ライブラリ不要の簡単読み書き

前置き 前回の続きです🙋‍♀️【Nuxt.js】Nuxt文法編:cookie①ライブラリ不要の簡単読み書き 今回は特定のキーの取得やcookieの削除、JSONで取得などをやっていきます🌟 Contents前置き特定のキー, 値のみを取り出す復習キーと値、それぞれを取得するcookieを削除する書き込みの時点で有効期限を指定削除だけの処理JSONにしてみるデータ形式の1つcookieをJSONにするJSONを戻すまとめ 特定のキー, ...

Vueと共通

【Nuxt.js】Nuxt文法編:cookie①ライブラリ不要の簡単読み書き

前置き Cookie(クッキー)とは、ホームページを訪問した ユーザーの情報を一時的の保存する仕組みです。サイトを訪れた日時、訪問回数など、様々な内容が ユーザー情報として保存されることによって、サイトを再訪問したときにユーザーを特定し、情報を入力する手間が省けます。https://qiita.com/mocha_xx/items/e0897e9f251da042af59 ライブラリを使わなくても簡単に読み書きできます📚もちろん使っても良いのですが基礎知識を理解する上では初めは使わない方が ...

Vueと共通

【Nuxt.js】Nuxt文法編:Grid Layout①

前置き 今回はレスポンシブ 対応のしやすいGrid Layoutです✨👏簡単な使い方をご紹介🙋‍♀️ flexよりも少し複雑になりますが、慣れればできることは増えますよ❤️ 続編ではflexとの違い、gridにしかできないことを実践形式を含めて公開しようと思っています💕 Contents前置きGrid Layoutとは縦線、横線に基づいて要素を置く使い方grid-row, g ...


中級者

firebase

【Nuxt.js】開発ブログ:firebaseでチャットアプリ④

前置き チャットシリーズの続きです✨今回はVuexに移行していきます❣️これが終わったら本当にCSSです…😂笑 【Nuxt.js】開発ブログ:firebaseでチャットアプリ①【Nuxt.js】開発ブログ:firebaseでチャットアプリ②【Nuxt.js】開発ブログ:firebaseでチャットアプリ③ Contents前置きVuexに移行まずは取得データのpostsを移行loginを移行画像部分の移行textareaの選択した文字に装飾(ボツネタ ...

firebase

【Nuxt.js】開発ブログ:firebaseでチャットアプリ③

前置き チャットアプリシリーズ第三弾❤️CSSを整えたいところですが、まずは画像の投稿&取得から! 前回はこちら【Nuxt.js】開発ブログ:firebaseでチャットアプリ② Contents前置き画像の投稿input type="file"のデザイン選択した写真を表示する画像を投稿する画像の取得まとめ 画像の投稿 投稿フォームで選択した画像を表示・確認し、投稿できるようにします👀 参考: SVG Background Imageの色をCSSで変える方法 in ...

firebase

【Nuxt.js】開発ブログ:firebaseでチャットアプリ②

前置き 前回の続きです🙋‍♀️【Nuxt.js】開発ブログ:firebaseでチャットアプリ① ログイン機能をつけたりちょっとした見た目の調整をしていきます♪ 今回もあまり丁寧な解説はありません。コードも綺麗ではないですが参考になればと思います🎈🧸 参考:スマホアプリ開発を加速する,Firebaseを使ってみよう 第10回[最終回] Firebaseの実践的なテクニックを使いこなそうFirebase サーバ時間の取得 ...

firebase

【Nuxt.js】開発ブログ:firebaseでチャットアプリ①

前置き RDBを活かしてチャットでも作ろう!と思い立ってやった系の記事です🐣💭Cloud Firestoreばかり使っていたので…。 そしてWebSocket, Socket.IOを使用するとサーバー側の実装が大変です💥笑ということで使用したことのあるFirebase Realtime Databaseにしました🎈🧸 いつもの丁寧な解説ではなく、こんなこと調べてこういう手順で試してみたという内容です💡 まだ完全 ...

API

【Nuxt.js】API:Rakuten Developers

前置き 楽天商品検索APIを使ってみます💫登録してアプリIDを発行するだけですぐに商品情報が取得できます✨ 商品は完全に見た目の可愛さで選びました❤️笑(見るだけならタダだし…) 参考: https://qiita.com/mgr/items/f2193fd21765be1d34c2 Contents前置き登録使い方APIテストフォームリクエストURLとパラメータコードまずはconsoleで表示テンプレートで表示見やすく調整①見やすく調整②まとめ ...


上級者

更新予定


誰でも

アプリ サイト

【Nuxt.js】SEO基礎編②:超簡単解説!5分でわかるSEO

前置き 前回の続きです。全てにおいて# 心構えが大事になるので、ご確認を。 【Nuxt.js】SEO基礎編①:超簡単解説!5分でわかるSEO Contents前置きSEOの要素SEO内部対策インデクサビリティの最適化パンくずリストの設置🍞title要素の最適化meta descriptionの最適化meta content="noindex"の最適化 SEOの要素 SEO内部対策 使いやすいサイトを作ることページ内の質をあげることです。知りたい情報で検索をし、たどり着いた先で良質な情報が得 ...

アプリ サイト

【Nuxt.js】SEO基礎編①:超簡単解説!5分でわかるSEO

前置き 今回はSEO(検索エンジン最適化)について!Nuxt.jsと直接的な関係はありませんが、Nuxt.jsで作ったwebサイトでもSEOは大事ですからね🌟 超簡単に説明する、が当アカウントのモットー。お猿さんでも分かるように書きました🍎🐒 Contents前置き心構え検索エンジンの仕組みクローリングインデックスランキングSEOの要素コンテンツSEO🌟検索キーワードを選定ロングテールSEOコンテンツデザインモバイルフレンドリー 心構え 大事 ...


時間別

5分

firebase

【Nuxt.js】開発ブログ:firebaseでチャットアプリ⑤

前置き チャットシリーズようやくCSSです✨笑 初めにデザインを決めていなかったのでざっくりですが、整理していきました。そのためSP対応も未完ですが、⬆️上の画像イメージを元に作成しています🍎 今後はこの辺をやっていきたいですね🎈🧸・SP対応・スクロール、スクロールボタンの実装・エディタの使用 (選択テキストをコード化させる)・日付に応じて「今日」「昨日」の表示 Contents前置きメッセージを吹き出しにする画像と ...

firebase

【Nuxt.js】firebase基礎編:Cloud Storageで画像アップロード&取得

前置き input type="file" で選択した画像をFirebase Cloud Storageに送信&取得をしていきます🌸 ⬇️firebaseのプロジェクト作成などは こちらをご覧ください👀 Databaseではなく Storageを使っています💫【Nuxt.js】firebase導入編(RDB版):データの追加 取得をしよう 公式: Cloud Storage 参考:FirebaseStorageの使い方・Singl ...

API

【Nuxt.js】API:Rakuten Developers

前置き 楽天商品検索APIを使ってみます💫登録してアプリIDを発行するだけですぐに商品情報が取得できます✨ 商品は完全に見た目の可愛さで選びました❤️笑(見るだけならタダだし…) 参考: https://qiita.com/mgr/items/f2193fd21765be1d34c2 Contents前置き登録使い方APIテストフォームリクエストURLとパラメータコードまずはconsoleで表示テンプレートで表示見やすく調整①見やすく調整②まとめ ...

Vueと共通

【Nuxt.js】Nuxt文法編:cookie②ライブラリ不要の簡単読み書き

前置き 前回の続きです🙋‍♀️【Nuxt.js】Nuxt文法編:cookie①ライブラリ不要の簡単読み書き 今回は特定のキーの取得やcookieの削除、JSONで取得などをやっていきます🌟 Contents前置き特定のキー, 値のみを取り出す復習キーと値、それぞれを取得するcookieを削除する書き込みの時点で有効期限を指定削除だけの処理JSONにしてみるデータ形式の1つcookieをJSONにするJSONを戻すまとめ 特定のキー, ...

Vueと共通

【Nuxt.js】Nuxt文法編:cookie①ライブラリ不要の簡単読み書き

前置き Cookie(クッキー)とは、ホームページを訪問した ユーザーの情報を一時的の保存する仕組みです。サイトを訪れた日時、訪問回数など、様々な内容が ユーザー情報として保存されることによって、サイトを再訪問したときにユーザーを特定し、情報を入力する手間が省けます。https://qiita.com/mocha_xx/items/e0897e9f251da042af59 ライブラリを使わなくても簡単に読み書きできます📚もちろん使っても良いのですが基礎知識を理解する上では初めは使わない方が ...


30分

firebase

【Nuxt.js】開発ブログ:firebaseでチャットアプリ④

前置き チャットシリーズの続きです✨今回はVuexに移行していきます❣️これが終わったら本当にCSSです…😂笑 【Nuxt.js】開発ブログ:firebaseでチャットアプリ①【Nuxt.js】開発ブログ:firebaseでチャットアプリ②【Nuxt.js】開発ブログ:firebaseでチャットアプリ③ Contents前置きVuexに移行まずは取得データのpostsを移行loginを移行画像部分の移行textareaの選択した文字に装飾(ボツネタ ...

firebase

【Nuxt.js】開発ブログ:firebaseでチャットアプリ③

前置き チャットアプリシリーズ第三弾❤️CSSを整えたいところですが、まずは画像の投稿&取得から! 前回はこちら【Nuxt.js】開発ブログ:firebaseでチャットアプリ② Contents前置き画像の投稿input type="file"のデザイン選択した写真を表示する画像を投稿する画像の取得まとめ 画像の投稿 投稿フォームで選択した画像を表示・確認し、投稿できるようにします👀 参考: SVG Background Imageの色をCSSで変える方法 in ...

firebase

【Nuxt.js】開発ブログ:firebaseでチャットアプリ②

前置き 前回の続きです🙋‍♀️【Nuxt.js】開発ブログ:firebaseでチャットアプリ① ログイン機能をつけたりちょっとした見た目の調整をしていきます♪ 今回もあまり丁寧な解説はありません。コードも綺麗ではないですが参考になればと思います🎈🧸 参考:スマホアプリ開発を加速する,Firebaseを使ってみよう 第10回[最終回] Firebaseの実践的なテクニックを使いこなそうFirebase サーバ時間の取得 ...

firebase

【Nuxt.js】開発ブログ:firebaseでチャットアプリ①

前置き RDBを活かしてチャットでも作ろう!と思い立ってやった系の記事です🐣💭Cloud Firestoreばかり使っていたので…。 そしてWebSocket, Socket.IOを使用するとサーバー側の実装が大変です💥笑ということで使用したことのあるFirebase Realtime Databaseにしました🎈🧸 いつもの丁寧な解説ではなく、こんなこと調べてこういう手順で試してみたという内容です💡 まだ完全 ...

Vueと共通

【Nuxt.js】Nuxt実践編:v-model + Vuex

前置き v-model(input)の値をVuexに保存してみましょう🌟 通常はページ遷移をすると入力した値が消えてしまいます💥 そこでデータ保存のできるVuexを使うわけです💡💕 具体的な使用例は…性格診断🕵️‍♀️各入力項目ごとにページ遷移しても最後にその結果を反映してこんな性格です!と再表示させるショッピングサイト🛍買い物カゴに追加した商品がページ遷 ...


60分

firebase

【Nuxt.js】firebase導入編(Firestore版):データの追加 取得をしよう

前置き 便利なfirebase!シンプルに導入の仕方を解説していきます😉簡単なデータの書き込みと取得をしてみます🍒 firebaseとは 簡単に言うとオンラインにデータを保存できて取得もできる優れものです!自分で1から作るとなると大変ですがfirebaseを使えば簡単ですね🌟Firebase Realtime Database どんな時に使うか? ex1) チャットアプリリアルタイムにデータを保存・同期できるのでメッセージを送り合うことが簡単になります&#x ...

firebase

【Nuxt.js】firebase導入編(RDB版):データの追加 取得をしよう

前置き 便利なfirebase!シンプルに導入の仕方を解説していきます😉簡単なデータの書き込みと取得をしてみます🍒 firebaseとは 簡単に言うとオンラインにデータを保存できて取得もできる優れものです!自分で1から作るとなると大変ですがfirebaseを使えば簡単ですね🌟Firebase Realtime Database どんな時に使うか? ex1) チャットアプリリアルタイムにデータを保存・同期できるのでメッセージを送り合うことが簡単になります&#x ...

© 2021 aLiz Nuxt