勉強した内容をMermaid.jsでマインドマップ形式でまとめる

はじめに この記事を読まれているエンジニアの皆様は日々多くの本やネットの記事をお読みになり、自己研鑽に励んでいることと思います。 テキストに限らず学習した内容を何らかの形でまとめることは記憶に定着させたり、理解を整理したり、思い出しやすくしたりとたくさんの意味があると自分は考えています。恐らく同じ様な考えを持つ方は少なくないかと思います。 そこで今回はMermaid.jsを使いマインドマップ形式で保存することで、見やすく手軽に管理する方法を紹介したいと思います。 準備 今回はMermaid.jsを使用するので予めインストールしておいて下さい。以前Mermaid.jsをインストールする方法や、ガントチャートを作成する方法をこちらで紹介しているので必要に応じて参考にして下さい。 マインドマップとは マインドマップとは下図の様なものです。思考を整理する時などに便利です。 これは「SQLアンチパターン」という本にある、「ジェイウォーク」についてまとめたものです。 この画像は元々テキストで書いているだけです。先程インストールしてもらったMermaid.jsを使うことでマークダウン記法のように書くだけで簡単にマインドマップを作成することが出来ます。 ちなみに「SQLアンチパターン」はとても良い本なので読んでいない方は絶対に読むべきお勧めな本です。 マインドマップを書いてみる 実は解説する程のことはほとんどなく、最初のノードをroot()で囲むだけで、あとは階層毎にインデントを深くしていけば自然とマインドマップが作られます。 mindmap ... 御覧になる | 御シェアする

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

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

iPhoneとMacBookで本当に無限タップをする方法(タップ装置なし)

使うもの iPhoneMacBook 上記の2つがあれば無限タップが可能です。タップ操作をするiPhoneと、無限にタップを制御するためにMacBookを使います。 ※無限タップをする外部装置は必要ありません。 手順 iPhoneでレシピを作成 レシピを作成するに当たりスイッチが必要になります。「アクセシビリティ」→「スイッチコントロール」→「スイッチ」と移動します。更に「新しいスイッチを追加」を押して下さい。 このスイッチに関しては一旦適当で構わないので下表のような内容で作成します。 ソース画面画面フルスクリーンアクションタップ 次に「レシピ」へ移動します。「新規レシピを作成」を押してレシピを作成します。先程のスイッチを指定して下さい。名前・アクション・タイムアウトはここでは何でも良いです。 そして「レシピを起動」に今作成したレシピを指定します。 MacBookからiPhoneにスイッチを追加する 「システム環境設定」→「アクセシビリティ」→「スイッチコントロール」に移動します。「スイッチコントロールを有効にする」を有効にします。すると下図のようなスイッチコントロールパネルが表示されます。 「デバイス」をクリックすると同じネットワークに存在しているデバイスが表示されるのでご自分のiPhoneを選択して接続して下さい。※Bluetoothのペアリングなのか、iCloudへのサインインなのか、この「デバイス」の検索結果に表示される明確な条件は分かりません。申し訳ございません。 接続するとiPhoneをスイッチコントロールによる制御が出来る状態になります。この状態になったらMacBookとiPhoneの連携は成功です。 また下図のように新しくスイッチが追加されている筈です。 スイッチが追加されたら、先程のレシピに紐付けたスイッチをMacBookによるものに置き換えます。このスイッチの「アクション」を「カスタムジェスチャ」にして出来る限りの連続タップを登録しておきます。 これでもう一度MacBookのスイッチコントロールからiPhoneに接続して、その状態でスペースキーを押すとiPhoneでは登録されたレシピ(連打なら連打)が実行されるようになったかと思います。 Automatorでスペースキーを無限に押す ここまででスイッチコントロールでのMacBookからiPhoneの制御が可能になりました。正確にはMacBookのスペースキーを押すとiPhoneの画面タップスイッチが実行されるようになっています。 つまりMacBookでスペースキーを自動で無限に押し続けてくれれば良いということになります。今回はAutomatorというアプリを使用します。 「AppleScriptを実行」を追加して、下記のコードを記述します。 tell... 御覧になる | 御シェアする

ラズパイでトラフィックエクスチェンジする

はじめに 頂戴したものの使っていないラズパイをどう使うか悩んでいて、先日マイニングを試みたのですが何時まで経っても0コインのままだったので辞めました。 そこで今度はトラフィックエクスチェンジを行うことにしました。トラフィックエクスチェンジとはトラフィックエクスチェンジサイトに登録されているサイトをアクセスすることでそのサイトのPV数を上げる協力をする代わりに、報酬としてお金がもらえる仕組みのことです。 ラズパイでトラフィックエクスチェンジをするに当たり色々な調整を行いましたので、備忘録としてまとめました。 アカウント登録 まずはアカウントを作成します。 現時点だと「白熊」というトラフィックエクスチェンジサイトが最も効率が高いです。メールアドレスとパスワードを設定するとアカウント登録が出来ます。 下記バナーから登録するとお互いに特典ポイントが付与されますので是非宜しくお願いします。 準備が出来たらホームの「サーフ... 御覧になる | 御シェアする

deviseのアカウントロック解除メールを自動送信から手動送信に変える

はじめに 認証機能を提供するGEMでおなじみのdeviseですが、試行回数の制限を設定を行えることをご存知でしたでしょうか。 まずアカウントロック用のカラムを追加します。下記の様なマイグレーションファイルを作成してから、rails... 御覧になる | 御シェアする

Expoでエミュレーターが再起動出来ない時

はじめに 以前こちらでExpoというフレームワークを使いReactNativeでアンドロイドアプリを作成する方法をまとめました。 しばらく開発を続けているとAndroidStadioのエミュレーターの挙動がおかしくなることがあります。理由は分かりませんが、電源マークからリスタートをしても永遠に動かなくなってしまうのです。 一つ目の対応策としてはExpoのコマンドで再起動を行うことです。expo... 御覧になる | 御シェアする

ReactNativeとFirebaseを連携する

やること ReactNativeではiOSやAndroid両方で動作するアプリを作成出来ます。モバイルアプリはデータベースを外部に持つ場合が多いかと思いますが、その候補によく上がってくるのがFirebaseです。 今回はExpoというReactNativeのフレームワークを使ってアプリを作る場合の、Firebase連携方法をまとめたいと思います。 Firebaseアプリ追加 まずはこちらからFirebaseコンソールにログインしてプロジェクトを作成します。 プロジェクトが作成出来たら次に「アプリを追加」からプロジェクト内にアプリを作成していきます。今回はウェブアプリプラットフォームを選択しています。 アプリのニックネームの欄にapp.jsonと合致するように任意のパッケージ名を入力します。 「Firebase... 御覧になる | 御シェアする

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

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

Vimでブラウジング

はじめに Vimでブラウジング出来るとどんな良いことがあるのか考えてみましょう。仕事している風を装いながらスポーツニュースの速報をチェック出来たり、サクッと天気予報を確認出来たりします。 他にもコーディングをしながら調べものをする際にターミナルからブラウザなどのアプリに切り替えなくて済むようになります。一日に何十回とする面倒な作業が省略されて開発体験も改善されます。 という訳でVimでブラウジングする方法をまとめました。 テキストブラウザ w3mというテキストブラウザを利用します。普段私達が見ているWebページには画像やCSSなどの装飾が埋め込まれています。それらはChromeなどのブラウザによってパースされた後、DOMを構築したりスタイルを適応していき最終的に私達にとって見やすい形で画面に表示されています。 テキストブラウザとはWebページの文字で表現されている部分のみを抽出してターミナルに表示するブラウザのことです。w3mはその内の一つです。 $... 御覧になる | 御シェアする

ReactNative+ExpoのAndroidアプリにAdMobの広告を貼る方法

はじめに 前回ReactNativeとExpoフレームワークを使ってAndroidアプリをGooglePlayに公開する方法をまとめました。今回はアプリの中に広告を設置して収益化する方法を備忘録としてまとめようと思います。 ドキュメントの量が多かったのと一番簡単そうだったという理由から、アプリに設置する広告はAdMobにしたいと思います。アプリの審査が通っていない場合でも広告のテストは可能です。 AdMob広告作成 アプリ作成 まずはここからGoogle... 御覧になる | 御シェアする