カテゴリー: JavaScript

Home / カテゴリー: JavaScript

ニームの書で使った道具

2018-12-12 | Final Fantasy XIV, Flask, halipe.co, JavaScript, Python, Responder | コメントはまだありません

そのうち使ってるツールを差し替えたりもするだろうから、いったん今のとこの技術スタック(っていうの?)をメモしておく。
基本的にはPython(Flask)以外はほぼぜんぶ初めて使うもので占められている。ふつうは知らないことを追加するのは+1にしなさいっていうんだけど、完全に無視した。のたうち回ったし、のたうち回っている。

ニームの書(halipe.co)

Backend

スクリプトはすべてPython。Flaskつかってて、Responderにリプレイスできるか試している。最初はElixirいくか!!とか息巻いてたが、API作るくらいのことで死にそうなのでやめた。
いまはGAEのFlexible環境にDockerコンテナ投げてAPIサーバが立ち上がっていて、ほかにはCloud Functionsで関数(これもPython)がいくつか。

そもそもはKubernetesに習熟したいという野望があってしこしこyaml書いてた。超楽しい。が、SSL証明書の取得と設定らへんで盛大にすっ転んだうえ、誤ったコンフィグを投げてはLet’s encryptにロックされて作業が止まるため、急遽GAEに逃げ込んだという次第。証明書やらドメインまわりやらが便利すぎてヨダレ出た。一方でデプロイ10分以上かかるのはちょっと辛い。
なんかStandard環境でもPython3使えるみたいなのを見かけたのでそっちに移す予定。jsonやyaml読んでjson吐くくらいしかしてないしょぼいAPIの為に毎月5000円払っている。しょぼいわ。
むろんそんだけの機能を、Kubernetesでクラスタあげようとしてたわけです。立ち上がってたら5000円どこじゃ済まないが、それはいいんだ。インフラ屋でもない人がこういうのの構築やるにはホビーくらいしかチャンスがない。
コマンド一個でPodが増えたり減ったりするのは、なんとも言えない愉しみがあった。あのPodやらService、むかしは物理サーバ一個一個でやってたんだぜまじかよってかんじ。

CI

リポジトリはBitbucket使っているので、マスタへのマージの際にBitbucket Pipelinesを起こし、Slackに通知するようにだけしている。
Python側だけテストが少し書いてあって、フックでテスト通すとこまでできた。これももちろん初めてだったので、動いたときはそれはもう大変に嬉しくて、ムダにPushした(程なく無料ビルド時間を使い切り動かなくなった)。
JS側がテスト書くまで至っておらず、まだ完成してない。Jestというのを見つけたので使ってみようと思っている。

DB

DBはCloud Firestoreをつかっている。ゼロの状態からNoSQLのDBつくんの初めてだった。リレーションとかあんま気にしないでいい単純なアプリなので、あんまり深い困りごとには遭遇してない。タグ検索とかの実装用にインデックスのテーブルこさえたりしたけど、テーブルそのものに張ってるindexつかうのとどっちがいいんだろうみたいな感じ。活用してる感はない。
更新情報とかはSpreadSheetに書き付けていて、反映用のスクリプト叩くとFirestoreにデータを放るという運用をやっている。一番最初はvueファイルにまるまる書き込んでたので、更新情報のっける程度の用事でデプロイが発生していた。

Frontend

TypeScript + Nuxt.js。どっちも使ったことないので採用。ホビーとはいえ無茶な挑戦だった。困ったときにTypeScript/Vue.js/Nuxt.jsいづれの問題なのかの切り分けすらできないような三下が、まるっきり全部わかんない状態で挑んだ。
作業の大半は調べ物の時間で、文字通りヨレヨレになっていた。
いっぽう尋常でない学びはあった。イベントハンドラって何?みたいな基礎部分への理解も危ういくらいの人だったんだが、なんとかなりつつある(まだ危うい)。
CSSまわりはBulmaを入れた。じつはCSSフレームワークの導入からやったのも初めて。
ほんと今まで何やって食ってたんですかねという感じなんだが、すでに動いてるプロジェクトに参加することが多いと下地はあらかた出来上がっていたりで、構築にはあんまり関与しないで済んじゃってたという背景がある。

ほか

手元でバッチやらを書く下地はJupyterNotebookを使うことがある。ド頭から動かさずに気になるとこだけ叩けるというのがことのほか便利で感動している。
表の操作はPandasとか使ってるけど、必要でというよりは使う理由になるので入れてるといった感じ。慣れておきたい。

地図をはじめ、さまざまな画像は基本的にFireworksでやっている。今となっては太古のアプリなんだろうか。あたしの用途ではこいつを超えるアプリケーションが地上にない。Vectorスイスイ書いてビットマップを切り取る切り抜くとかを、こやつだけが軽快にやってくれる。問題は古いのででかい画像に超弱い。もともとメモリの危ういソフトなんだがすぐ吹っ飛びそうになるのでおそるおそるやっている。横1900のPNGを9枚も食わすともう挙動不審になる。

ロゴのVectorを作るとかはIllustlatorをつかっている。これも昔々のやつだけど、あたしは線が書けてaiが書き出せたらいいので、それ以外のことでは全く用途がない(せいぜいトレースくらい)ので、たぶんもうこの先新しいIllustlatorを買う機会もあるまい。いまはそっち側で食べてるわけでもないし。
あ、名刺作るときは活躍してるんだった。赤作るときはYMを100にするだけじゃなくて黒10%入れろとか、ああいう細かい話がたまーに活きることがある。
オンデマンド機だと関係ないけれども。

Firebase+Nuxt.jsでTwitter認証する

2018-09-26 | JavaScript | コメントはまだありません

tl;dr

API Keyの入力欄にAccess Tokenを入れたことに気づかず数日を無駄にした。
おわり。

以下のあれこれは、上記キーの取り違えに気づくまでの間にやった意味不明な作業のメモで、役に立たないです。どんなミスをしたのかを書いています。

—-

勘違いだらけで間抜けだったので罰として残します。
Qiita見てても分だの秒だの爆速だのでサクッとうまくいった記事ばっかなので、要領悪い記録が混じってもいいだろうと思って。

  • Firebaseにのっけたい。便利なツールが色々あるので使いたい
  • Nuxt.jsでWebアプリを書いてる
  • 認証をTwitterのやつ使おう
    (Google認証とか色々あるけどまずはTwitter)

余談ですがTwitter避けようぜキー発行厳しくなるし的な話ちょいちょ見かけますけど、個人的には厳しかったことは一度もない。
開発者アカウントの発行完了は秒でしたし、その後も特段困るような何かには遭遇してません。

API Keyを間違えてる場合

> code:”auth/internal-error”

のエラーが返ってきます。

FirebaseのAuthentication

Twitter側のコールバックURLに設定しろという謎のurlだが、これはFirebase側で引っ掛けて勝手に持っていく。
黙ってTwitter側のアプリ設定(Settings→Application Details
→Callback URLs)に入力したら、以降は忘れてよい。
自分のアプリ→Twitter→Firebase→自分のアプリ
と遷移するんだわな。
自前でやるときは自分のとこにコールバックさせるところを、ユーザ情報しまいこんだりする都合でワンクッション挟んでるだけだと(よくわかってなかった)。

https://myproject-id.firebaseapp.com/__/auth/handler

こんなん。
nuxt.js使ってるとアンスコで始まるurlって変数として使ったりするので、

  • こんな奇妙なページ用意せんとあかんのか?
  • でもそんなページ用意してる記事見かけないなー
  • はっ もしかしてこの辺が面倒で誰も記事書いてないの?
  • なんかGoogle認証だけで済ませてる記事はお茶濁してるの!?

という変な飛躍をし、nuxt.jsのrouterにextendRoutesして謎ページ作ったりすることで時間を浪費。

nuxt.config.js(無駄)

router: {
  extendRoutes(routes, resolve) {
    routes.push({
      name: 'auth_handler',
      path: '/__/auth/handler',
      component: resolve(__dirname, 'pages/Info/Hoge.vue')
    })
  }
}

上記のミスをするのは私が人類で最後です。
こんなことはせんでよく、ただPopupだかRedirectだか指定して叩けばいいだけだった。

最初から最後まで、たんに初手でApiKeyを取り違えたとかいうミスですべてが上手くいっておらず、それに気づかないまま迷走しただけの話でした。

Javascript覚書

2015-03-05 | JavaScript | コメントはまだありません

色々ありすぎてどの順番で手を付けたら進めるのかもわからぬ。地図がいる。
わかるのはcoffeeだけだ。

ファイル:ソースは一箇所にどかどかおいておき、
コード:内部でrequireしてガリガリ書き、
テンプレ側:gulpでファイル1個にまとめたものを読み込ませておく

とかであろうか。reactみたいなライブラリまでコンパイルしなくていいんだろうけれども。

Browserify

requireするためのもの?これつかえば外部JSを読み込んで使えるみたい?
つまりscript src=hogehoge書かないで済むよということかな。

Gulp

ビルドツールで、Node.js上にて動作する。
minifyしたり、lessのコンパイルを出来る。
え、あ、つまりcompassとかおぼえなくてもいい?

React

ビュー部分のみのツール。Fluxと組み合わせるんだよみたいなのをよく見る。

Arda

Ardaの目的はFluxの概念をベースに、画面遷移と状態とシーンをベースにしたヒストリ管理、その際のDispatcherのコンテキスト切り替えを行うことを主な目的としている。
引用元:Arda – MetaFluxなフレームワークを作った – Qiita

ぜんぜんわっっかんない。まずはReactの理解をして、Fluxさわって、そのあとでやろう。

ReactとかFluxとかArdaとか

2015-02-24 | JavaScript | コメントはまだありません

をやろうとしとりますが、ビルド環境とかいい感じのディレクトリ構成とか、そもそもnpmよくわかんねえとか細かいモジュールすごい数で引くとかしてて、
そもそもの学習に入れません。
インプット多すぎて脳が死ぬ

JS諸々をさわろうとして折れかける

2015-02-18 | JavaScript | コメントはまだありません

#未来のあたしへ:混乱しているのを整理するために書いているので嘘が書かれているかもしれません。ごめん。

AngurarJSに入門しなおすぞと意気込んだ2日後にきなくさい話を聞き、あっそうですか撤退ですねとなった。
Fluxフレームワーク Arda が気になる10の理由 – Qiita

じゃー同時に気になっていたReact.JSでもやってみようかなーと手を出したら火傷したという話。
そもそもJavaScriptへの理解は浅くて、せいぜいjQueryあればだいたい書けますが、くらい。
CoffeeScriptを知ったおかげで面倒な記法を回避できてホクホク、くらい。
Node.jsはインストールのみmでしかしたことない。サーバでJavaScriptが動くと言われても気持ち悪い。今でも気持ち悪い。以前、この気持ち悪さを耐えて、触っておけばよかった。
なんかエコシステムがもんげー巨大になっていて、どこから触ると入り口に到達できるのかももはや見えない。

あたしがやりたいのはフロントの操作を上手にやるためにJavaScriptを使いたいので、サーバ側で動くよ!とかいわれても全然そちらの需要はない。phpかpythonで書くから困らない。

いろんなフレームワークやらツールやらを、scriptタグで読み込むものがJavaScriptなんだと思ってたんだけど、なーんかフロント側で使うはずのツール群でも
module.exports hogehoge

が出てくる。
あれはなんなのであろうか、exportsされてるものをどっかでrequireするわけで、あたしの知ってるJavaScriptはそういう機能持ってないはずだったんだが。改めて一個のjsに変換するとかやる(やるの?)ときに、必要な物をまとめて取り込む仕掛けなのであろうか。

ただでさえあたしがふだん触っているJSも、Coffee→JavaScriptと変換作業をやっている。ReactjsではJSXというのも出てきた。XMLだというのでまあいいんだけど、変換変換変換っていつまで続くのこれ。ゴール地点のJavaScriptが酷すぎるとかの理由でこうなってんの?
こんな便利なツールが有るよ!で見に行くと、また独自記法の解説が載ってる。君らなんでそんなに新しい記法覚えたがるの?

一歩一歩、理解を進めたいのだが、サーバ側のNodejsの話まで理解しに行かないとダメなのか。
やりたいことをやろうとするスタート地点にすら立てないというのがそうとうきておるわけです。

ああ、気持ち悪い。

CSSにはSASS/SCSSとCompass?だかがあった気がする。途中でルビー入れろと言われて機嫌悪くなったので追いかけるのをやめた。こちらも機嫌のいい時に再開しよう。