code smith

開発で日々の生活をもっと楽しく

vue.jsにfirebaseを組み込む際、warningが出た時の対処法

firebase vue.js
f:id:gaku3601:20180827083349p:plain

Gakuです。
ちまたではvue.jsとfirebaseで連携したアプリケーション開発が流行っていますね。
私も触ったことがなかったので、今朝から触り出したのですが、短時間のうちにチャットシステムが作成できて衝撃を受けております。
そのうえで、vue.jsにfirebaseを組み込んだ際にwarningが出力され、少しだけハマったのでその解消法を掲載しておきます。

import firebase from 'firebase'

これでvue.jsに組み込むと以下のwarningが出力されます。

It looks like you're using the development build of the Firebase JS SDK.
When deploying Firebase apps to production, it is advisable to only import
the individual SDK components you intend to use.

For the module builds, these are available in the following manner
(replace <PACKAGE> with the name of a component - i.e. auth, database, etc):

CommonJS Modules:
const firebase = require('firebase/app');
require('firebase/<PACKAGE>');

ES Modules:
import firebase from 'firebase/app';
import 'firebase/<PACKAGE>';
...以下省略

warningとかerrorとかは動いていても潰していきたい性分なので、潰します。

解消法

すごく簡単です。

import firebase from 'firebase'

で記述していた部分を

import firebase from 'firebase/app'

に変更するだけでOKです。 また、firebase.auth()やfirebase.database()を使用する場合、

import firebase from 'firebase/app'
import 'firebase/auth' //ここ追記
import 'firebase/database' //ここ追記

のように追記してあげれば、warningが出力されないようになります。

さいごに

warningとかerrorは精神衛生上とか割れ窓理論的に良くないので、みつけたら速攻潰していきましょう(´・ω・`)b

参考文献

github.com

vue.jsで異なるブラウザ、OSでのデバックを実施する場合のTips

環境構築 vue.js

Gakuです。
もっぱら開発は会社支給のmac proで開発している今日このごろです。
mac端末でvue.jsの開発していると、windowsのIE、chromeとかiOSのsafariとかでブラウザ間の表示面を確認したい時があると思います。
異なるブラウザ、OS間でデバッグを行う方法を備忘録としてまとめておきたいと思います。

ネットワークの統一

macでvueのアプリケーションをdevモードで起動し、他PCやスマホでその内容を表示させる場合、同一のネットワークに所属しておく必要があります。
忘れやすいので、まず設定しておきましょう。

f:id:gaku3601:20180826144958p:plain

(aterm-216f88-awにmacで接続しているなら、デバックを行いたい別PCでもaterm-216f88-awに接続しておきます。)

vue.jsの設定

vue-cliで生成したvueであれば、build/webpack.dev.conf.jsが存在していると思います。
以下のようにdevServerの部分にhost: '0.0.0.0'を追記します。

devServer: {
    clientLogLevel: 'warning',
    historyApiFallback: {
      rewrites: [
        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
      ],
    },
    hot: true,
    contentBase: false, // since we use CopyWebpackPlugin.
    compress: true,
    host: HOST || config.dev.host,
    port: PORT || config.dev.port,
    open: config.dev.autoOpenBrowser,
    overlay: config.dev.errorOverlay
      ? { warnings: false, errors: true }
      : false,
    publicPath: config.dev.assetsPublicPath,
    proxy: config.dev.proxyTable,
    quiet: true, // necessary for FriendlyErrorsPlugin
    watchOptions: {
      poll: config.dev.poll,
    },
    host: '0.0.0.0' // ここを追記します
  },

ifconfigでvueを立ち上げているPCのローカルipアドレスを調べる

ifconfigコマンド(windowsであればipconfig?)で、vueappを立ち上げているPCのローカルIPアドレスを調べます。

f:id:gaku3601:20180826145526p:plain

(今回の場合、192.168.10.9でローカルIPアドレスが振られていました)

デバック!

上記の内容で設定は完了しているので、「npm run dev」コマンドでvueappを立ち上げます。
他PCで、「192.168.10.9:8080」(ip部分は適宜、ifconfigで確認したipに変更してください。)にアクセスすれば、アプリケーションが表示されると思います。
macのchrome(app立ち上げPC)

f:id:gaku3601:20180826145853p:plain

winのchrome(同一ネットワークの別PC)

f:id:gaku3601:20180826150140p:plain

スマホのchrome

f:id:gaku3601:20180826150401p:plain

おわりに

Webアプリケーション開発ではブラウザ依存関係に戦うことが多くあります。
少しでもデバックを楽にして、日々のブラウザ依存との戦いに挑んでいきましょう。
最後にひとことだけ。
IE撲滅せよ！(´・ω:;.:...

s3+cloudfront構成でfontawesomeのfontがblocked by CORS policyで表示されない問題の解法

aws

Gakuです。

S3+CloudFrontでWebフロントシステムを作成していると、FontAwesomeのフォントが表示されない問題が発生しました。

f:id:gaku3601:20180823063821p:plain
f:id:gaku3601:20180823073234p:plain

こんな感じです。
修正方法の備忘録を残します。

S3の設定

まず、S3で適切にCORSの設定を行います。
プロパティ>アクセス権限>CORSの設定で以下のコードを記述します。

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>HEAD</AllowedMethod>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3600</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

AllowedOriginは全てのドメインから許可にしていますが、セキュリティを高めるなら、所定のドメインのみを許可する設定にした方が良いです。

CloudFrontの設定

Behaviorsのタブから設定を行います。
Cache Based on Selected Request HeadersからWhitelistを選択するとWhitelist Headersが設定できるようになります。
ここにOriginをAddしてあげればOKです。

f:id:gaku3601:20180823072844p:plain

更新に時間がかかりますが、deployが完了すれば適切にFontが表示されるようになります。

まとめ

いろいろハマりどころが多いですが、一度覚えてしまえば手軽・安価に構成できるのがAWSサーバレス構成です。
また何かハマったらここに記述していきます。(´・ω・`)b

fish shellでベリーかっこいい開発環境構築

環境構築

Gakuです。
暑いです(´・ω・`)

世間はまだまだ夏ですが、自分の開発環境もhotにすべく久しぶりにfish shellを入れてみたので、その際の導入方法を記述したいと思います。

fish shellとは

f:id:gaku3601:20180822072055p:plain

金魚です(´・ω・`)
何かしょぼそうって思うかもしれませんが、こいつ入れるだけでターミナルが超絶かっこよくなるので、やっていきます。

導入

brew install fish
sudo vi /etc/shells # 末尾に/usr/local/bin/fishを追加
chsh -s /usr/local/bin/fish # デフォルトのshellをfishに変更

HomeBrewを入れておく必要はありますが超絶簡単ですね。これだけでターミナルがこうなります。

f:id:gaku3601:20180822072852p:plain

いい感じです(´・ω・`)b
プラスでplugin管理ツールのfishermanというものも入れておきましょう。

curl -Lo ~/.config/fish/functions/fisher.fish --create-dirs git.io/fisher
fisher -v

初期の設定はこれだけです。

themeを変えてかっこよくしていく

fishermanを使えば、基本的にコマンド一発でthemeを変更することができます。

fisher omf/theme-zish
f:id:gaku3601:20180822073247p:plain

とか

fisher simnalamburt/shellder
f:id:gaku3601:20180822073310p:plain

とか

fisher omf/theme-clearance
f:id:gaku3601:20180822073329p:plain

とか

fisher omf/theme-technopagan
npm install -g moonmoji
f:id:gaku3601:20180822073351p:plain

みたいな感じでthemeを変更できます。
以下サイトを参照しつつ、気分に合わせて好きなものを探せば良いと思います。 github.com

peco導入

超絶便利なpeco入れていきましょう!
peco+ghqとかで何ができるの？って方は
qiita.com ここらへんに書かれている内容を読めばいいと思います。

brew install peco
vi ~/.config/fish/functions/peco_change_directory.fish
# 以下を/peco_change_directory.fishに追記
function peco_change_directory
    ls -1d $HOME/src/*/*/* | peco | read dist
    cd $dist
end
vi ~/.config/fish/config.fish
# 以下をconfig.fishに追記
function fish_user_key_bindings
  bind \cf peco_change_directory # Bind for peco change directory to Ctrl+F
end

これでCtrl+Fでpecoが起動されるので、dirを選択するだけで爆速change directoryが可能になります。
(ghqで書かれている記事が多いですが、多くのリポジトリを管理していると、だんだん重たくなってくるので、今回はlsで記述しています。)

aliasとかの設定

今まで、aliasとか環境変数とか書いていた.bashrcや.bash_profileの内容は今後、~/.config/fish/config.fishに書いていけばokです。

Tips

なんかうまくいかない時は~/.config/fishの中にあるfishd.[hash値]のファイルを消すとうまくいく可能性あり。

まとめ

2番煎じならぬ5番煎じぐらいしている内容ですが、fishは素晴らしいのでご紹介させていただきました。
vimとかshellはエンジニアの刀だと考えてます。
日々使いやすくしていくことは、その刀を研ぐことと同じだと考えてますので、じゃんじゃん設定して自分好みの便利な環境を作っていきましょう(´・ω・`)b

参考文献

dev.classmethod.jp qiita.com

僕がプログラミングを学んできた道のりをまとめてみる

雑記

f:id:gaku3601:20180821083145j:plain Gakuと申します!
大阪で不動産屋やってます。
どうぞよろしくお願いします。

さて、本ブログの記念すべき最初の記事として、不動産屋である僕が歩んできた十数年の勉強経歴を書かせていただければと思います。
「プログラミングの基本構文勉強したけど、で、ここから何すればいいの？」という方に少しでもお役立ちできれば幸いです。

中学生時代

僕のプログラミングの旅はここから始まりました。
中学2年生の時に我が家にPCが導入され、オンラインのチャットやゲームをひたすら熱中していた記憶があります。
インターネットという魅力に取り憑かれ、いつしか「自分のWebサイトを持ちたい！」という気持ちでHTMLやCSSをちょろちょろ触って遊び感覚でそこらへん勉強していました。
この頃はガラケーの時代でしたので、流行っていた掲示板サービスをレンタルし、独自のアダルト掲示板を作って運営したりしていました。
アダルトを選択したのは「稼げるから」という理由で、この掲示板は高校1年生くらいまで運営し、月10万円ほどmaxで稼げるまでに成長させました。
勉強すれば＝稼げる でどんどんプログラミングにハマっていった時代でした。

高校生時代

中学でここまでハマったプログラミングを極めたいと思い、高校は高専の情報科を選択しました。
C言語で基本構文を勉強し、HTMLとCSS以外にもconsole上で動くCUIのソフトウェアを作成することにも魅力を感じ始めます。
自宅ではruby言語を学習し、twitterの自動フォローツールを作成し、100アカウント程度を運営、フォロワー数は計数10万人いたと思います。
そこに広告を打ち、月20万円ほどmaxで稼いでおり、ひとえに有頂天になっていた時代です。(そのうちtwitterの規制がきつくなり、ほぼ全アカウントBANをくらいましたが、非常に勉強になった経験でした。)

大学時代

高専での進路戦争に負け、関東の大学に飛ばされます。
この頃は稼ぐことではなく、ひたすら綺麗なコードを書くことを目指しており、某生放送サイトでプログラミング生放送と題して勉強放送をしたりしていました。(プログラミング生放送には、様々なプログラマーの方に訪れていただき、そしていろいろ教えていただきました。感謝しかないです。)
使用していた言語はC#言語の.Net Framework・WindowsFormで、某アダルトサイトの動画を自動でダウンロードするようなGUIアプリケーションを作成していました。

社会人時代[1社目]

貴重な新卒カードを犠牲にし、適当な東京のSIer会社に就職します。
言語はC#でWindows系の業務用Webシステムを主に作っていましたが、自宅ではRuby on RailsでWebシステムを作成したりしていました。

社会人時代[ニート]

フリーになりたいと思い、1社目を退社し奈良の実家に帰りニートになります。
結局フリーにはなれなかったのですが、この頃はdockerやgolangを勉強していました。
また、デザインパターン等もこの頃勉強した感じです。

社会人時代[2社目]

こういった経歴があり、今の会社に至ります。
職種はガチ不動産屋で「顧客側に周れば仕事楽かな」という気持ちで入社致しました。
言語やフレームワークは自由なので、AWSのサーバレス構成でgolang言語を使用し業務系システムを作ったり、外部ベンダーディレクション(主な仕事)を行ったりしています。

まとめ

とりあえず、ただの勉強ではなく、システムを作成することが楽しいので勉強を行うというサイクルでここまできたと思います。
もし、プログラミングの基本構文を学んで「ここから何すればいいの？」という方は何か作っていけばいいと思います。
おすすめは「アダルト」か「お金を稼げること」です。
僕もこのブログと共にまた成長していこうと思います。今後はモダンテック系の記事を中心に書いていこうと思いますので、どうぞ末永くよろしくお願いします(´・ω・`)