C++/Vue.js/Webpack/FireBaseで自作のナレッジベースを作った。

C++/Vue.js/Webpack/FireBaseで自作のナレッジベースを作ってみた。

 

github.com

 

バックエンドをcpp-httplibを使ってる。

 

github.com

 

といってもC++側での処理は、assetsディレクトリ以下のindex.htmlを展開させるようにルーティングしてるだけ。

なので、C++のコード自体は非常に短い。

 

で、フロントエンドを最近はまってるVue.jsで書いた。

github.com

 

assets以下にwebpack.config.jsとpackage.jsonを作成してyarn経由でライブラリを追加してコーディングしていった。

おおよその手順は、こちらでまとめたものと同じ。

qiita.com

 

ただ、上記の記事で使ったLunaってWebフレームワークと違い、cpp-httplibはSPA風にルーティングを処理させるのができなかった(ほんとはできるかもしれない・・・・・・)

 

なので、Bootstrapのtabsを使い、タブで画面切り替えを実装。

getbootstrap.com

 

最後に、ナレッジを保存するDBとかの処理をどうしようかと考えてたんだけど

firebase.google.com

そういや、FireBase使ったことないなと思い、FireBaseでやってみた。

 

キーとかをソースに直接書きたくなかったのでdotenv-webpackを使い、環境変数で処理。

github.com

 

あとは、assets/components/web/tabs/index.vueでFireBaseのキーを使う。

github.com

 

残りのフロント周りのデザインとかはBootstrapでよしなにさせた。

 

 

 

今後はPWA対応とかを勧めていこうかと思う

Creatodonを運用しているさくらのクラウドのリージョンを変更した話

はじめに

 

2018年9月6日未明、北海道で地震が起きたのが今回の事の発端。

www.sankei.com

 

僕が管理人をしているMasotodonインスタンス「Creatodon」はさくらのクラウドの石狩データセンターをお借りして運用していた。

 

その石狩データセンターも今回の地震で被災し、データセンター内での自家発電などでとりあえず事なきを得ていると聞いた。

一応、石狩データセンターでの自家発電では電力は48時間は持つとのこと。

 

とりあえず、地震のニュースとさくらインターネットからの障害情報などを聞き、「いざとなれば別のクラウドへの移行をするべきか」と検討してた。

 

そんな時、下記の記事が見つかり、東京のデータセンターへと移行できるかもしれないと分かった。

qiita.com

 

これはその時の手順をまとめたもの。

 

実際の手順

アーカイブの作成

まず、さくらのクラウドへとログイン。

cloud.sakura.ad.jp

 

コントロールパネルから「さくらのクラウド」を選択し、「石狩第2ゾーン」を開く。

左のタブに「ストレージ」という項目があり、その中に「アーカイブ」という項目があるので、それをクリックする。

 

画面右上の「追加」をクリックし、アーカイブを作成する。

このとき「アーカイブソース」は「ディスク」を選び、現在使用しているディスクを選択する。

あとは、「作成」ボタンを押してアーカイブが作成されるのを待つ。

 

②リージョンを超えてアーカイブを移動

次に、「東京第1ゾーン」へとリージョンを切り替える。

その後、再び「ストレージ/アーカイブ」をクリック。画面右上の「追加」を同様に押す。

 

アーカイブソース」は「アーカイブ」を選択し、「石狩第2ゾーン」にチェックを入れる。

先ほど作成したアーカイブが表示されるので、それを選択肢、「作成」を押してアーカイブを作成。

 

③移行したアーカイブからディスクを作成

「ストレージ」内の「ディスク」を選択。

画面右上のの「追加」をクリックし、「ディスクソース」の項目で「マイアーカイブ」を選択。先ほど先ほど東京リージョンで作成したアーカイブを選んで、「作成」を押す。

これでリージョンを超えて、Masotodonインスタンスのデータなどを移行できた。

 

④サーバの設定

次に、東京リージョンで使用するサーバを作成する。

 

「サーバ」をクリックし、画面右上の「追加」を選択。

マイディスクというタブがあるのでそれを選び、先ほど作成したディスクを選び、「サーバプラン」「ディスクプラン」「ホスト名」を設定する。

あとは、「作成」を押してサーバが作成されるのを待つ。

 

⑤サーバのIPなどの設定

このままだと以前のリージョンでのIPアドレスなどのままでアクセスできない。

なのでIPアドレスなどを変更していく。

 

さくらのクラウドの場合、DNSの設定はリージョンをまたいで適用されているのでドメインDNS設定はそのままでいい。

 

変更するのはサーバ内のNIC設定とDNSゾーンくらい

 

まず、「グローバル」内の「DNS」を選択する。

すると現在使っているインスタンスドメインが表示されていると思う。

 

「リリースレコード」というタブがあるので、それを選択。

以下のように表示されているので

<IPアドレス>

10 <ドメイン>

v=spf1 +ip4:<IPアドレス> -all

IPアドレスの部分を先ほど東京リージョンで作成したサーバのIPアドレスに書き換える。

ちなみにIPアドレスは「サーバ」をクリックした後に表示される一覧画面の「インターフェース」という項目の下にある

 

書き換えた後は、画面右上の「反映」を押す。

これでさくらのクラウドの側でのIPの変更は完了。

 

次に、サーバ内のNICを編集する。

SSHでも「コンソール」からでもいいのでサーバへとログインする。

 

で、以下のコマンドを実行してNICを編集する

sudo vi /etc/sysconfig/network-scripts/ifcfg-eth0 

こんな感じで編集して保存すればOK

GATEWAY=11.42.231.1

DNS2=11.42.0.4

DNS1=11.42.0.3

IPADDR=11.42.231.50

IPアドレスが11.42.231.50の場合だとこんな感じ

これを保存して、サーバを再起動すれば元々のドメインインスタンスにログインできる。

 

おわりに

今後のさくらインターネットさんの対応にもよるけど、できるだけ現状を維持したいって人はこの手順でリージョンを移行すればいいと思う。

 

かわりに結構時間かかるので、待機状態とかがたまると思うのでそこは注意されたし

 

参考

qiita.com

 

cloudrop.jp

 

 

OSのアップデートかけたら画像が投稿できなくなった話

さくらのクラウドでサーバを借りてCreatodonというMastodonインスタンスを運営しています。

gamelinks007.net

 

で、OSのアップデートをかけたら画像が投稿できなくなり、500エラーを吐いてた。

 

以前も、specter対策でOSのアップデートかけたときに同じ症状が出ていたので

sudo chown -R mastodon /var/lib/nginx 

 で投稿できるようにしておいたのを思い出し、パパっと直した。

 

どうもOSのアップデート時にパーミッションが変更されていたため画像が投稿できなくなっていた模様。

 

以下、参考記事

ymf.sblo.jp

qiita.com

 

Mastodonをシェルスクリプト一発で設置できるようにした

表題通り、Mastodonシェルスクリプト一発で構築できるようにしてみた。

 

ちなみに、これになる

github.com

 

使い方は簡単で、gitでcloneした後に、以下のコマンドを実行するだけ

sh mastodon.sh <Mastodonで使うドメイン

 

あとは、のんびり紅茶でも飲みながら待つだけ。

 

途中、手動でコマンドを実行する必要がまだあるので注意

その辺はreadmeにまとめておいたので参照されたし

github.com

 

 

Railsで今昔写真の管理アプリを作った

はじめに

先日、江津市のゲストハウスで開催されたハッカソンに参加してきた。

iwami-ict.doorkeeper.jp

 

今昔写真というアプリのローカライズを行うハッカソンで、今昔写真自体はカヤックというところが開発しているソフトウェアになる。

www.kayac.com

kamacon.com

 

で、ハッカソンではAndroid向けのローカライズをやることに。

でも、トラブルが発生してAndroid版のローカライズができなくなってちゃった。

 

ペアを組んでいたエンジニアさんと「どうしましょうか?」と話してて、

「じゃあ、Railsで写真をアップロードする機能つくる?」となり、Railsで今昔写真の管理アプリを作ることになった。

 

この記事は、今昔写真の管理アプリをRailsで作ったときの備忘録。

 

開発環境

で、本番環境にはHerokuを使った。

 

やったこと

とりあえず、rails g scaffold

まずは、rails g scaffoldでひな型を作成。

scaffoldのいいところは基本的な処理を自動で作成してくれるので、抜けがなく作ることができるところ。

 

もちろん、作るにあたって不要そうなものとかも自動生成されるけどね。

 

今回のハッカソンにおいては時間との勝負だったので、scaffoldを使ってひな型をパパっと作った。

 

serviceworkerでのPWA化

今回作成した管理アプリは高校生の皆さんが使用されるとのことだったので、スマホでの使用も視野に入れてPWA(プログレッシブウェブアプリ)にしてみた。

 

簡単に言うとWebアプリケーションをスマートフォンのネイティブアプリみたいにして使えるようにするもの

 

ハッカソンに参加する前にFoodsCheckerのPWA化をしてたので、僕の書いた記事の通りにやってパパっと実装したね

  

gamelinks007.hatenablog.com

 

exifrでの写真の諸情報取得

今昔写真では位置情報を使うので、画像データから位置情報などを取得する必要があった。

 

で、なんぞ良いのないかなぁと探していたらexifrというものを見つけた

github.com

 

exifrという写真に格納されている位置情報などををRubyから叩けるというgem。

 

これを使って写真をアップロードする前にメタデータを取得して、位置情報や撮影日時などをサーバへと送信した。

 

少しフォーマットの成型に手間取ったけど、exifrのおかげで無事に位置情報などを送信することができた。

 

gmaps4railsでのGoogleMap表示

位置情報などを送信できても、どこの写真なのかがわからないと考えたので管理アプリ上にGoogleMapで場所を表示できるようにした。

 

gemとして配布されているgmaps4railsを使って、GoogleMapでの表示を実装した。

github.com

 

実装にあたっては下記の記事を参考にさせていただきました。

 

qiita.com

 

Bootstrapの適用

最初は、gemのBootstrapを使って素直に実装したんだけど、いかんせんjqueryなどの依存関係がうまくいかなかった。

 

で、UmiというBootStrapのテンプレートとかも使ってみたんだけどやはりうまくいかず……

ysakasin.github.io

 

で、何かいい方法はないかなぁと考えていたところUmiがnpmに対応したことを知ったんだよね

これはいけるかもしれないと思ったね

 

Railsではyarnを使うことでJavaScript関係のパッケージを簡単に追加することができる。

で、試したらBootstrapもyarn経由でインストールできた。

ついでにJqueryとかもyarn経由でインストールしておいた

 

詳しくはこちらの記事を見てほしい

gamelinks007.hatenablog.com

 

とりあえず、これでBootstrapがちゃんと機能するようになった(あと、本番環境にデプロイする前にassets:precompileしたものをコミットしてデプロイする必要があったね)

 

Deviseでのログイン機能

Railsではおなじみのログイン機能周りのgemであるDeviseを使った。

 

この辺は下記の記事が参考になるのでそこを参照されたし

qiita.com

 

kaminariによるページネーション

Rubyコミッター/Railsコミッターな松田さんが作られているページネーションgem

github.com

 

個人的に使いやすい&よく使っているのでこれを使わせていただいた。

 

実装にあたっては下記の記事を参考にした

qiita.com

 

で、一個だけ問題があった。

 

通常のkaminariを使ってのページネーションの場合、特に意識する必要はないんだけども

今回の場合、サーバからデータをAPIを通じて受け取ってる。

 

そのため実際に受け取ったデータが、kaminariで通常処理する型とは異なっててエラーになった。

 

で、型を確認するとArrayだったのでKaminari.paginate_arrayを使って get kotonaki(事なきを得た)

 

ActiveAdminでの管理画面作成

で、最後に管理アプリ自体のダッシュボードを作る必要があった。

使ったgemはActiveAdmin。

github.com

 

導入に関しては下記の記事を参考にさせていただいた

qiita.com

 

で、簡単なダッシュボードの作成はかなり楽に終わったんだけども、一つ問題があった。

 

ActiveAdminでは基本的にRails側でModelとして処理しているデータを取り扱う。

今回のような外部のサーバにデータがある場合、ActiveAdminからそのまま編集・削除を行うことができない。

 

で、いったんユーザーのModelにadminというカラムをbooleanで作成してgot kotonakiとなった。

単純に、adminにtrueがわたっている管理ユーザーのみ削除などができるようにしたわけだ。

 

とはいえ、これでは管理のしにくさが残る。

 

というわけで、ActiveAdminにカスタマイズを加えることにした。

 

下記の記事を参考に実装した

qiita.com

 

で、既に作成済みのindexページをそのままコピペして実装。

 

通常のcontroller見たくインスタンス変数を渡せないそうなので、view内にサーバへのリクエスト処理を直書きした。

 

この辺は後々見直す必要があると思う

 

おわりに

今回の開発で初めて触るライブラリがあったのでかなりいい刺激を得た。

特にActiveAdminやexifr、gmaps4railsはほとんど触ったことがなくて戸惑うことも多かったけど、お陰で色々と新しいことが知れたのでラッキーだった。

 

今後は実稼働させながらフィードバックをもらって修正していきたいと思う。

参考資料など

 

github.com

 

gamelinks007.hatenablog.com

github.com

github.com

qiita.com

ysakasin.github.io

gamelinks007.hatenablog.com

 

qiita.com

github.com

 

qiita.com

 

github.com

qiita.com

 

qiita.com

ゲームリンクスのWebサイトにyarnでUmiを適用してみた

はじめに

ゲームリンクスのWebサイトはRuby on Rails + Herokuで運用しています。

デザイン面などはUmiという日本語をきれいに表示できるBootstrapテンプレートを使っていました。

 

で、そのUmiがnpmに対応したとのことなのでyarnを使って適用してみた。

github.com

www.npmjs.com

 

やったこと

まず、app/assets/javascriptsとapp/assets/stylesheetsの中にあるBootstrap.jsとBootstrap.cssを削除

 

次に、yarnでUmiをインストール

yarn add bootstrap-umi

 

app/assets/javascripts/application.js に下記を追加

//= require bootstrap-umi/dist/js/bootstrap

 

app/assets/stylesheets/application.cssに下記を追加

*= require bootstrap-umi/dist/css/bootstrap

 

おわりに

やったことといえばこれだけ。

まあ、元々Vue.jsを使うためにyarnをインストールしたり、webpackerを使えるようにしたりしてたので難しいことはなかった

 

参考資料

nithinbekal.com

Mastodonで使用するNode.jsをアップデートした

はじめに

いつものようにMastodonのmaster追従しようとしたら、Node.jsのバージョンが古くてアップデートした。

これはその時の備忘録

 

やったこと

最新のソースコードによれば、Mastodonで使用するNode.jsはv8未満をサポート対象外としたみたい

github.com

 

で、以下のコマンドでバージョンを確認したら 

nodejs -v

としたら 6.1.2と出たのでアップデートしなきゃいけないことが分かった。

 

 

で、まずしたことがnodenvを導入してアップデートする方法。

以下の記事を参考にnodenvをインストールしてアップデートしてみた。

qiita.com

 

すんなりとアップデートできた。

 

で、その後に

sudo yum remove nodejs

を実行して、古いバージョンを取り除いた。

 

これで一応master追従できたんだけど、実際のインスタンスの動きを見るとタイムラインの表示がおかしかった。

「・・・」という表示が出て、タイムラインの取得がうまくいっていないようだった。

 

なので古いNode.jsを再度インストールして、nodenvを一旦アンインストールした(インスタンスのタイムラインを止めないため)

 

その後、以下の記事を参考にroot側でNode.js v8.9.4をインストールした。

qiita.com

 

これで、タイムラインで発生していた問題は解決できた。

 

おわりに

Mastodonの次期バージョンでは恐らくいくつかのインスタンスでNode.jsの必要があると思う。

これがその人たちに役立てばと思うねー

 

参考資料

qiita.com

qiita.com