「Heroku」の記事 - Crieit

Nuxtアプリを無料で公開するときに試した5つの環境まとめ(Firebase/GAE/Netlify/Heroku)

2020-03-20T13:51:56+09:00

最近Nuxtでいろいろ作っているけど、無料で使える環境をいろいろ試してる。
いろいろメリデメあるけど、SPAならNetlify/SSRならHerokuがよさそう。
いままで試したものをまとめてみた。

ほしかったもの

主に開発してるのがCGM系のWebサービスなので、

動的なOGP画像などが設定できる(OGP芸)
カスタムドメインが使える
日次のランキング集計などの定期実行ができる

が、無料でできて、なるべく実装が楽で、そこまで遅くないのがうれしい。

試した5つのパターン

試したのは以下の5パターン。試してみた順で記載。

Nuxt(SSR) + Cloud Function
起動がかなり遅かった。。実装も大変なのでNG
Nuxt(SPA) + Firebase Hosting
構築はかなり楽。ただ、OGP芸が大変でFunctionsが必要
Nuxt(SPA) + Netlify
プレレンダリングでOGP芸が楽。定期実行はFunctionsでできる
Nuxt(SSR) + GAE(f1:256M)
メモリの制限きつく、たまに落ちる。。定期実行はcron.yamlでできる
Nuxt(SSR) + Heroku(free:512M) + Cloudflare
メモリ多くてよい。SSLはないのでCloudflareを併用。定期実行はHeroku Scheduler

SPAで十分であれば、「3.Nuxt(SPA) + Netlify」が構築も簡単で良かった。
積読ハウマッチは、現在この構成。

SSRの場合、「5. Nuxt(SSR) + Heroku(free:512M) + CloudFlare」が良い感じ。
へんあいマップがこの構成。

各パターンについて

1. Nuxt(SSR) + Cloud Function

一番はじめに積読ハウマッチでやろうとした構成。

細かいやり方は、以下の記事の「Firebase Cloud Functionsの設定してSSRできるようにする」あたりに。
・Nuxt.jsではじめるときのやることリスト(SSRも国際化も自動デプロイも) - くらげになりたい。

当時は動的ページのSEO対応するには、この方法が多く検索に出ていたので試したけど、
Cloud Functionのコールドスタートがつらすぎてお蔵入り。。SPAでいくことに。。

2. Nuxt(SPA) + Firebase Hosting

積読ハウマッチをリリースしたときの構成。

課題だった動的ページのSEOは、Cloud Functionsを経由して返す方法で対応。
こちらも当時よく検索に出てたけど、実装が大変そうだったので2番手に。

細かいやり方は、以下の記事に。（2020/03/22追記: OGP画像生成系の記事を追加）
・Nuxt(SPA)+FirebaseでSEO！OGP！: 特定のパスだけheadだけ返すやつ - くらげになりたい。
・Nuxt.js(SPA)+Firebaseで積読用の読書管理サービスを作ってみたときにハマったこと - Qiita
・Cloud Functions + ImageMagickでOPG画像の動的生成してCloud Storageにアップロードする - くらげになりたい。
・Cloud FunctionとSVGでOGP画像生成を試行錯誤したまとめ - くらげになりたい。

カスタムドメインについては、Firebase HostingでSSLと合わせて無料で設定可能。

定期実行は、Cloud Functionsでできるのでそれを利用した。
・関数のスケジュール設定 | Firebase
・Cloud Functions for Firebaseのcronみたいな定期実行を試したら簡単だった - Qiita

ただ、Cloud Functionsの定期実行は、
「Googleアカウントごとに3つのジョブを無料で使用できる」
なので、注意が必要。プロジェクトごとじゃない。。

3. Nuxt(SPA) + Netlify

積読ハウマッチの現在の構成。

NetlifyのPrerenderingが無料化されて使えるようになり、よいという話を聞くように。。

実装が複雑で、変更もしにくかったので、この方法に。
Netlify自体がCDNも提供していているので、すこしはやくなった(気がする)

カスタムドメインも、NetlifyのDNSを設定して無料で対応できる。

定期実行は、2.と同じ感じで、Cloud Functionsのまま。

コード量も減って変更もしやすくなったので、OGP画像の改善とかが楽にできるように。。(´ω｀)

4. Nuxt(SSR) + GAE(f1:256M)

SPAの課題として、初期表示が遅いのでなんとかしたいなと、SSRの環境を模索しはじめ。。
公開していないけど、1つ作ってみた。

試してみたところ、起動するだけでメモリ上限すれすれで、複数アクセスがあったりすると、落ちる場合も。。
(ts-nodeで動かしているのも悪い気がしている。。)

ただ、定期実行はcron.yamlを用意すればURLに送信でき、無料範囲も広い。
料金も「その他のリソース」をみるとcronは無料のよう。
・cron.yaml を使用したジョブのスケジューリング

カスタムドメインやSSLも無料で利用できる感じ。(試してないので未確認)

5. Nuxt(SSR) + Heroku(free:512M) + Cloudflare

GAEでうまくいかなかったので、無料でメモリも多いHerokuを利用。
へんあいマップがこの構成で稼働中。

定期実行は無料のアドオン(Heroku Scheduler)が利用できる。
Nuxt側でserverMiddlewareを用意すればOK。

ただ、メモリは多く定期実行もが、Herokuの無料枠だと制限も多い。

SSLは非対応
30分アクセスがないとスリープする
クレジットカードの登録で1000時間/月xアカウント
(未認証だと550時間/月xアカウント)

1. SSLは非対応

単体だけだとSSLに対応していないので、Cloudflareを併用。
CloudflareがCDNも提供してくれるので良い感じに。

2. 30分アクセスがないとスリープする

これは、Heroku Schedulerを使えばOK。
任意のURLを叩けるため、15分毎などスリープしないようにしておく。

3. 無料枠は1000時間/月xアカウント

1000時間あれば、24時間x31日でも744時間なので、大丈夫な感じ。
ただ、アカウント単位での無料枠なので、複数アプリを無料で稼働はできない。。

実際のやりかたとかは、

以下の記事に。
・Heroku+CloudflareなNuxtでSSRしてみる - くらげになりたい。

まとめ

いろいろ試してみたけど、Nuxt.jsを無料で公開するときは、

SPAならNetlify
- prerenderingで動的ページのSEOも対応
- カスタムドメインやSSLもNetlifyでOK
- 定期実行はCloud Functionsで。
- ただし、定期実行は1アカウントにつき、3ジョブまで
SSRならHeroku
- SSRで動的ページのSEOも対応
- 定期実行はHeroku Schedulerで
- Cloudflareを併用し、SSL対応
- 無料枠は1アカウントにつき、1アプリが限界かも

SSRの方は他にCloud RunやZEIT nowがある。
Cloud Runは立ち上げがGAEより遅いときので後手だけど、
ZEIT nowは気になってるので試してみたい(´ω｀)

以上!!

こんなのつくってます!!

積読用の読書管理アプリ『積読ハウマッチ』をリリースしました！
積読ハウマッチは、Nuxt.js+Firebaseで開発してます!

もしよかったら、遊んでみてくださいヽ(=´▽`=)ﾉ

要望・感想・アドバイスなどあれば、
公式アカウント(@MemoryLoverz)や開発者(@kira_puka)まで！

へんあいマップもリリースしました！

「偏愛マップ」を簡単に作れるWebアプリです!
へんあいマップも、Nuxt.js+Firebaseで開発してます!

偏愛マップは人見知りや口下手な人にも優しいコミュニケーションツールで、
勉強会、懇親会、オフ会などの余興・アイスブレイクや自分のプロフィールにも！

よかったら遊んでみてください(´ω｀)

herokuでログを見る方法

2019-12-19T00:04:29+09:00

herokuでログを出力する方法

ローカルマシンのherokuへpushしたリポジトリのあるディレクトリへ移動する。
下記コマンドを実行してログを出力する。
```
$ heroku logs
```

全部無料でWebサービスを公開しよう！(Heroku + Laravel + MySQL + 独自ドメイン + SSL)

2019-10-31T08:02:18+09:00

サービスリリースしました(=ﾟ-ﾟ)ﾉ週休5日のプログラマーは快適という話。
上記で紹介した、Webサービス、My Favorite Recipe　の公開の手順を記事にしました。

◼️はじめに　(｡･ω･｡)

私は初心者です。

IT資格はわりと持っていますが、そんなの関係ありません。実務はほぼVBとVB.NETとVBAしかやってません。SQLもちょっとだけ。

WEB系は設計書レビューした程度です。テスト設計ならもうイヤという程にはやりました。

言い訳はこのくらいにして。

◼️作ったサービスを（気軽に）公開できる場所

LaravelでWEBサービスを作ってはみたものの、さてどこで公開するか？

ということで、試しにHerokuというもの？を使ってみることにしました。

私の事前知識は、Herokuって文字見たことあるけどなんて読むんだろう？まさかヘロクじゃないよね？程度です。（そのまさかの、"ヘロク"でした）

◼️無料万歳　v(｡･ω･｡)v

以下、すべて無料で揃いました。v(｡･ω･｡)v

・Heroku + Laravel + MySQL

・ドメイン取得は、Freenomを利用。

・SSL(https)は、Cloudflare を利用。

利用規約とか説明のための静的サイトは、Firebaseのhostingを使っています。

html/cssテンプレートはf-tpl.comです。これらもすべて無料です。

英語が読めなくても意味がわからなくても、無料ならとりあえず使ってみるの精神で挑戦しました。

◼️事前に用意するもの

・Laravel + MySQL で何か作る

ちなみに「SQLite」もHerokuで使えます。

◼️手順と参考にしたサイト

検索したら、Heroku+Railsの記事が多かったです。
Laravelでも(一部以外は)参考になるので活用しましょう。

・Herokuにアカウント登録して、がんばる o(｡･ω･｡)o

herokuにlaravel5とMysqlの環境を整える

Laravelをherokuにデプロイする(データベースはMySQL)

・独自ドメイン取得して、

Freenom

「Freenom 使い方」でGoogle検索すると使い方載ってるサイトが見つかると思います！

初めてHerokuで独自ドメインを公開するあなたへ

・httpsで接続できるようにがんばる o(｡･ω･｡)o

【完全無料】Herokuで独自ドメイン + HTTPSに対応する【Rails】

【無料】Cloudflareを使ってHerokuで独自ドメインで運用する方法

・MySQLを直で使いたいとき（自分のPCのMySQLの入っている環境でコマンドを実行しましょう）

HerokuのDBにローカルPCからアクセスしたいんだけど...

MySQL Serverに外部から接続する

・Herokuはアクセスしないと寝てしまうみたいなので対策

Herokuの無料dynoをスリープさせないで24時間稼働させる4つの方法

・おまけ (｡･ω･｡)

Firebaseを使って独自ドメインWebサイトを公開する方法

◼️メモ書き程度の記録（役に立つかわかりませんが私のブログです）
blog

◼️ちなみに

現在私は、MacでVagrant環境(CentOS)で開発しています。
CyberduckでファイルをMacローカルにコピーして、それをGitHubに上げて、それをHerokuの管理画面でポチッとDeployしています。

最初はコンソールからHeroku (Heroku Git) に上げていました（どっちでもいいのですが）。

◼️よくわからないこと

Vagrant環境でLaravelプロジェクトを作って、初回リリースは最初はLaravelプロジェクトを丸ごと載せてしまえばいいので問題ないのですが、
機能追加で、composer等で何か変更を加えた時に、何が変わったのかわからないと、本番環境に何を適用させたらいいのわからない、ということが起こります。

composer、今何してるの？っていう（便利だけど何がどこに入ったのかわからない）。
新しいパッケージを入れて使うなどの場合も、本番環境への反映のさせ方がわかりません。
プロジェクトフォルダを丸ごと更新するという技（？）で、ひとまず対応できますが・・・。

◼️おわりに

手順を全部書くと終わらないのでリンクで済ませてしまいましたが、何かあればココのコメントなどで聞いていただければ、だれかが答えてくれるかもしれません！？ o(｡･ω･｡)o　応援してます！気が向いたらやってみてネ o(｡･ω･｡)o　

AnnictAccess3をリニューアルしました！

2019-10-27T21:29:52+09:00

進捗的にはこの記事の続きなのですが、大幅にリニューアルを敢行しました。

サービスURL

https://annictaccessv3.netlify.com/

動作イメージ

今回の機能改善点

「アニメ選択」画面の実装

ランキングに追加中の番組の強調
年を指定して番組一覧を表示

以前のバージョンでは全体から上位30位までを固定で抜き出してそれをソートする形でした。

今回苦労したこと

画像取得に制限がある問題

取得数を制限する
→外部APIを探す
→herokuにキャッシュさせる処理を書く

    if(isExistFile('./public/'+req.params.url +'.jpg')){
      res.sendfile('./public/'+req.params.url +'.jpg');
    }
    try {
    client.get('users/show',{screen_name: req.params.url},
        async(error, tweets, response)=>{
            if(error) return Promise.reject(error);
            console.log(response.statusCode)
            if(response.statusCode===200){
                  var json = JSON.parse(response.toJSON().body)
                  let imageRes = await fetch(json.profile_image_url);
                  downloadFile(json.profile_image_url,'./public/'+req.params.url+'.jpg')
                  res.redirect(json.profile_image_url);
              }
          })
  } catch (error) {
    console.error(error)
  }

未実装の機能

映画版ランキングメーカー
- the movie db APIからデータを取得する準備中です。
- 日本語/英語両対応するかも？
twitterシェア機能

既知の不具合

画像が読み込めなかった場合、クリックできる範囲が狭くなる
画像取得の際にtwitterAPIの制限に引っ掛かる

今回使っている技術

ReactJS/Netlify

ReactJS...フロントエンドの画面や通信を司るjavascriptのフレームワーク
Netlify...Reactアプリなどを簡単にデプロイできるプラットフォームサービス

NodeJS/Heroku

NodeJS...サーバサイドjavascript。
Heroku...NodeJSやRailsなどサーバサイドアプリケーションをデプロイできるプラットフォームサービス

graphQL

サーバにデータを問い合わせるクエリ言語の一つ。
REST APIの後継と言われている。

 let query = gql`query {
          searchWorks(orderBy: {field: WATCHERS_COUNT, direction: DESC} seasons: ["${req.params.year}-spring","${req.params.year}-summer","${req.params.year}-autumn","${req.params.year}-winter"]) {
            edges {
              node {
                  title
                  seasonName
                  seasonYear
                  annictId
                  twitterUsername
                  watchersCount
              }
            }
          }
        }`

Elixir+PhoenixのサービスをHeroku+Dockerで動かす

2019-09-25T09:50:26+09:00

Elixir & PhoenixのサービスをDockerイメージでHerokuにデプロイした時の備忘録です。

背景として、元々GCE上で動作させていましたが、GCEのIPが有料になるかもという情報があったのでHerokuに移行することにしました。ただ、無料枠で運用している限りだとIPも有料にはならないかもということなので意味はなかったかもしれません。

ただ、もう誰も使っていないサービスでデータも少ないですし、ElixirとかNodeのようなビルドがある言語のサービスは本番サーバーでビルドするとサーバーが止まってしまうため本来行うべきではないため、気分転換にDockerでのリリース形式への変更を試してみるのには良かったかなと思いました。

ちなみにHerokuではよく使われているElixir用のBuildpackがあるため、本来はそちらを利用したほうが簡単だと思います。しかし、今回のサービスは結構バージョンが古く、ちらっと試したところ動かないようでした。何か設定がおかしかったのかもしれませんが、とにかく試行錯誤するよりは元々Linuxサーバー上で動いているものなのでDocker化してデプロイするようにした方が早くて確実そうだったのでそちらの形にしました。

環境

Elixir 1.6.0
Phoenix 1.3.0

Dockerfileをつくる

できたのがこんな感じです。

FROM elixir:1.6.0-slim

RUN apt-get update && \
    apt-get install -y dbus git curl
RUN curl -sL https://deb.nodesource.com/setup_9.x | bash -
RUN apt-get install -y nodejs inotify-tools
RUN apt-get install -y --reinstall build-essential
RUN apt-get clean && \
    rm -rf /var/lib/apt/lists/*

ENV MIX_HOME=/root/.mix MIX_ENV=prod

COPY . /app
WORKDIR /app

RUN mix local.hex --force && \
    mix local.rebar --force && \
    mix deps.get && \
    mix compile

EXPOSE 4000

CMD mix phx.server

開発もDockerで行っており、本番もLinuxでデプロイ方法はメモしていたのでここは特に問題ありませんでした（余分な処理は混じっているかもしれませんが）。JavaScriptのビルドもありますがこれはローカルでビルドしてそのまま使っています。今回はもう更新しないサービスのDocker化のため処理を入れていませんが、必要であればここでビルドもしておくと良いかもしれません。

細かい部分をメモがてら解説しておきます。

MIX_HOMEを指定

環境変数としてMIX_HOMEを指定しています。

ENV MIX_HOME=/root/.mix MIX_ENV=prod

HerokuのDockerデプロイではrootユーザーではなく、その場で適当なユーザーが作られそちらで起動などのコマンドが実行されます。そのため、Dockerイメージビルド時にhexやrebarを追加した時にrootのディレクトリにインストールされたものが認識されず、サーバー起動コマンド実行時にまたインストール＆ビルドが行われてしまいます。すると時間が経ちすぎてデプロイに失敗します。そのためイメージビルド時に処理したものを正常に認識させるため、MIX_HOMEを指定しています。

dockerfile内でユーザーの作成＆指定も可能ですが、これは無効となります。

EXPOSEは不要

EXPOSE 4000を書いていますがこれは不要です。後述しますが、デプロイ時にPORTの環境変数が渡されるため、そちらでサーバーを起動するようにPhoenix側で設定する必要があります。

Phoenixの設定

config/prod.exsを設定します。元々のサーバーの設定から変えたところはとりあえずこんな感じになりました。

config :profile, ProfileWeb.Endpoint,
  load_from_system_env: false,
  url: [host: System.get_env("APP_HOST"), scheme: "https", port: 443],
  http: [port: System.get_env("PORT")],
  cache_static_manifest: "priv/static/cache_manifest.json"

config :profile, Profile.Repo,
  adapter: Ecto.Adapters.MySQL,
  username: System.get_env("DB_USERNAME"),
  password: System.get_env("DB_PASSWORD"),
  database: System.get_env("DB_DATABASE"),
  hostname: System.get_env("DB_HOST"),
  charset: "utf8mb4",
  ssl: true,
  pool_size: 5

環境変数を使う形にする

下記のように、可能な限り環境変数を使う形にします。

  username: System.get_env("DB_USERNAME"),
  password: System.get_env("DB_PASSWORD"),
  database: System.get_env("DB_DATABASE"),
  hostname: System.get_env("DB_HOST"),

今はどうか知りませんが、Phoenixのプロジェクトを初期化するとprod.secret.exsを作ってそれがprod.exsから読み込まれることで本番の設定をする、という形になっていましたのでついついその形でやってしまいがちかもしれませんが、Herokuなどで利用することを考えると全部環境変数を利用する形にしておく必要がありますし、そもそも設定も環境毎で別にする必要もなくなるため環境変数を利用する方がシンプルだと思います。

DBのpool_sizeを減らす

  pool_size: 5

Herokuの無料DBはいくつか種類があります。今回はJawsDBを使っていますが、どれにしろ最大接続数が決まっていますので、それより低くpool_sizeを設定しておかないと接続エラーで起動できなくなります。各DBの仕様を見て最大数よりもちょっと少なめにしておきましょう。

ポートの設定

前述したとおり、ポート番号は環境変数で指定されるため、それでListenする必要があります。そのため下記のように指定します。

  http: [port: System.get_env("PORT")],

URLの設定

通常は不要かもしれませんがURLの設定もしています。

  url: [host: System.get_env("APP_HOST"), scheme: "https", port: 443],

OGPを利用しているため、Routerのヘルパーで正しい完全なURLをテンプレート上に出力する必要がありました。正しく設定をしないとhttp://localhost:11242みたいなURLが出力されてしまうため、上記のような設定を追加しています。port: 443は不要かなと思いましたが、設定しておくとURLのポート表記を消すことができます。

デプロイ

諸々の設定ができたらデプロイします。これはHerokuのダッシュボードのDeployページで全部確認できますので細かくは書きませんが、とりあえず

heroku container:push web

で手元のDockerfileのイメージがビルド＆pushされ、

heroku container:release web

でpushしたイメージでリリースされます。あとはheroku runでマイグレーションを行ったり、heroku logsでログを確認しておかしなところを解決すれば動くと思います。下記は実際に動いているものです。（絵文字が文字化けしていますが他のところでは正常に表示されているので単にここの不具合のようです。もう修正はしませんが…）

https://torima.appllis.net/users/dala00

独自ドメイン

独自ドメインは解約したかったのでついでに適当なサブドメインにURLを変更しました。ただどちらにしろ独自ドメインの設定をHeroku側で行わなければなりません。ただ、どうもHerokuでの独自ドメインは有料プランでないとできないようでした。

しかし、Cloudflare経由にして無理やりSSLにすることもできるようですので、今回はそのようにしました。～～.herokuapp.comをCNAMEとしてDNSレコードを追加すればよいようです。Herokuの画面で一緒にDNS Targetというものも表示されますが、これはCloudflare経由の場合は関係ないようです。

まとめ

Buildpackがあればそれを使えば楽ですが、Dockerを使えば特殊なパッケージをインストールしたサービスも動かす事ができますので、必要に応じてHerokuのDockerデプロイを使ってみると良さそうです。CI上でビルド&pushすればGitHubにpushするだけでも可能そうです。

容量が少ないですが言語問わず無料でRDBが使えて簡単にデプロイできるのはHerokuだけだと思いますので、ユーザーやアクセスの少ない初期のサービスなどはやっぱりここが良さげだなと感じました。

短歌投稿サイト「ちるなり」の技術メモ

2019-06-06T08:03:42+09:00

この記事について

「ちるなり｜短歌の投稿サイト」の技術的な話のメモです。

functionの配列を受け取ってasync.parallelする

複雑な処理になると自分でasync/awaitやPromiseをごにょごにょして書くのがつらいことがあるので、よくcaolan/asyncを使います。このなかのasync/parallelはfunctionの配列やオブジェクトを第一引数に、すべてのタスクのあとに実行するコールバックを第二引数に受け取ります。このとき、第一引数に渡されるfunctionはその第一引数としてコールバックをトリガーするfunctionを受け取るのでなければなりません。

で、そのようなfunctionの配列を任意のオブジェクトをわたして生成してasync.parallelしたかったときの実装のサンプルです。lodash/curryとかを使っています。

const express = require("express");
const async = require("async");
const _ = require("lodash");

const router = express.Router();

const admin = require("../admin/admin.js");
const refusers = admin.database.ref().child("users");  // firebaseのRealtimeDBの参照です

router.patch("/hogehoge", (req, res) => {
    const closures = _.partial(function (callback, album) {
        return _.map(req.body.patches, (patch, key) => {
            return _.curry(function (callback) {

                /*
                    何かの処理
                */

                callback(null, null);

            })(callback);
        });
    });
    function execClosures (album) {
        async.parallel(closures(_, album), (err, result) => {
            res.status(200).end();
        });
    }
    refusers.child(req.body.uid).once("value", (snapshot) => {
        if (snapshot) {
            const album = snapshot.val();
            execClosures(album);
        } else {
            res.status(500).send({ err: "No snapshot found" });
        }
    }).catch(err => {
        res.status(403).send({ err: err });
    });
});

HerokuにデプロイしたNuxt.jsのプロジェクトの静的ファイルをFirebase Hostingから配信する

静的ファイルだけvuepressで生成したページとあわせてHostingにあげます。package.jsonに以下のようなことを書きます。YOUR_TOKENの部分はfirebase-toolsのlogin:ciというコマンドであらかじめ取得しておいたトークンに読み替えてください。

  "scripts": {
    "dev": "cross-env NODE_ENV=\"development\" nodemon server/index.js --watch server",
    "build": "cross-env NODE_ENV=\"production\" nuxt build",
    "start": "cross-env NODE_ENV=\"production\" forever --killSignal=SIGTERM -c 'nodemon --exitcrash' server/index.js",
    "inspect": "cross-env NODE_ENV=\"development\" node --require dotenv/config --optimize_for_size --max_old_space_size=920 --gc_interval=100 --inspect server/index.js",
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs",
    "deploy:nuxt": "rimraf docs/.vuepress/dist/nuxt && mkdirp docs/.vuepress/dist/nuxt && cpy .nuxt/dist docs/.vuepress/dist/nuxt",
    "deploy:static": "rimraf docs/.vuepress/dist/static && mkdirp docs/.vuepress/dist/static && cpy static/contents docs/.vuepress/dist/static",
    "deploy:hosting": "firebase deploy --token 'YOUR_TOKEN' --except functions",
    "deploy:functions": "firebase deploy --only functions",
    "heroku-postbuild": "yarn build && yarn run docs:build && yarn run deploy:nuxt && yarn run deploy:static && yarn run deploy:hosting"
  },
  "devDependencies": {
    "cpy-cli": "^2.0.0",
    "cross-env": "^5.2.0",
    "dotenv": "^7.0.0",
    "firebase-tools": "^6.5.3",
    "forever": "^1.0.0",
    "mkdirp": "^0.5.1",
    "nodemon": "^1.18.10",
    "rimraf": "^2.6.3",
    "vuepress": "^1.0.0-alpha.47"
  }

nuxt.config.jsでアセットをFirebase Hostingから取得するように設定します。ローカルで開発しているときには手元のファイルを参照したいので、production時のみにしましょう。

const isdev = (process.env.NODE_ENV === "development")

module.exports = {
    // buildのところだけ抜粋
    build: {
        publicPath: isdev ? "/_nuxt/" : "https://your_project_name.firebaseapp.com/nuxt",
    }
}

firebase.jsonのhostingの設定をします。ヘッダーを設定しないとクロスオリジン制約で配信できなくなるので、ここで必ず設定します。

  "hosting": {
    "public": "docs/.vuepress/dist",
    "ignore": [
      "firebase.json",
    ],
    "headers": [
      {
        "source" : "**/assets/**",
        "headers" : [{
          "key" : "Access-Control-Allow-Origin",
          "value" : "*"
        }]
        }, {
        "source" : "**/nuxt/**",
        "headers" : [{
          "key" : "Access-Control-Allow-Origin",
          "value" : "*"
        }]
        }, {
        "source" : "**/static/**",
        "headers" : [{
          "key" : "Access-Control-Allow-Origin",
          "value" : "*"
        }]
    }],
    "cleanUrls": true,
    "trailingSlash": false
  },

JobLvマネージャーをリリースした話

2019-04-21T22:51:18+09:00

作ったサイトの紹介

今回作ったサイトは、こちら。
　「JobLvマネージャー」です。

自分のJob（職業）を管理、LvUpをしながら、
Twitterと連携（現時点では、名前変更）することが出来ます。

作ろうと思ったキッカケ

Twitterで繋がったユーザーさんが、名前の後ろに「〇〇Lv1」みたいなのをつけているのを見て思いつきました。
いつの間にか、こっそりLvアップしていたり、新しいものに変わっていたり。
そういう遊び心に興味が湧いて、この仕組みをもっと簡単に、管理や変更ができるようにしたサービスを作ってみたいと思ったのが始まりです。

ストックすることの大切さと、一歩踏み出す大切さ

これをタイトルした理由は、本システム、３日（時間だと８時間）で作りました。
内容からして、これが早いのかわかりませんが、これだけの時間でサービスリリースまでいけたのは、

Railsのおかげ
素材サイト様のおかげ
API(Twitter)のおかげ
今まで色々プロダクトを作ったおかげ（機能のより集め（コピペ））

Railsを使うと、簡単のWebシステムが作れます。
いろんなGemが用意されています。
規約にそえば、簡単に作れます。

素材サイト様、画像にアイコンにフォントまで、いろんなものが無料で使えます。
いつもありがとうございます！

API使えば、別のシステムの機能を自分のもののように使えます。どんどん使いましょう！

新しいもの、面白そうなものがあったら、とりあえず触ってみましょう！
形にならなくても問題ありません。いつか使える時が来ます。ストックしておきましょう。
最新の技術だからと追いかけて、サービスリリースする必要も無いと思います。
触ってみてストックする事が大事。

誰でも新卒年収800万宣言できる、Twitter就活サービス「Negomo（ネゴモ）」をリリースした。【個人開発】

2019-04-09T22:21:31+09:00

「Twitter就活の促進」をテーマにしたサービス「Negomo（ネゴモ）」をリリースしました！

自分が欲しい報酬額をツイートしてTwitter就活できるサービス「Negomo(ネゴモ)」を作ってみました！下のような画像がツイートできます。Twitterアカウントで利用できるのでぜひ使ってみてください！https://t.co/JRXFe8lHov #Negomo #RT拡散お願いします
— TaKO8Ki (@takoyaki3160) April 7, 2019

Twitterアカウントで利用できるので、もしよかったら使ってみてください！

リリースしたサービス

Negomo（ネゴモ） - もっとTwitter就活しよう！

サービスの概要

「Negomo（リンク）」は、自分が欲しい報酬額をツイートしてTwitter就活できるサービスです。

何か技術を身につけている人が、Twitterで欲しい報酬額（時給・年収）を積極的にアピールすることで、適切な報酬をもらえることを理想としています！
もちろん、エンジニア以外の方も大歓迎です！

こんな感じのツイートができます。

京都でWEB系のインターン探してます！！ https://t.co/JRXFe8lHov #Negomo #Twitter就活
— TaKO8Ki (@takoyaki3160) April 7, 2019

参考：Negomo（ネゴモ）とは

追記

単位で「兆」を選ぶことができるようになりました！
時給・月収・年収によって画像の色を変えたほうが見やすいというアドバイスをいただいたので、そのように仕様を変更しました！
既に画像を作成されている場合は、金額を変えて編集していただくと色が変わります。

デザイン

デザインはSpeakerDeckを参考にしました！

トップページ

画像作成ページ

アピールポイントのフォームの高さは可変的になっていて、コンパクトになるように心がけました。また、ポートフォリオなどのURLが入力された場合は、自動的にリンクに変換されるようになっています。

画像表示ページ

作成した画像をクリックすることでツイートできるようになっています。
アピールポイントの欄では、どれがリンクでどれが普通の文字列なのか分かりやすくするようにしました。

使用した技術

Ruby・Ruby on Rails
- IMGKit（HTMLから画像をレンダリングできるgem）
- google-analytics-rails（google analyticsが簡単に導入できるgem）
- activestorage-cloudinary-service（Active StorageとCloudinaryを繋げるgem）
JavaScript・jQuery
Cloudinary
画像を保存するストレージです。Herokuのアドオンとして利用できるので非常やりやすかったです。Active Storageと連携させて利用しています。
Git・GitHub
Postgresql
Heroku
今の所Hobbyプランを利用しています。
build pack
画像を作る部分の実装で利用しました。
アイコン
アイコンは、相変わらずフリー画像にお世話になってます。

苦労した点

今回苦労したのは、画像生成の部分です。
コードとしては下のような感じで、 HTMLから画像をレンダリングするwkhtmltoimageをRailsで利用できるようになるgem、IMGKitを利用しています。
ローカルでは比較的簡単に動かすことができましたが、Heroku上で動かすのに少し時間がかかりました。
最終的に、build packを使うのが一番良さそうだと分かったので、元からあったbuild packのレポジトリをforkして少し自分用にカスタマイズして使いました。

wkhtmltoimageをHerokuで使うためのbuild packカスタマイズ版

画像作成部分のコード

```ruby def create_image Tempfile.create(["#{@profile.id}", '.png'], :encoding => 'ascii-8bit') do | file | file.write(IMGKit.new(get_html, quality: 20, width: 800).to_png) file.rewind @profile.image.attach(io: file, filename: "q_#{@profile.id}.png", content_type: "image/png") end end def get_html <<~HTML

#{@profile.adjust_money_style}
#{@profile.title}

#{}

#{assets_image_tag('negomo.png').html_safe}

HTML end ```

リリースする上で心がけたこと

アイデアを形にするスピード

少しずつWEBサービスを作ることにも慣れてきたので、自分が思いついたアイデアを形にするスピードを意識するようにしました。それでも、このサービスを作るのに１週間ほど費やしてしまったので、まだまだだなと感じます。

ユーザーにとって分かりやすいサービスかどうか

今までも「ユーザーにとって分かりやすいサービス作り」を意識するようにはしてきましたが、イマイチ分かりやすさを追求できていないように感じていました。特に、非エンジニアの人に使ってもらうとなると非常に難しいと感じます。
そのため、今回は、大まかに言えば「画像をツイートできるだけのサービス」というシンプルな設計にしました。

最後に

タイトルに「誰でも新卒年収800万宣言できる」と書きましたが、最近、コミさんという技術的に強い方が新卒年収800万円芸なるものを行なって、話題になっているのを1フォロワーとして眺めていました。エンジニアだけでなく、他の分野にもコミさんのように優れた人材はたくさん居られると思うので、その方達がTwitterなどを利用して、しっかりといい待遇を受けられるようになればいいなと思います。
僕もその方達に加われるように頑張っていきます!
また、このサービスをきっかけに、もっとTwitter就活が当たり前になれば嬉しいです。

ここまで読んでいただきありがとうございました！

もしよろしければ、いいねボタンを押していただけたら嬉しいです！

Negomo、ぜひ使ってみてください！！

Negomo（ネゴモ） - もっとTwitter就活しよう！

参考

これまで作ったものまとめ

2018-12-28T18:23:36+09:00

開発継続中

アニメ視聴遅れ管理サービス

リンク

アニメ視聴管理サービス「Annict」が提供している外部APIを使ったWEBサービス。視聴状況の遅れなどを可視化したもの。

開発・保守期間： 2016.11～
- サーバサイド：Java → NodeJS
- フロントエンド：AngularJS → ReactJS
- Heroku
- Netlify
- OAuth(twitter/annict API)
- DBなし

カラオケ機種間横断検索サービス

リンク

開発・保守期間： 2018.11～
言語
- ReactJS
- NodeJS
- SQLite3
- Heroku

野球リーグスコア管理システム ver 2

リンク

開発・保守期間： 2018.07～
言語
- NodeJS
- ReactJS
- MySQL
- Netlify

カラオケ成績管理ツール

開発・保守期間： 2018.07～
言語
- ReactJS
- Chart.js

slack流量計 ver 2

slack流量計をバージョンアップしました。

開発・保守期間： 2018.11～
言語
- NodeJS
- chart.js
- puppeteer
- MySQL

Amazon Alexaスキル

開発・保守期間： 2018.12～
言語
- NodeJS
- Heroku

開発終了

DAMランキングバトル・月別成績推移表出力ツール

DAMランキングバトル成績取得ツール「らんばと君」の一ヶ月ごとの出力データを元に得点・順位の推移をHTML化するプログラム。

開発・保守期間： 2006.07～2013.07(開発終了)
- バグ修正
- ユーザサポート
- 機能追加
言語：
- Hot Soup Processor 3
- javascript
- HTML

DAM精密採点・成績集計ツール

精密採点の結果をHTML/XMLから取得してHTML化するプログラム。
HSPではDOMやHTMLパーサーなどが使えなかったので文字列探索の力
技でテキスト解析を行っていた。
現在は代替となるWEBサービスが存在するので開発終了。

開発・保守期間： 2006.09～2015.01(開発終了)
- バグ修正
- ユーザサポート
- 機能追加
言語
- Hot Soup Processor 3
- javascript
- HTML
- Google Chart API

野球リーグスコア管理システム

趣味で行っている野球のリーグスコア管理システムを製作。
アドベントカレンダーに記事を書いたのでそちらを参照のこと。

開発・保守期間： 2015.06～2018.12(開発終了)
- DB設計(改修後14テーブル)
- 基本設計
- 実装
- 運用・改修

読書管理アプリデータ移行サービス

読書管理アプリから別の読書管理アプリにデータ(CSV)を抽出するWEBアプリ。

開発・保守期間： 2016.12～2018.02(開発終了)
言語
- Java
- Seasar2
- REST
- DBなし

カラオケ全国採点データ閲覧システム

開発・保守期間： 2017.02～2017.04(開発終了)
- DB設計(4テーブル)
- 基本設計
- 実装(APサーバ/DBサーバ)
- DBチューニング
言語
- Java
- Seasar2
- REST
- MySQL

画像判別アプリ

画像をTensorFlowを用いて機械学習で5つのクラスに分類し、twitterのリプライに添付された画像がどのクラスに分類されるかを判定するプログラム。

開発・保守期間： 2017.05～2017.05(開発終了)
言語
- Python 3.5
- tweepy
- OpenCV3

「精密集計」複数アカウント統合ツール

カラオケ成績集計サービス「精密集計」のデータをCSVでインポートし、
JSONでエクスポートするWEBアプリ。

開発・保守期間： 2017.09～
言語
- Java
- Seasar2
- AngularJS
- MySQL

GoogleHomeにしゃべらせるアプリ

Google-Home-NotifierやTTS APIを使わない実装

開発・保守期間： 2018.03
言語
- NodeJS

slack流量計

開発・保守期間： 2018.04～2018.12
言語
- Java
- Spring MVC
- MySQL

ニュースをランダムにガチャで読める「ガチャっとニュース」を4時間でリリースした話【個人開発】

2018-12-01T14:27:52+09:00

じぇいです！こんにちは。

ニュースをガチャすることで、ニュースをランダムに読める「ガチャっとニュース」をリリースしました！

https://gachat-news.herokuapp.com/

【拡散希望】ニュースをランダムにガチャして見れる「ガチャっとニュース」をリリースしました㊗️情報の偏りが問題になるこの世の中でランダムにニュースを見れたなら、偏りも減るのでは？と思って作りました楽しめるようにガチャ風にニュースが出るようになってますhttps://t.co/95AlF0d9Tr
— じぇい👨‍💻 (@jyouj__) November 29, 2018

ぜひいろんな人に触ってもらいたいのでリツイートしてもらえると泣いて喜びます:stuck_out_tongue_closed_eyes:

作った背景

上のツイートにも書いてあるように、情報の偏りを無くそうと思いました。ただランダムにニュースを閲覧できるようにしても面白くないので、ガチャというエンターテイメント性を入れました。

ガチャしてニュースを読むという新たなアプローチ方法です！

製作期間

水曜日3時間、木曜日1時間の計4時間で完成させました。

水曜日にメインの機能であるNewsAPIでニュースをランダムで取得するコードや大まかなサイトのレイアウトを作成しました。

木曜日はTwiiterでシェアされる画像の設定や細かいレイアウトを作成しました。

ガチャっとニュースってどんなサービス？

「ガチャっと」というボタンを押すとランダムでニュースが一つガチャされます。

1ページで完結している、シンプルなサービスです。

もちろんスマホ対応してます。

使ったもの

Django
- 使い慣れているから、サクッとできる
- Flaskとかでもよかったかも
Bulma
- 1ページだけだけどレイアウトはそれなりには整えたかった
- サクッとCSS適用できて便利
- モーダルウィンドウやボタン、画像サイズの部分で活躍しました
jQuery
- モーダルウィンドウの表示の部分で活用しました
- 小さな機能ならjQueryで十分
News API
- 国別、カテゴリー別など様々なニュースを取得できるAPI
- newsapi-pythonというパッケージがあってよかった
- 最新のニュースを常に取得できるのもいい！

NewsAPIについては僕自身が使い方をブログに記事書いてます(笑)

［Django］NewsAPIを使ってニュースサイトを作ってみる
 ［Django］NewsAPIを使って色々なニュースを取り出してみよう

Github
- 使わない選択肢がなかった
Heroku
- とりあえず無料のを使った
- サーバーの知識なくてもOKなのありがたい

最後に

今回で二つ目のサービスのリリースとなります。個人で色々開発する上のメリットは思い立ったらすぐ形にできたり、自分の気分の乗るときに作れるところだと思います。

まだまだ開発するぞ！

Qiitaにいいねくれたら舞って喜びます:sunglasses:

お読みいただきありがとうございました！

Web未経験から100日でリリース！「お笑いライブの検索サイト」をつくりました【個人開発】

2018-11-14T03:32:24+09:00

こんにちは、かしい（@rubys8arks）と申します。
SIerで働いていましたが、WEB業界への転職を目指しプログラミングの勉強を始めました。
データベースなどの知識は少しあったものの、Webアプリケーションの開発は今回が完全に初めてです!

作ったもの

お笑いライブの検索サイトです。日付やキーワードで東京近郊のお笑いライブを横断検索できます。
- ワラリー! - お笑いライブ検索(東京)

🎊Web系未経験の初心者が100日間で初めてのrailsサービスをリリース🎊👉https://t.co/qL6fAtOi5i首都圏のお笑いライブを日付やキーワードで横断検索できるサービスです！・5秒で使えるTwitterログイン・わかりやすいUI・13サイトからデータを毎日スクレイピングよかったら見てください〜✨ pic.twitter.com/7js7F9Bs8p
— かしい@お笑いSNSつくった (@rubys8arks) 11 novembre 2018

データはプレイガイドや劇場のサイトから自動でスクレイピングするほか、誰でもライブ情報を登録できるようになっています。

* ビジモ図鑑で配布されているキットをお借りしました。

サービスを作ったきっかけ

もともと「Walive!」というお笑いライブの検索サイトがあったのですが、そのサイトが2017年9月で突然閉鎖してしまったことがきっかけです。
せっかくお笑いファンの間で愛されているサイトだったのにもったいないなと思い、同じ機能(+α)を持った新しいサイトを作ろうと考えました。

どういう技術で動いてるか

初心者なのであまり凝った技術は使っていません！

バックエンド

Ruby on Rails

webスクレイピング用にMechanizeのgemを使ってます。サービス層は悪！と言われてることもあるのですが、コントローラーやモデルが見やすくなるのでサービス層、ヘルパー層も使いました。

サーバー

Heroku

手軽にデプロイできるHerokuのサーバーを使っています。
アクセスできない時間ができるのが嫌だったので、Herokuの有料プランにしています。
- Hobby Dyno $7/月 (システムダウンタイムなし、独自ドメインのかんたん設定）
- Heroku Postgres Premium ＄9/月(1000万行まで保存できる)

Herokuの有料プランは使わずにもっと安くする方法もあるみたいなんですが、一旦は設定のしやすさを優先しています。

フロントエンド

JQuery

さんざん「JQueryはオワコン」と言われていますが、ぐぐったときに出てくる情報が多いので一旦JQueryで実装しました。
日付の選択をカレンダ(flatpickr)で行えるようにしたり、アンケート結果をアコーディオンでぬるっと表示させたりしています。

fontawesome

みんな大好きfontawesomeです。
フォームのplaceholderにも使っています。

こだわったこと

UIとデザイン

「とにかく人に使ってほしい」という思いからUIとデザイン（特にライブの入力フォーム回り）にこだわりました。
実際にサービスへの反応も「デザインがいい！」というものが多く、ありがたい限りです。
CSSのフレームワークは使わず、TumblrのEstenテーマ、Twitter、InstagramなどのSNSを参考にしました。

URLを貼り付けたらogp情報を取ってライブの説明や出演者、画像などを自動入力できるように
会場をセレクトボックスで選択できるようにしつつ、自由入力欄も作ったり
フォーム数が多くなると入力したくなくなるので、重要でない項目はモーダルで分けたり

自分にとってはだいぶ使いやすくなったのですが、フォームはまだまだ改善の余地があるなと思っています。

SNSログイン

お笑いファンはだいたいTwitterで情報収集しているので、既にアカウントを持っているであろうTwitterアカウントで登録・ログインできるようにしました。
知らないサービスにいきなり「メールアドレスで登録できます！」と言われてもユーザー登録しないなと思ったので、SNS連携としました。

いいね機能

旧サイト「Walive!」にはなかった機能として、ライブへのいいね機能を2種類実装しました。
ライブに行く人あるあるとして、自分のスケジュールを把握できずに同じ日の同じ時間帯のライブ(いわゆる『被り』)のチケットを間違えて買っちゃったりします。
そういうのを防止したいなと思い、すでにチケットを買った・予約したライブは『絶対いく』、まだ買ってないけど行けたら行きたいライブは『気になる』で管理できるようにしました。

Webサービスをつくってみた感想

最初の1ヶ月はプログラミングスクールでhtml/cssとruby/Ruby on Railsを学んだのですが、スタッフの「1ヶ月ですぐ作れるよ！」という甘い声をうのみにして痛い目にあいました…。
スクールを終えた知識で作ってみても「え、いいねボタン自動で切り替わらないの？(JQueryが必要)」、「孫モデルまでアソシエーションしてデータ取るのどうやるの？」などなどわからないことだらけ。
最初の頃、家で同じエラーに1週間くらいわんわん言ってた私に「macbookを買え、もくもく会に行け」と言いたいです。
Twitter、Slack、もくもく会などでド初心者の質問に親切に答えてくださった皆さん、本当にありがとうございました！！

エンジニアの方にはあまりお笑いライブに馴染みはないかもしれませんが、せっかく作ったのでちら見してもらえれば幸いです。
出演者ですぐ探せるので、「こないだテレビで見た芸人面白かったな」というときはぜひ使ってみてください！

ワラリー! - お笑いライブ検索(東京)

【個人開発】リレー式小説投稿サービス"Hundread"をリリースしました！

2018-11-03T22:40:22+09:00

じぇい(@jyouj__)です！

一週間ちょっとでリレー式小説投稿サービス"Hundread(ハンドレッド)"をリリースしました！

このサービスはもともと6月に行われたStartup Weekend Okayamaにて発表し、優勝したものです。

その後、別のサービスの開発で全然作れていなかったのですが、急に作りたくなってきてデザインを考え直し、急遽一週間ちょっとで作りリリースすることができました！

リレー式小説サービス"Hundread"をリリースしました！！Hundreadは自分が投稿した小説をツイッターにシェアして続きを他の人に書いてもらうことができます！もちろん、他の人の小説の続きを書くこともできちゃいます！ぜひ、使って拡散してください！https://t.co/qEbytWUukM
— じぇい👨‍💻Punizm作ってます (@jyouj__) October 31, 2018

個人開発ではあるものの、様々な方にDMでわからないことを教えていただき無事リリースしました。本当にありがとうございます。