はじめに ポートフォリオや勉強の一環として作成したWebサービスを無料で公開したいというケースはよくあるかと思います。 少し前までならHerokuがありましたが、生憎無料で使えなくなってしまいました。そこで今回はHerokuと似た無料ホスティングサービスのRailwayとNetlifyに、それぞれバックエンドとフロントエンドをホスティングする方法をまとめてみました。 ここでは主にRailwayやNetlifyの設定方法を説明します。※アプリケーションについては解説しませんのあしからず 構成 RailwayバックエンドRubyOnRailsMySQLNetlifyフロントエンドVue.js リポジトリは一つにまとめておりディレクトリ構成は下記の様な感じとなっております。 $... 御覧になる | 御シェアする
カテゴリー: JavaScript
ビデオ会議で役立つタイマーJavaScript〜コンソールから叩く〜
npm installを完全に理解した
AWSのLambdaでEFSを使う
VimのaleプラグインでVueへのESLintを非同期で実行する
coc.nvimでVimにRuby/Vue.jsのLSPを導入する
VueでRailsのAPIを叩く
Vue.jsとRailsをDocker上に構築
Vue.jsは良いぞ Vue.jsはSPAを作るのに非常に良いフレームワークです。学習コストが低くパフォーマンスは高く、そして自由があります。サードパーティの開発も盛んでVuetifyというUIを提供しているフレームワークも併せてお勧めです。 今回はバックエンドにRailsを使いAPIサーバを立てて、フロントエンドにはVue.jsを使ってAPIを叩いてシェルスクリプトを実行出来る環境をDocker上に構築してみたいと思います。フロントエンドのUIにはVuetifyを使用します。 環境構築にはこちらの記事を参考にさせて頂きました。https://qiita.com/Kyou13/items/be9cdc10c54d39cded15 Vue.jsとRailsのコンテナを作成 Dockerfile作成 適当なディレクトリを作成して下さい。その中身を下記のような構成にすることが目標です。 $... 御覧になる | 御シェアする
ブックマークレットでURLからJavaScriptを実行出来る
はじめに ブックマークレットというものを耳にした事はありますでしょうか。先日Chromeのコンソールからjsを実行する事でCORSの試験を行う方法についてまとめました。今回はURLからjsを実行してみたいと思います。 URLにjsを記述したブックマークの事を界隈ではブックマークレットと呼んでいます。手軽に便利な機能を作れるのですが、存外知られていないテクニックですので、是非ともこの記事を機に覚えてみて下さい。 作ってみる 今回作りたいブックマークレットは下記の様なページから見出しの数を数えるというものです。取得したい見出しはHTML的にはh2要素になります。 実装をより明確に言語化すると、ページ内のh2要素数を計算して、その内の不要な固定のh2要素数を差し引きする事で算出できます。固定のh2要素とは例えば、「検索」とか「少しだけよく読まれる記事」などの事です。ちなみに合計で7個です。 実は下記のコードをURLバーに入力するだけでjsが実行されます。但しコピペをすると頭のjavascript:がカットされてしまうので、そこだけ手入力をする必要があります。 javascript:(function(){ var... 御覧になる | 御シェアする