カテゴリー: JavaScript

RailwayとNetlifyで無料ホスティング

はじめに ポートフォリオや勉強の一環として作成したWebサービスを無料で公開したいというケースはよくあるかと思います。 少し前までならHerokuがありましたが、生憎無料で使えなくなってしまいました。そこで今回はHerokuと似た無料ホスティングサービスのRailwayとNetlifyに、それぞれバックエンドとフロントエンドをホスティングする方法をまとめてみました。 ここでは主にRailwayやNetlifyの設定方法を説明します。※アプリケーションについては解説しませんのあしからず 構成 RailwayバックエンドRubyOnRailsMySQLNetlifyフロントエンドVue.js リポジトリは一つにまとめておりディレクトリ構成は下記の様な感じとなっております。 $... 御覧になる | 御シェアする

ビデオ会議で役立つタイマーJavaScript〜コンソールから叩く〜

はじめに 自分たちのチームでは振り返りや意思決定などをオンラインで行う場合、miroやGoogleDocumentなどの複数人で同時編集が可能なサービスを画面共有しながら会話をしています。 「時間を決めて各々で少し考えてみましょう。」みたいな時に、ブラウザを使いながらタイマーがあると便利な瞬間があります。Chromeの拡張機能でもいいのですが、これくらいなら生のJavaScriptを書いたり、ブックマークレットで実装してしまった方が早いかなと思い今回作ってみました。 JavaScript版 コードは下記の通りです。 let... 御覧になる | 御シェアする

VimのaleプラグインでVueへのESLintを非同期で実行する

はじめに 今回はVueファイルを編集する際にESLintでコード分析をして、ALEというVimプラグインで警告メッセージを表示する設定を行いたいと思います。ついでにPrettierでファイルの保存時に自動フォーマットをさせる設定もまとめておきます。 手順 ESLintインストール まずはESLintをインストールします。 $... 御覧になる | 御シェアする

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... 御覧になる | 御シェアする

mermaid.jsでリトアカのガントチャートを作った

mermaid.jsとは フローチャートやシーケンス図、ガントチャートなど様々なドキュメントをマークダウンの様な定められたフォーマット通りに記述することで、テキストベースで作図が出来るツールです。 今回はmermaid.jsを使ってリトルウィッチアカデミアの第一クールまでのあらすじをガントチャート風に作成してみました。単なるmermaid.jsの練習と備忘録、そしてリトアカの布教です。 mermaid.jsのインストール $... 御覧になる | 御シェアする