旅好きの気ままなお話

旅のこと映画、統計、会計、プログラミングなど、気の向くままに語ります

Nuxt.jsをfirebaseにデプロイする方法

Nuxt.jsでアプリを作成する

hogeがアプリケーション名です。

vue init nuxt-community/starter-template hoge

セットアップ

cd hoge
npm install

ローカルで確かめてみる

npm run dev

下記にアクセスして問題ないか確かめます。
localhost:3000

firebaseを導入

npm install -g firebase-tools
firebase init hosting
? What do you want to use as your public directory? (public) 

=> distと入力

? Configure as a single-page app (rewrite all urls to /index.html)? (y/N)

=> yと入力

firebaseにデプロイ

本番環境をローカルで確かめる

npm run build
npm run start

firebaseにデプロイする

npm run generate
firebase deploy

一応、ポートフォリオサイト作ってみました

githubにも上げているので参考にしてみてください。

ポートフォリオサイト

github

Nuxt.jsでsvgを使う方法

Nuxtのlintの設定でsvgファイルは閉じタグが強制になっているのでlintを少しカスタムしてあげる必要がありました。

.eslintrc.jsに下記を追加してあげれば大丈夫です。

  // add your custom rules here
  rules: {
    "vue/html-self-closing": ["error", {
      "svg": "any"
    }]
  }

anyはlintを強制しないという意味です

vueのプラグインの順番でハマった件

先日、vue-lazyloadを実装しようと組み込んだのですが、 Failed to resolve directive: lazyというエラーが出て機能しませんでした。

公式ページでプラグインを使用する場合は順番守ってね、ということでした。 https://jp.vuejs.org/v2/guide/plugins.html

Vue.use() グローバルメソッドを呼び出すことによってプラグインを使用します。これは new Vue() を呼び出してアプリを起動するよりも前に行われる必要があります:

// `MyPlugin.install(Vue)` を呼び出します
Vue.use(MyPlugin)

new Vue({
  // ... オプション
})

まぁ、そりゃそうですよね。

vscodeでgitlensが急に使えなくなったときの対応

他のプラグインでも同様の方法で解決できる可能性があります。

いったんvscode上でアンインストールをして、 下記の操作をして対象ファイルを削除するだけです。

環境はmacで行っています。(特に環境が問題になるような問題でもなさそう)

$ cd .vscode/extensions/
$ ls | grep gitlens
eamodio.gitlens-8.5.6
$ rm -R eamodio.gitlens-8.5.6

bottleでファイルダウンロード機能を追加する

bottleでファイルダウンロード機能を追加するのは結構簡単です

とりあえず下記のような感じでダウンロード出来るようになります・

ファイル構成

  app
  ├── controller
  │     └── static.py
  │
  └── static
         ├── csv
         │   └── sample.csv
         └── img
             └── samle.jpg

htmlタグ

<a href="/download/csv/sample.csv" download="sample.csv">sample.imgをダウンロード</a>

controller/static.py

from bottle import route, static_file

@route('/download/:path#(csv|img)\/.+#')
def download_static(path):
    return static_file(path, root='app/static', download=True)

rubyでヒープソートを書いてみました

ヒープソートの説明はwikiを見てください。 ヒープソート - Wikipedia

計算量は必ず、O(n log n)で並び替えるデータの質に関係なく、高速にソート出来る点です。

ヒープソートのクラス
class HeapSort
  class << self
    def call(list)
      build_heap(list)
      (list.size - 1).downto(1) do |i|
        list[0], list[i] = list[i], list[0]
        heapify(list, 0, i)
      end
    end

    private
    def build_heap(list)
      n = list.size / 2
      n.downto(0) do |i|
        heapify(list, i, list.size)
      end
    end

    def heapify(list, idx, max)
      largest = idx
      left = idx * 2 + 1
      right = idx * 2 + 2

      largest = left if (left < max) && (list[left] > list[idx])
      largest = right if (right < max) && (list[right] > list[largest])
      if largest != idx
        list[idx], list[largest] = list[largest], list[idx]
        heapify(list, largest, max)
      end
    end
  end
end
使用してみる
pry(main)> list = [34, 6, 99, 43, 67, 37, 87, 5, 25, 85, 19, 63, 9, 35]
=> [34, 6, 99, 43, 67, 37, 87, 5, 25, 85, 19, 63, 9, 35]
pry(main)> HeapSort.call(list)
=> 13
pry(main)> list
=> [5, 6, 9, 19, 25, 34, 35, 37, 43, 63, 67, 85, 87, 99]

スクレイピングで文字化けを防ぐ方法

下記が使用するライブラリ(chardet)です。

pypi.org

chardetは文字コードを検出するライブラリで検出して取得したデータにdecodeをすると文字化けを解消できます。

sampleは日経のページです。

import urllib3
import chardet

url = "http://www.nikkei.com/"
http = urllib3.PoolManager()
r = http.request('GET', 'http://www.nikkei.com/')
r.data
guess = chardet.detect(r.data)

unicode_data = r.data.decode(guess['encoding'])