【Nuxt.js】アプリ開発基礎編：Nuxt + Vuex + firebaseでシンプルToDoリスト - Qiita
前置き 本格的なTODOリストを作っていきます！ すっごく簡単なTODOリストは以前やりましたが、 一時的な物なのでリロードしたら消えます💥😲 https://qiita.com/aLiz/items/7d9e907850c15cc546a6 今回はfirebaseとVuexで 本格的TODOリストを作成します✨🎈 ・firebaseでデータ管理 ・Vuexで状態を保持 内容が濃いのでお知らせした通り、 有料記事になりました💰 https://note.com/aliz/n/n8411db2c9a20 まずは基本のTODOリスト、 次回以降のカスタマイズとして ・ログイン機能の追加 ・リストに画像機能の追加 も公開していきますよ！ CSSも追加したりして 自分好みのリストにしてみてください💕🥤☺️ Stepについて いつも通り超簡単なところから だんだんと肉付けをしていきます。
firebaseでファイルをストレージに送ってもらう＋送信されたらsmtp.jsをつかってメールを送信して通知する - Qiita
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>docs portal</title> <script defer src="/__/firebase/5.3.1/firebase-app.js"></script> <script defer src="/__/firebase/5.3.1/firebase-storage.js"></script> <script defer src="/__/firebase/5.3.1/firebase-auth.js"></script> <script defer src="/__/firebase/init.js"></script>
IchigoJam web for iPad、Single App Modeも健在、iPhone同等フリック入力で快適iPad生活！
自宅学習が続く中、iPadを使う家庭も多そうだとiPad miniを入手。いつの間にかSafariのフルスクリーンAPIに対応していたことに驚き、IchigoJam webをiPad向けに調整。 ホーム画面に追加して起動すると、まるでIchiogJam専用デバイス！ Safari上からの利用だと[FULL]ボタンで、フルスクリーン化する（横画面で文字の大きさが小さい問題は調査予定） iPhoneで見た時も使い勝手も合わせて向上！iPadがあると写真が相互に取れて地味に便利。 物理キーボードや、フリック入力はいいけど、ソフトキーボードは入力にストレスあり。 調べてみると、割とややこしい手順で、iPhoneと同等のフリック入力に変更できた。 iPadでフリック入力を使う方法 1. 設定、キーボード、新しいキーボードを追加、「日本語-かな」を追加 2. 設定、キーボード、「キーボードを分割」をO
JavaScript Primerを出版しました！/JavaScript Primerはなぜ書かれたのか？
この3つの原則は書籍の構成にも現れています。 第一部の基本文法で「書き方」を学び、第二部のユースケースで「作り方」を学べるようになっています。 「学び方」は、章としてではなく全体的な流れとして取り入れることにしました。 なぜなら、「学び方」自体は学びたいことによっても異なる方法を取る場合があります。 そのため、「学び方」で個別の章とするよりは、他の章で「書き方」や「作り方」と一緒に見たほうがよいと考えたためです。 たとえば、基本文法などの学び方にはMDNのようなリファレンスサイトを見たほうがいいし、 アプリケーションの作り方は実際のサイトなどを参考にしたほうがよいためです。 第一部と第二部がどのように書かれたのかをざっくりと振りかえってみます。 第一部: 基本文法 第一部: 基本文法はJavaScriptの基本的な文法について扱っています。 プログラミングの入門書で文法については避けること
大幅にリニューアルされた Next.js のチュートリアルをどこよりも早く全編和訳しました - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 数日前（4/21頃）に Next.js のチュートリアルが一新されました。 Next.js は 3 月頭に ver 9.3 がリリースされ、ビルド時に静的に HTML を生成する関数などが追加されるなど、今までよりもかなりパワフルになり、いわゆる JAMstack と呼ばれるようなアプリケーションを作りやすくなりました。 そのバージョンアップに対応するかたちで、チュートリアルも大幅に書き直されました。 参考（開発チームの @chibicode さんのツイッター） Next.jsの公式チュートリアルを最新版に沿ってゼロから書き直しました!
React Native ～JavaScriptによるiOS／Androidアプリ開発の実践 | Gihyo Digital Publishing … 技術評論社の電子書籍
React Native ～JavaScriptによるiOS／Androidアプリ開発の実践 著者 髙木健介，ユタマこたろう，仁田脇理史 著 発売日 2020年4月27日 更新日 2020年4月27日
JavaバイトコードをJavaScriptにコンパイルする「CheerpJ 2.1」がリリース
CheerpJは、Javaバイトコードを事前にコンパイルすることで、WebAssemblyやJavaScriptでの実行を可能にするソリューション。完全なJavaランタイム環境、Java-JavaScript双方向の相互運用性を備えており、仮想ファイルシステム、入出力、ネットワーキング、オーディオといった、Webブラウザベースの機能を提供する。 今回リリースした「CheerpJ 2.1」では、いくつかの最適化とバグ修正を行ったメンテナンスリリースで、JavaScriptの相互運用性をさらに高めている。 Java例外処理を最適化したことで、より効率的なJavaScriptコードへのコンパイルを実現したほか、ネイティブのJavaリフレクションコールも大幅な最適化によって、標準のJavaによる呼び出しと比較してオーバーヘッドが少なくなった。また、事前のコンパイルによって出力されるJavaScri
Next.js + TypeScript プロジェクトに ESLint, Prettier を導入する - Qiita
Next.js + TypeScript プロジェクトに ESLint, Prettier を導入するJavaScriptTypeScriptReactNext.js みなさんこんにちは。 今回は Next.js + TypeScript のプロジェクトに、ESLint と Prettier を導入してみましたのでそのメモを残します。 背景 久しぶりに開発業務で Next.js v9.3.0 と TypeScript v3.8.3 を使ったプロダクトを開発機会があり、改めてイチから環境を構築しました。 TypeScript の構文チェックには TSLint がありましたが、現在は deprecated になっているため ESLint を入れます。 Prettier は v2 がリリースされましたのでv2.0.2 とします。 TSLint ライブラリ "next": "9.3.0" "esl
【Nuxt.js】firebase導入編(firestore版)：データの追加 取得をしよう - Qiita
前置き 便利なfirebase！ シンプルに導入の仕方を解説していきます😉 簡単なデータの書き込みと取得をしてみます🍒 ❓そもそもfirebaseとは 簡単に言うと オンラインにデータを保存できて 取得もできる優れものです！ 自分で1から作るとなると大変ですが firebaseを使えば簡単ですね🌟 https://firebase.google.com/docs/database ❓どんな時に使うか 例えば、チャットアプリ！ リアルタイムにデータを保存・同期できるので メッセージを送り合うことが簡単になります💌 例えば、フリマサイト！👕👖 会員情報とその会員が出品した商品が DBに保存されていきます。 それを会員はいつでも編集でき、 反映したらすぐ表示が変わるわけです💡 会員自身でデータが作れて編集もできる！ といった感じです🌟 ❓Referenceの読み方 基本的にfir
Nuxt.jsで初めて作成したポートフォリオをGitHub Pagesで公開しました - Qiita
この記事は、「Nuxt.js ってなんですか？」な状態の人間が、やりたいことを盛り込んで作成したポートフォリオについて書いたものです。 作成したポートフォリオ https://tayuta.github.io/portfolio/ GitHub Pages で公開しています。 https://tayu.netlify.app/ 現在は、Netlify で公開しています。 https://github.com/tayuta/portfolio ソースコードです。 作成に至った動機 ポートフォリオを作成することになったのは、社内でポートフォリオ部（正式名称：そうだポトフを作ろう！ 略称：ポトフ）が発足されたことがきっかけです。 もともと業務では、JavaScriptやHTML、CSSなど、フロント系はほとんど触れあったことがなかったので、勉強になるかと思い、入部しました。 プロジェクトの作成
地味に便利！ダミー画像をSVGで生成するスクリプト、ローカルでもオンライン環境でも利用できる -holder.js
ダミー画像を作成するのは面倒ですよね。ローカル環境でもオンライン環境でもダミー画像を簡単に生成できる軽量スクリプトを紹介します。 画像を用意する必要はありません。 簡単なコードで、SVGのダミー画像を利用できます。サイズ・カラーは自由にカスタマイズでき、文字入力やダミー画像用のクロス線にも対応しています。 さらに、レスポンシブ用の流体ダミー画像も生成できる優れものです！ holder.js holder.js -GitHub holder.jsの特徴 holder.jsのデモ holder.jsの使い方 holder.jsの特徴 holder.jsはダミー画像をクライアントサイドで生成するスクリプトです。ローカル環境でもオンライン環境でも利用できます。サイズ・カラー・フォントのカスタマイズにも対応しており、ダミー画像はSVGもしくはCanvasで生成されます。 MITライセンスで、個人でも
nuxt.ts(nuxt.js+Typescript)でfirebaseをインジェクションしたい。 - Qiita
前書き nuxt.jsとFirebaseの組み合わせでなにか作るというのは結構ポピュラーらしく、qiitaでも検索するといろいろな記事が出てきます。私も大変お世話になりました。 nuxt.jsでFirebaseSDKを使う場合、多くはpluginディレクトリ内でfirebase.jsを用意してFirebase SDKを初期化し、各々のVueファイル内でimportするというのが定番のようです。 一方でnuxt.jsのインジェクションという機能を使うことで、いちいちvueファイル内でimportせずにFirebaseを呼び出せるようにする方法もあります。importの方がどこで何を使っているのか明示されてわかりやすいのですが、私は横着なのでインジェクションを使っています。 今回はそれをTypeScript導入済みのnuxt.jsでやってみようと思い、（警告が出ていますが）実際に動作させること
「現場が使ってくれない」壁をどう越える？ 1カ月で社員1000人にZoomを広めた情シスに聞いた
松平 知氏： これまでサイボウズは、テレビ会議、IP電話、チャットなどのUC（ユニファイドコミュニケーション）としてCisco製品を利用していました。このうちオンプレミスの多地点接続システム（MCU）がEoS（サポート終了）になるということで、テレビ会議システムのリプレースを検討し始めました。 Ciscoから乗り換えず、MCUの後継となる機材を導入する選択肢もありました。しかし「社外とも接続したい」「録画をしたい」といったMCUで対応できない要望が社内で上がっていたこともあり、より広い目線で探したところ「Zoom」が今のサイボウズの働き方に合っていると判断したのです。 大前提は、これまでCiscoでできていたことはリプレース後もできること。その上でユーザーが使いやすいようにしたいと思いました。また、テレビ会議の端末などは引き続きCiscoの機材を使うので、それを生かしつつZoomを導入しな
Next.jsアプリケーションを動かす環境をaws-cdkを使って構築する(with CloudFront/S3/Fargate) - $shibayu36->blog;
Next.jsをproduction環境で使うために外観を掴んでおきたいと思い、Next.jsアプリケーションを動かすAWS環境をaws-cdkを使って構築するサンプルを作ってみた。だいぶ荒削りだけど、参考になる例にはなったと思う。 https://github.com/shibayu36/nextjs-on-ecs 利用した技術 AWS CloudFront S3 ECR ECS aws-cdk Docker Next.js + TypeScript 今回作ったアーキテクチャ 全てのリクエストをCloudFrontに通すフルCDNアーキテクチャ フルCDNアーキテクチャ実験 / Minami Aoyama Night #1 - Speaker Deck フルCDNアーキテクチャでサービス設計した話 - Speaker Deck next buildで生成した静的ファイルはS3から配信
Accessible Rich Internet Applications - MDN
Accessible Rich Internet Applications (ARIA) はロールや属性の集合で、ウェブコンテンツやウェブアプリケーション（特に JavaScript で開発するもの）を、ハンディキャップを持つ人々にとってよりアクセシブルにする方法を定義します。 ARIA は、アプリケーションで一般的に使用されている対話操作やウィジェットを、他のメカニズムがない場合に支援技術に渡すことができるように HTML を補完します。例えば ARIA は、アクセシビリティのある JavaScript ウィジェット、フォームのヒント、エラーメッセージ、ライブコンテンツ更新などを可能にします。 警告: これらのウィジェットの多くは、現代のブラウザーで完全に対応しています。意味的に正しい HTML 要素が存在するのであれば、 ARIA を使用するよりも、その要素を使用したほうがいいでしょう
Firebase を利用したプッシュ通知の実装 - Qiita
はじめに 仕事で解決したいことがあり、Web Push と Service Worker（以下 SW）の利用を検討しようかなと思っています 調べると Firebase Cloud Messaging（以下 FCM）を使うと簡単に実装できそうだったので、サンプルアプリを作成してみようと思います 今回実装したコードは以下です https://github.com/kurosame/glossary FCM の設定（管理画面） 以下から初期設定を行う 管理画面上での設定は以上で、その後実装する上で必要な情報は「プロジェクトの設定」で確認できます Firebase の初期設定 以下の情報は「プロジェクトの設定」で見れます 隠してますけど、これらの情報は公開してもセキュアです ただし、Firestore などのリソースにアクセスできてしまうと思うので、使っている場合は適切なルールを設定しておく必要は
NEORTの作品を埋め込んで、STUDIOでデジタルアートを表現しよう！｜Studio inc.
STUDIOではiframe機能を使って、サイト上にデジタルアートの埋め込みができます✨ 外部サービス「NEORT」を使えば、カンタンにデジタルアートクリエイター向けのポートフォリオサイトが作れます。 実際にSTUDIOのページにウィジェットを埋め込んでみた例：https://hyudoro.com デジタルアートとは デジタルアートとは、コンピューター技術を使って制作したアート作品です。3DCGやモーショングラフィックスなどの動画作品を始め、プログラミング技術によって生み出されるジェネラティブアートやインタラクティブアートなど、幅広いジャンルがあります。 動画形式はもちろん、JavaScriptやWebGLといったグラフィカルな技術を活用すれば、サイト上でデジタルアートを表現することもできます。最近では、デジタルアートをメインビジュアルに取り入れたサイトも数多くあり、注目が高まっているこ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
『Nuxt.js + Firebaseで釣具の管理サービスを作った』へのコメント
【Nuxt.js】ESLintの設定とVSCodeで保存時に自動整形する方法 - Qiita
nuxt.js+typescript環境で Property '$bvModal' does not exist on type~ とエラーが出てビルドできない問題をごり押しで解決 - Qiita
