obnizから使いやすいMQTTブローカーとライブラリ｜IoT-Gym
この記事はobniz Advent Calendar 2019の17日目の記事です。 obnizと他のシステムを連携動作させたいとき、MQTTを使うと割と楽にプログラムを作れます。 MQTTを使う場合 どのブローカーを使うか どのライブラリを使うか を決めなければなりません。私は今まで自分では調査せずにネット記事のコピペでその場凌ぎを続けてきました。今回一念発起して、どのようなブローカーやライブラリがあるか調べてみました。その中で、obnizで使いやすいものを紹介します。 ブローカー： 自分で運用するブローカー: mosquitto、mosca クラウドサービス：mosquitto、shiftr.io ライブラリ： ブラウザ用：MQTT.js、paho node.js用：MQTT.js MQTT ブローカーとMQTTライブラリの紹介なので、obnizのコードは登場しません。あしからず。 M
Node.js徹底攻略 ─ ヤフーのノウハウに学ぶ、パフォーマンス劣化やコールバック地獄との戦い方｜ハイクラス転職・求人情報サイト AMBI（アンビ）
Node.js徹底攻略 ─ ヤフーのノウハウに学ぶ、パフォーマンス劣化やコールバック地獄との戦い方 Node.jsをうまく活用できている企業は、どのような方法でベストプラクティスを習得してきたのでしょうか。ヤフー株式会社でNode.jsの社内普及に務めてきた言語サポートチームに、同社の実施を紹介してもらいました。 Node.jsは「イベントループモデルで、ノンブロッキングI/Oを使用している」「問題発生時にHTTP/TCPやPOSIX APIなど低レイヤーの知識を求められる」といった特徴を持つ言語です。開発者が習得すべき技術領域が広いため、Node.jsらしい書き方の学習難易度は高いと言えます。 それでは、Node.jsをうまく活用できている企業は、どのような方法でNode.jsのベストプラクティスを習得してきたのでしょうか。ヤフー株式会社でNode.jsの社内普及に務めてきた言語サポート
Nuxt.js v2とGAE/SE Node.jsでSPA×SSR×PWA×サーバーレスを実現する - DMM inside
はじめに こんにちは。イベント事業部の上井（ウワイ）と申します。 Nuxt.jsのv2が9月に正式バージョンとしてリリースされました 🎉 mmedium.co またそれに先立って、Google Cloud PlatformからGoogle App Engine Node.js Standard Environment（以下、GAE/SE）が6月に一般公開されました。GCPからサーバーレスでNode.jsが実行できるPaaSの登場です。さらには、つい先日にLTSとなったNode.js 10に対応しました！ cloud.google.com 今回は、Nuxt.js v2のPWAをGAE/SE上で動作させる方法をご紹介いたします。 私が以前書いた記事では、Firebase上でNuxt.jsを動作させたのですが、いかんせん構成が複雑でコードの実装・管理が大変でした。しかし、GAE/SEの場合はシ
Nuxt.jsでQiita API取得して一覧表示するアプリをFirebaseへデプロイするチュートリアル - 動かざることバグの如し
他のチュートリアルとか、やってみた！だと早速認証周りだとかElement UIとかに手を出してて難しすぎる。 本質的に、一番シンプルな感じで Qiita API v2 認証不要を叩いて リスト表示するだけのアプリをNuxt.jsで作って firebaseに無料デプロイ！ までやる。 環境 Nodejs v10 Nuxtjs v2.5.0 インストール まずはひな壇を生成する。最近では公式のnuxt/create-nuxt-appを使うのが定石らしい。 ってことで実行 本当はyarnでやりたかったのだが、なぜかパッケージの一部が４０４でインストールできなかったので今回はnpmで実行 npm init nuxt-app すると質問が何個か対話的に行われる。今回は以下のようにした > Generating Nuxt.js project in /private/tmp/hogehoge ? Pr
Nuxt.js, Firebase, Stripe をフル活用してサーバーレスでJAMStackなECサイトを2日で開発した話 - Qiita
Nuxt.js, Firebase, Stripe をフル活用してサーバーレスでJAMStackなECサイトを2日で開発した話stripeVue.jsFirebasedeprecatedNuxt 本記事で紹介しているサービスの公式Twitterアカウントができました → @jslounge_info はじめに potato4d こと花谷拓磨です。 普段は ElevenBack という屋号のもと、フロントエンドを中心としながらも、デザインやサーバーサイドなどをも含めて作業することが多いのですが、屋号での活動の一環として、 JSLounge という渋谷で活動するハンズオン団体の運営を行っています。 その JSLounge にて過去に開催したハンズオン資料を入手できるサイトを構築することとしました。 通常、ハンズオンとなればその場でメンターがついて 1:1 で進めますが、 JSLounge の資
Firebaseで完結するリッチなWebアプリ構築の勘所 - Qiita
先日、Togetter社長の@yositosiさんとひょんなことからお友達になり「なんかFirebase使って面白いことやろうよ」という話になったので一緒に面白いことをやりました。 この記事は、 Firebaseを使うと何ができるのか Nuxt.js/Vue.jsとFirebaseの勘所 Firestoreでの複雑なクエリ処理にどう対応するか などのトピックを中心に紹介していければと思っています。 なんとかPay Togetterの社長の@yositosiさんからFirebaseを使ったアプリ構築の話を頂きお手伝いさせていただいた、エイプリルフールの企画の「なんとかPay」というサービス。誰でも自由にPayを発行できる、昨今のPay蔓延している社会に物申しているようなそうでもないようなそんなサービス。 今回は技術周りで色々とお手伝いをさせていただきました！ 自分だけのPayが作れる リアル
【Nuxt.js】郵便番号検索APIを使ってデータ取得を学ぶ - Qiita
ちゃんと理解できていなかった、「APIを使ってデータ取得する」ことについてまとめました。 APIからデータを取ってきて何かアプリを作ってみたいという方や、 Nuxt.jsでのデータ取得についても書いているので、Nuxt.jsを勉強している方にも読んでもらえると嬉しいです。 今回作成したもの 住所入力フォームでよくある、 郵便番号を入力してボタンを押したら自動で住所を入力してくれるプログラムです。 郵便番号検索APIは登録不要ですぐに使えます。 前提 ・Node.jsはインストール済（バージョンは現時点でv10.13.0） ・Vue.js/Nuxt.jsはある程度理解している （私はVue.js & Nuxt.js超入門で勉強していました。また、こちらの記事も参考にしていただければと思います。） 作成の手順 Nuxt.jsのプロジェクトを作成する templateを作成する 特定の郵便番号の
Vue.jsでライブラリ使わずにgoogle mapを利用する - Qiita
vuejsではvue2-google-mapなどgoogle-mapを利用するライブラリがあるが、色々小回りを効かせたいくて直接APIを触れるようにしたかったのでやってみたらvueのあらゆる機能を触ることになったので実装をまとめてみる。 出来たもの Demo: https://vue-google-map-provider-sample.netlify.com/ Source: https://github.com/inuscript/example-vue-inject-provide-google-map 実装 登場人物は下記のようになる index.html (起動するファイル） MyMap.vue (マップの大本の実装。コンポーネントを組み合わせる親） MapLoader.vue (Google Mapを呼び出すだけ） MapProvider.vue (vueのprovideを提供
Vue.jsとjQueryライブラリを共存させなければいけない場合は、コンポーネントに閉じ込める。(select2版) | SAGA.TXT
禁断の融合魔術 もうjQueryなんて使いたくない！ Vue.jsや、Reactを使って脱jQueryするんだ！ こんな、言葉が叫ばれて久しい昨今、皆様どうお過ごしでしょうか？ 新しいプロジェクトでは、ほとんどが、脱jQeryを果たしていても、各フレームワークのテンプレートエンジン+jQuery+Vueが融合しているプロジェクトも実はあったりするのではないでしょうか？ または、お客様から、 「いやだ！この『ポワン』っていうアニメーションが気に入ってたんだから、このカレンダーはそのままのデザインにしてほしい！」 などの要望があり、泣く泣く、jQueryライブラリを使う事もあるかもしれません。 そんなときは、以下の方法で、なるべく被害が広がらないような、状態にしておきましょう(もちろん、Vue.jsを使用する場合は、jQueryを極力使わない選択をするのがベストです。) 対応前 mounted
Nuxt/VuexでFirebase Authenticationを使ってユーザー認証機能を作る - フリーランチ食べたい
Nuxt/VuexでFirebase Authenticationを使ったユーザー認証機能を作るにあたって、基本的なやり方はFirebaseドキュメントに書いてあるのですが、「どこに何を書けばいいのか」がよくわからなかったので調べながらまとめてみました。 完成形 こんな感じで用意されたUIを使ってログイン機能が実装できます。 前提条件 Firebase Projectの作成/Firebase SDKの作成はNuxt/Vuexには関係しない部分なので次の記事を参考に行ってください。この記事はFirebase SDKをNuxt/Vuexにどう組み込むか、を中心に書きたいと思います。 firebase.google.com 環境 nuxt@2.5.1 vue@2.6.10 vuex@3.1.0 firebase@5.9.2 firebaseui@3.5.2 FirebaseUIインストール＆CS
Nuxtで@nuxtjs/dotenvを使って環境変数を環境ごとに読み分ける - フリーランチ食べたい
Nuxt開発の小ネタです。環境変数を開発環境/本番環境で切り分けたいときにどうすればよいか、わからなかったのでメモしておきます。 環境 nuxt@2.5.1 vue@2.6.10 @nuxtjs/dotenv@1.3.0 dotenvモジュール nuxtのdotenvモジュールを使います。 github.com インストールは下記コマンドで行ってください。 $ npm install --save @nuxtjs/dotenv # yarn add @nuxtjs/dotenv .envファイル作成 それでは環境変数を設定するファイルを作成していきます。 configディレクトリを作成し、 .env.dev と .env.prod のように環境ごとにファイルを作成します。 config ├── .env.dev └── .env.prod それぞれのファイルに環境変数を記載します。 con
Universalモード（SSR）のNuxt.js + 異なるサブドメインのAPIという構成でクッキー認証とCORSを実現する | Hypertext Candy
この記事では、サーバーサイドレンダリングする Universal モードの Nuxt.js フロントアプリと、それとは異なるサブドメインで運用される Web API という構成でクッキー認証とCORSを実現する方法を紹介します。 Nuxt でアプリケーションを構築する場合、サーバーサイド（というかデータ取得部分）は Web API になるでしょう。そして Web API での認証といえば JWT を用いたステートレスなトークン認証が一般的かと思います。しかし JWT を LocalStorage に格納する実装は脆弱なアンチパターンであると主張する記事や以下参考リンクの記事を読み、フロントエンド + Web API な構成でもクッキーで認証を行い CORS でクロスサイトなアクセスを防ぐ実装パターンを考えてみました。 今回の実装パターンは以下の記事を参考にしました。 独自ヘッダをチェックす
結婚パーティーのため Nuxt と Firebase でサーバーレスなご祝儀を納品した話 - 病みつきエンジニアブログ
この記事はNuxt.js Advent Calendar 2018の10日目です。 友人の結婚式の二次会向けのコンテンツとして、 「ニコ生」風に投稿された写真やコメントが流れるシステム を作りました。 動画だとわかりづらいかもなのですが、広いパーティー会場で、リアルタイムにプロジェクターで写しているような感じです。 ユーザーが写真投稿するページや、プロジェクターで写すためのニコ生風ページに Nuxt.js を使っていて、Firebase Hosting 上で SPA としてホスティングしています。デザインは @aixcheck が作ってくれました*1。 つまり、Nuxt と Firebase で作っている、完全にサーバーレスなご祝儀です*2。ちなみにご祝儀ドメインも取得しました。 こちらのシステムのソースコードは、一部を除いてオープンソースにしています。pages や components
Node.js + kuromoji.js + D3-CloudでWordCloudの画像を出力 | Takumon Blog
なにこれ 前回記事ではReactでWordCloudを出力しました。しかし実際は、過去大量データから出力するようなツールとして使えたほうが便利です。 そこで前回のサンプルをベースにNode.jsでWordCloudのSVGファイルを出力するサンプルを作成しました。 今回はサンプルの実装方法をポイントと合わせてご紹介します。 ※サンプルは以下に置いております。 https://github.com/Takumon/playbox2019/blob/master/node-kuromoji-d3cloud-sample/index.js この記事は、challenge-every-month全員でアウトプット芸人 Advent Calendar 9日目の記事です。前日の記事は、@kojirock5260さんの記事でした。 処理手順 以下4ステップです。 kuromoji.jsで文章を解析して単
Nuxt.js + phina.js でブラウザゲーを作るためにやったことまとめ - Qiita
まず初めに phina.jsだけで完結できるところを、 あえて Nuxt.jsをかぶせて作ってます。 できたクリッカーゲームがこちら↓ 鬼姫無双-ONIHIMEMUSO- 最終的に使ったモノ ゲームライブラリ：phina.js フレームワーク：Nuxt.js データ：Firebase「Cloud Firestore」 サーバー：Heroku CDN：Cloudinary WebPush：OneSignal ドロワーソフト：Sketch App 画像編集：Photoshop 作成環境：phina-ts-seed + create-nuxt-app 作った手順 ゲームデザイン まずコンパイルが早いparcelで、phina.jsを使いゲーム自体を作る 中だるみを避けるためにここでキャラデザする Nuxt.jsを乗せてデータ連携・phinaとのつなぎ込み 細かい描写を入れていく ゲームデザイン
Nuxt.js で Vuex を使う | mintsu's blog
Nuxt.js で Vuex を使う 目次 Nuxt.js で Vuex を使う 目次 Vuex とはなにか Flux Fluxの要素 Dispatcher Store Action View Vuex Vuex のデータフロー Vuex Store の機能 Action Mutation State Getter Vuex機能の処理の流れ Nuxt.js で Vuex を利用する 今回作るアプリ Store ファイルの作成 stateの実装 mutationの実装 actionの実装 getterの実装 Viewの実装 感想 参考 Nuxt.js で Vuex を使ってみたので使い方、Vuexとはなにか、自分なりに理解したことをまとめます。 Vuex とはなにか Vuex は Vue.js アプリケーションのための 状態管理パターン + ライブラリです。 これが Vuex の背景にある基
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - kamatte-me/nuxt2-gae-se: Nuxt.js v2 on Google App Engine Standard Environment
部内チャットツールのオフライン対応をした話 / Make traQ offline available
GatewayパターンとSchema駆動開発
https://oswdiary.net/archives/5853