カテゴリー別

文法

Vueと共通

【Nuxt.js】Nuxt実践編:ページトップボタンをwindow.scrollToで実装する

前置き ページのトップに戻るボタン、これをpluginを使用せずにwindow.scrollToで実装していきます🍒 アニメーションも非常にシンプルでコードも短いものを使っています🌟 そもそも1スクロールで上まで戻れるなら実装の必要もないので、本当に必要かどうか検討した上で行ってくださいね! ちなみに以前使ったvue-scrolltoはページ内リンクで使用するのがお勧めです💫【Nuxt.js】plugin実践編:vue-scrolltoでスムーズにスクロール ...

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②レスポンシブ対応

⬇️前回の続きです!【Nuxt.js】Nuxt文法編:Grid Layout① レスポンシブ対応をGrid Layoutの実践形式でやります✨🙋‍♀️ Contents簡単ver.入れ子を使用ver1. 難易度アップ🔥入れ子を使用ver2. 難易度さらにアップ🔥🔥まとめ 簡単ver. 前回までの復習を含めやってみましょう💪幅や小要素の余白などは ...

Vueと共通

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

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


API

firebase

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

前置き 以前の記事を役割で切り分けてVuex版にしたコードです。【Nuxt.js】firebase基礎編:Cloud Storageで画像アップロード&取得 この2つが一緒になっていて分かりにくかったので切り分けてみました✂︎・選択した画像を送信する・url化してプレビューする Vuexに移行する必要があるのは送信と取得の部分です。 Contents前置きStep1: 送信するコードを考えるVuexに移行する前のコードVuex移行後のコードStep2: プレビューするコードを書き足すStep ...

firebase

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

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

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 サーバ時間の取得 ...


製作

アプリ サイト

【Nuxt.js】Nuxt実践編:ユーザーアイコン表示の切り替えをしよう

前置き 今回は簡単な実践編です😉💕作るものはこちら! マイページのあるサイトで⬆️ユーザーアイコンの初期状態と⬇️画像を設定した時の表示の切り替えをやってみましょう💃🎶 コンポーネント間のやりとりや演算子の復習になるのでぜひチャレンジしてください🔥💪 今回のような簡単な実践編も今後増やしていこうと思ってます💕 Let's try! Cont ...

制作

【Nuxt.js】Nuxt番外編:
アトミックデザインにおけるフォルダの分け方と
サンプル集

前置き コンポーネントの分類の仕方についてと少しですがサンプルコード集です🎈🧸 この要素はどこ❓molecules❓それともorganisms❓なんて時にチェックしてください✅🌟 フォルダ分けはアトミックデザインを推奨しています。Atomic Designとはサンプルコードもあるのでコンポーネントの命名や中身の構成などの参考にもお役立てください❤️コードを書き始める前のチェッ ...

制作

【Nuxt.js】Nuxt番外編:コードを書く前のルールチェックリスト

前置き さぁコード書くぞ✨✊の前にチェックしておくと良いことをまとめました✅ デザインができている前提です! コンポーネントの分け方が曖昧でどこにあるか分からんっっ😖💦 とか クラス名をつけずにタグに直接cssあてたら親にも影響出ちゃってどこを直せばよいのっっ😨💦 とか 変なことがなくなるように予め知っておいた方が良いことをまとめました! Contents前置きコンポーネントの分け方アトミックデザイン ...

アプリ サイト

【Nuxt.js】Nuxt実践編:axios + asyncData + nuxt-link

前置き お試しAPIのJSONplaceholderを使って遊んでみましょう⚡️🎸 タイトルを表示させ、クリックでidに合わせた動的リンクを行います🌟 データはこちらを使用します💡https://jsonplaceholder.typicode.com/posts axios, asyncData, nuxt-linkなどなど復習できることが沢山😉❤️できるところはやる必要がないのでドン ...

アプリ サイト

【Nuxt.js】Nuxt実践編:layout

前置き layoutの実践編です🤗💕基礎は文法編でご確認ください👀https://wp.me/pc9NHC-A4 タブレット以下のサイズになったらハンバーガーメニューを表示させましょう🌟 Let's try! Contents前置き構成を考えるassetsの下準備HeaderDefaultの作成MenuDefault.vueの作成layouts/default.vueの作成まとめ 構成を考える まずは全体の構成をイメージしましょうǹ ...


そのほか

開発ブログ

【Nuxt.js】WYSIWYGエディター: Quillを使ってみた

前置き WYSIWYGエディタのQuillを使ってみました🍎✨前回チャットアプリを作成していて「シンタックスハイライターを使いたいなぁ〜 どうせならエディタで色々やりたいなぁ〜」ということで今回は人気のQuillを選びました💕 WYSIWYG(ウィジウィグ)エディターとは、ユーザーが編集画面で見ているものと、完成形の見た目が同じになるように作られているエディターのこと。「What You See Is What You Get(あなたが見たものを、そのまま出力 ...

開発ブログ

【Nuxt.js】Nuxt番外編:自動でインデント整形!plugin Prettier

前置き 今回は番外編としてインデントの自動整形をしてくれる便利なplugin prettierのご紹介です🍒 エディターはVSCodeを使用しているのでその導入手順をお伝えします🌟 まずはどんなものか、目で見てもらった方が早いので⬇️こちらをご覧ください✨👀 こちらはcssをhtmlからcssファイルへ移動、編集してcommand+S でセーブしている動画です。セーブすると自動でインデントを揃えてくれますɲ ...

開発ブログ

【日記】2日目:STUDIOからhtml&cssにしたい と言われたのでやってみた

ということで検証みながらコードに直す作業👀気づいたことをいくつか。 実装がメインなので本当にメモ程度ですが笑記録として残しておきます✍️ また気づきがあれば追記していくかもしれません💡 Nuxtばっかり触っていたので急に素のHTML&CSSと言われるとあれ?何するんだっけ?🐣となります😂笑 CSSだとクラス名毎回つけてどこの区画か分かるようにどうしても長くなるので嫌なんですよね😖(命名得意に ...

開発ブログ

【日記】1日目:STUDIOはコーディング不要!だけど、できないこともある

みなさんSTUDIOご存知ですか?😀💡コードを書かなくても直感的に要素を配置してwebサイトを作れる優れものです❤️🤭gifではハンバーガーアイコンを作成しています。要素をドラッグして配置できてすごく簡単に作れることが分かると思います💃 非常に便利ですがその分こまかいことができなかったりもします😖💦 STUDIOを使った案件を受けたので始めるにあたっての注意事項や最初にしっておくべき ...

そのほか

【Nuxt.js】番外編:Progate初心者がNuxt.jsでWEBサイトを作るまでのロードマップ②

前置き 前回はこちら心構えなどを参考にどうぞ🍀 【Nuxt.js】番外編:Progate初心者がNuxt.jsでWEBサイトを作るまでのロードマップ① 初心者がNuxt.jsでwebサイトを作り上げるまでのロードマップです!🔰①はNuxt.jsを使う前のLP模写やGitまで②はNuxt.js〜の具体的な学習方法最終的に外部サービスやAPIを使えるまでをメインに書いています! この手順で学習することで挫折せずに効率的に、そして着実に、スキルアップができます🌟& ...


小ネタ

更新予定

© 2021 aLiz Nuxt