りょうたくのWEBエンジニア日記

2018年12月から毎日技術ブログを投稿してます。 何か不備があれば、お気軽にコメント頂けると有り難いです。

自作キーボードに入門した「2日目:完成!!」

f:id:ryoutaku_jo:20190519155340p:plain

【結論】

・前回の記事の続き

・自作キーボード初心者には、はんだ付けが一番の関門

・ミスするリスクもあるが、物作りの楽しさを味わえるのが、既製品には無い良さ!

【目次】

【本題】

前回までのあらすじ

肩凝り解消策の一環で、分離キーボードを作る事にしたが、思いの外、時間が掛かっている・・・

ryoutaku-jo.hatenablog.com

キースイッチが反応しない・・・

前回、キースイッチをはんだ付けするところまで行ったので、実際に接続して反応するか試して見ました。

しかし、キーが一切反応しません・・・

どうやらキー配列を設定書き込む処理が必要らしいようで、下記の手順で反応するようになりました。

MacでMint60のキーマップを変更してみた – うろんげな解答

いよいよ完成!

LEDで光る仕様になっているので、LEDを取り付けて行きます。

f:id:ryoutaku_jo:20190519162253j:plain

これで基盤にはんだ付けするものは全て取り付けたので、土台となるアクリル板を取り付けて行きます。

f:id:ryoutaku_jo:20190519162449j:plain

そして、最後にキーキャップを取り付けて、これで完成です!!

f:id:ryoutaku_jo:20190519162812j:plain

(キーキャップの配列は一部テキトウです)

躓いたポイント(改善点)

* はんだ付けの練習をしておいた方が良い

私は正常に動きましたが、やっぱりぶっつけ本番で初心者がはんだ付けを試みるのは危険!

せめて、YouTubeとかで予習しておいた方が良いと思います。

* 動作チェックは細かく実施しよう

キースイッチを取り付けて、動作確認が取れる状態になったら、次に手順に進む前に、必ず動作確認をした方が良いでしょう。また、それ以降の工程においても、細かくチェックした方が良いでしょう。

私の場合、アクリル板を取り付ける前は正常に動作していたので、そのまま最後まで作業を進めてしまい、完成してから動作しなくなっている事に気づいて手戻りが発生しました・・・

* LEDとはんだが引っ付くと、動作不良を起こす

Mint60の場合、LEDテープ裏面の保護シールを剥がしてしまうと、金属面とキースイッチのはんだが接触して、キーが反応しなくなります(実際になった・・・)

下記の様に絶縁テープを貼って対処しました。

f:id:ryoutaku_jo:20190519170508j:plain

* はんだをつける場合は、適した部品なのか、しっかり確認する

この説明書きを見落として、はんだすべきで無いところに、はんだ付けしちゃいました・・・

ちゃんと説明書きは読みましょう

f:id:ryoutaku_jo:20190519174436j:plain

* ネジサイズを確認する

ネジサイズが違う事に途中まで気づかず、ネジが足りなくなってから気づいて、手戻りが発生したりしました・・・

f:id:ryoutaku_jo:20190519174506j:plain

* アクリル板は折れやすい

これは、一緒に作業していた、めっちゃ強そうな自作キーボード経験者の方から聞いた話ですが、「Mint60」のアクリル板は、それほど厚く無いので、力のさじ加減を間違えると、簡単に折れてしまう事が多いようです。

接着剤などで修復する事も可能でしょうが、不恰好になるので、細心の注意を払って取り扱った方が良いでしょう。

掛かった費用

  • Mint60キット= 15,984円

  • Tai-Hao PBT Hawaii(キーキャップのセット)= 8,100円

  • Gateron Silent 赤軸(66個×75円)= 4,950円

  • TRRSケーブル:324円

→合計:29,358円

f:id:ryoutaku_jo:20190519165720p:plain

「あれ?・・・普通に買った方が安くね?・・・」

〜終わり〜

《今日の学習進捗(3年以内に10000時間に向けて)》

学習開始からの期間 :163日
今日までの合計時間:1575h
一日あたりの平均学習時間:9.7h
今日までに到達すべき目標時間:1489h
目標との解離:86h
「10,000時間」まで、

残り・・・「8425時間!」

自作キーボードに入門した「1日目:迷走中・・・」

f:id:ryoutaku_jo:20190518203407p:plain

【結論】

・自作キーボードとは、既製品では不可能なキー配列やデザインを実現させる為のキーボード

・変態的な(褒め言葉)自作キーボードを製作されている方も多くいらっしゃる(所謂、沼)

・既製品もあるので、作るのが面倒な人は、そちらをチョイスする方が合理的かもしれないが・・・そんなのロマンがねぇよ!

【目次】

【本題】

きっかけ:なんか無性に肩が凝る・・・

エンジニアとして転職して以降、これまで以上にずっとPCに向き合う機会が増えたせいか、肩こりが気になる様になりました。

ストレッチなどを定期的に行っても解消されず、何か良い方法は無いものかと模索していたところ、「分離キーボード」の存在を知りました。

「分離キーボード」とは、文字通り、キーボードが分かれた構成になっているものです(下記画像参照)

f:id:ryoutaku_jo:20190518213322j:plain

画像引用元 ロープロ仕様に生まれ変わった、MISTEL「MD650L」を試す。超小型な分離キーボードの新境地 - エルミタージュ秋葉原

通常のキーボードだと、体の前にキーボードを配置して、それに向かって腕を伸ばす体勢になるので、肩が丸まり、猫背になり易いです。

対して、分離キーボードだと、体の左右にキーボードを配置して、腕を大きく広げて作業が行えるので、猫背になりにくい特徴があります。

どこまで効果があるかは分かりませんが、ものは試しという事で、早速分離キーボードを探す事にしました。

自作キーボードの世界

分離キーボードは、その特殊な形状ゆえ、市販されているものは非常に少なく、高価でした。

そんな中、目に付いたのが、「自作キーボード」でした。

「自作キーボード」とは、自身でキーボードを組み立てる事で、市販の既製品には無い様なオリジナルのカスタマイズが施せる代物です。

なので、市販ではラインナップが少ない分離キーボードも、自作キーボードだと数多くのキットが販売されています。

とはいえ、自作でも色々揃えると既製品並みの金額になるし、失敗した時のリスクを考えると、大人しく既製品を買ったほうが良いとも感じました・・・

そんな尻込みしている時、会社の同期に何気なくキーボードの話を振ると、実は自作キーボード使いである事が判明しました!!

そして、様々なアドバイス(洗脳)を受ける過程で、「やっぱり時代は自作キーボードだ!」と確信し、休みの期間を利用して、製作に挑戦する事にしました!

製作環境と選んだキーボード

製作をするにあたり、会社の同期に勧めで、下記のショップに赴きました。

yushakobo.jp

こちらは最近オープンしたばかりの日本では数少ない自作キーボード専門店です。

工房も併設されており、何も器材を持っていない私には打ってつけでした。

こちらの店員さんに相談しながら、色々探した結果、下記のキーボードを選ぶ事にしました。

eucalyn.shop

選んだ理由は、下記の通りです。

  • 初心者でも簡単に組めるという評判(これが一番)

  • キー配列が、あまり凝った構成ではないので、慣れるのに苦労しなさす

  • 色づかいが女性ウケしそう(錯覚)

作業内容

組み立てにあたっては、下記のサイトを参考にしました。

Mint60の組み立て手順 - ゆかりメモ

とりあえず全部揃っているか確認。

f:id:ryoutaku_jo:20190518220345j:plain

そしてダイオードをぶっ刺して行きます。

f:id:ryoutaku_jo:20190518220513j:plain

次が、はんだ付けです・・・

これが一番の難関です

はんだ付けなんて、中学校の図工の時間以来、触った事がありません・・・

(しかも、机の穴にはんだを流し込んで遊ぶ事しかしなかったので、本格的な使い方は一切知らない・・・)

という事でYouTubeのはんだ職人の動画を見ながら、我流でテキトウ(誤用の方)に、はんだを付けて行きました!

f:id:ryoutaku_jo:20190518220816j:plain

f:id:ryoutaku_jo:20190518220848j:plain

これで大丈夫なんだろうか・・・

そうこうして、隣で作業していためちゃ強そうな自作キーボード使いの人のアドバイスも受けながら、作業を進める事・・・「4時間!!」

f:id:ryoutaku_jo:20190518221607p:plain

完成しねぇ・・・

誰だよ、初心者でも簡単とか言ったやつ・・・

こちとら日帰りでいけるくらいの甘い見通しで作業してるんだふざけるんじゃないよ全く!

そんな訳で、明日に続きます(これ本当に動く様になるのか・・・?)

《今日の学習進捗(3年以内に10000時間に向けて)》

今日はプログラミングしてねぇよ!!(無進捗)

学習開始からの期間 :161日
今日までの合計時間:1567h
一日あたりの平均学習時間:9.8h
今日までに到達すべき目標時間:1470h
目標との解離:97h
「10,000時間」まで、

残り・・・「8433時間!」

いきなりコードを書くより、コメントで実装方法をまとめた方が捗った話

f:id:ryoutaku_jo:20190517203112p:plain

【結論】

・いきなりコードから書き出すと、実装手順がブレてしまい、手戻りが発生する事で、工数を圧迫するケースが散見される。

・コードを書き出す前に、実装のロジックをコメントに書き出す事で、手戻りを最小限に抑える事ができる。

・ノートに書き出したり、他にも様々な方法がある為、人それぞれやり易い方法を採用すると良い。

【目次】

【本題】

いきなりコードを書いていた時

以前まで、コードを書くときには、いきなりコードを書く事が多かったです。

ノートなどに設定方法をまとめてからコードを書いた方が良いという話は何度か聞いた事がありましたが、二度手間の様に思えて、そういった事はして来ませんでした。

しかし、就職して実務を経験するにつれて、それでは立ち行かない場面が度々発生する様になりました。

就職する前は、典型的なCRUDなど、比較的規模の小さい機能の実装しか経験しませんでしたが、業務ではMVC外にコードを切り出さないといけないほどの規模のコードを書いたりするので、頭の中だけでは整理がつかず、どこから手を付ければ良いのか判断が難しくなりました。

また、思いついた箇所から着手して行くと、考慮すべきポイントの抜け漏れが発生し、手戻りが発生する事で、工数を圧迫するという問題も発生しました。

コメントで実装方法を整理してみた

それらの問題を解消させる手段として、コードを書き出す前に、コメントで実装する処理を文章にまとめる方法を試す事にしました。

下記は、データの種類に応じて、グラフ表示用のラベルやデータを集計する為のコードの初期案です。

f:id:ryoutaku_jo:20190517203222p:plain

これにより、下記の様な恩恵を得る事が出来ました。

  • 何をすべきか明確になるので作業効率が上がる

  • 考慮すべきポイントの抜け漏れが防げる

  • 先輩に相談する際、自分の考えが伝わり易い

実際のコードは、この内容からかなり変化していますが、それでも、いきなりコードを書く時より、スムーズに実装を行う事が出来ました。

他の手法も

調べて見ると、同じ手法を採用されている方は多数いらっしゃいました。

脱・読みづらいコード!今日から一段上のプログラマーになる方法 5 選 - xin9le.net

プログラミングが遅い人の6つの原因と解決策 | IT初心者のトリセツ

プログラムを書く際に、はじめに設計書(?)みたいな物って皆さん書きますか... - Yahoo!知恵袋

僕がプログラムを作る手順|erukiti|note

プログラミングにおいて大切な 'スパイクを打つ'とは?

ソフトウェア工学とは何か

他にもノートに書いたり、マインドマップに書く人もいたりと、もっと色んなやり方があるので、他にも良い方法があるかもしれません。

《今日の学習進捗(3年以内に10000時間に向けて)》

グラフ作成機能において、別アカウントのデータも表示件数の対象に含んでいた事を実装途中で気づき、機能修正で手戻りが発生した。 DBを共有する設計の場合、実装方法を誤れば、今回の様に、他アカウントのデータが表示される可能性はある。 万が一、本番環境で同様の事象に気づけなかった場合は、即クリティカルな問題に発展する為、最優先で対処したい課題だと考えている。 実装前のアウトラインを整理する時や、実装後のテストを行う際は、真っ先に他アカウントの情報が表示されない仕様になっていないか?という事を考慮した上で、実装に臨みたい。

学習開始からの期間 :161日
今日までの合計時間:1567h
一日あたりの平均学習時間:9.8h
今日までに到達すべき目標時間:1470h
目標との解離:97h
「10,000時間」まで、

残り・・・「8433時間!」

グラフを簡単に描画する「Chart.js」について

f:id:ryoutaku_jo:20190516221046p:plain

【結論】

・Chart.jsを利用する事で、簡単にグラフ表示の機能を実装する事ができる

CDNなどでライブラリを読み込み、ページにスクリプトを埋め込んで、グラフ描画する場所にcanvas要素を記述する事で実装できる

スクリプトで定義している項目や値を、コントローラーから渡す事で、動的にグラフを生成する事が可能

【目次】

【本題】

グラフ機能を簡易に実装できる「Chart.js」について

「Chart.js」とは、JavaScriptで動作するシンプルかつモダンなグラフを簡単に実装できるライブラリです。

Chart.js | Open source HTML5 Charts for your website

公式サイトに掲載されていますが、下記の様なグラフを実装する事ができます。

f:id:ryoutaku_jo:20190516224217p:plain

f:id:ryoutaku_jo:20190516224234p:plain

Chart.js samples

実装手順1:本体のインストールする

実装の方法ですが、まずは本体をインストールする必要があります。

CDNでも配信されており、Railsであれば、下記の様にして読み込む事も可能です。

<%= javascript_include_tag 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js' %>

実装手順2:スクリプトを埋め込む

次にページに、どの様にグラフを描画するのかをスクリプトに定義して、埋め込みます。

公式サイトだと、下記のコードが掲載されていました。

<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["赤", "青", "黄色", "緑", "紫", "橙"],
        datasets: [{
            label: '得票数',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});
</script>

実装手順3:グラフを描画する位置にcanvas要素を記述する

最後にグラフを描画する位置にcanvas要素を記述します。

<canvas id="myChart" width="400" height="400"></canvas>

これにより、実装されたグラフが下記になります。

f:id:ryoutaku_jo:20190516224926p:plain

スクリプトで定義している項目や値などをコントローラーで取得したデータに置き換えれば、動的にグラフを生成する事が可能です。

参考情報

Chart.js · Chart.js 日本語ドキュメント

《今日の学習進捗(3年以内に10000時間に向けて)》

・グラフ作成機能において、ユーザーが任意でフォームを構築できる仕様に対応する為、Rubyの組み込みライブラリを多用した。 その過程で、まだ利用した事がないライブラリが多くある事を改めて知り、自身が知らないだけで、より効果的な手法があるかもしれないと感じた。 全てを一気に読んで理解するのは困難なので、毎日少しづつRubyRailsのリファレンスなどを読み、実装手法の引き出しを増やしたい。

・今まで機能実装する際、いきなりコード書くケースが多く、実装方法を紙などにまとめて整理する事を面倒に感じていた。 しかし、今回のグラフ作成実装は、規模が多く頭の中だけで整理しきれなかった為コメントで実装方法を記述して整理したところ、非常に捗った。 考慮すべきポイントが明確になり、また相談をする際にも、自身の考えが明確に伝わる利点を感じた。 想像以上に有用だった為、今後もこの手法を効果的に利用していきたい。

学習開始からの期間 :160日
今日までの合計時間:1554h
一日あたりの平均学習時間:9.8h
今日までに到達すべき目標時間:1461h
目標との解離:93h
「10,000時間」まで、

残り・・・「8446時間!」

Twitterの誘惑を遮断し、プログラミングの鬼と化す為のTips

f:id:ryoutaku_jo:20190515190938p:plain

【結論】

iPhoneでは「Screen Timer」、PC(Google Chrome)では「StayFocusd」というアドオンで、強制的に閲覧時間の制限を設ける事が可能

・ブックマークやアイコンも、フォルダの奥に追いやれば、見たい衝動を抑える事が出来る(削除が最も効果的)

Twitterは用法用量を守って正しくお使いください

【目次】

【本題】

Twitterはいかなる場合でも有用である・・・そんなふうに考えていた時期が俺にもありました

エンジニアが情報収集や人脈形成する上で、Twitterの利用は欠かせません。

私も、Twitterの利用を通して、下記のような恩恵を得ました。

  • 自身の記事を拡散し、多くの人に読まれる事で、フィードバックを得る機会が増える

  • 自分一人では気付けなかった新しい知見を得られる

  • 励ましや応援メッセージを貰ったり、他に頑張っている人を見て、モチベーションを高める

しかし、その恩恵以上に、時間を浪費していないか?という疑問が湧きました。

実際に、今週のTwitterの利用状況を見たら、えらい事になっていました。

f:id:ryoutaku_jo:20190515210916j:plain

今週で計11時間、毎日平均で約1時間半、Twitter使ってました・・・

カップヌードル何個分?

これを分かりやすくカップラーメンが何個出来るくらいの時間なのか?計算しようとしましたが、暗算出来ないので、プログラミングを組みました(by Ruby

def many_many_many_cup_noodles(cup_noodle_time)
  time_to_complete_cup_noodles = 3
  count_cup_noodles = ( cup_noodle_time * 60 ) / time_to_complete_cup_noodles
end

puts "ワイ「何時間Twitterやってたっけ?」"
lost_time = gets.to_i

puts "ワイ「カップヌードル『#{(many_many_many_cup_noodles(lost_time))}個』出来てもうたわ!!」"

↓結果

ワイ「何時間Twitterやってたっけ?」
(入力) 11

ワイ「カップヌードル『220個』出来てもうたわ!!」

どうやら、カップヌードルが220個、完成する時間のようです(驚愕)

(これで技術ブログとしてのノルマ達成!)

・・・冗談はさておき、流石に今後もこれが続くと学習進捗に支障をきたすので、がっつり制限を設ける事にしました。

iPhoneの対策1:Screen Timer

まずはiPhoneから対策します。

iPhoneには、Screen Timerと呼ばれる機能が標準で備わっています。

これは、アプリの使用時間を集計したり、使用を制限する為の機能です。

www.apple.com

今回はTwitterも含めたSNSアプリの使用時間が「15分」を過ぎれば、制限が掛かるように設定しました。

制限後は、アプリを開くと下記の様な表示が出ます(この画面で解除も一応可能)

f:id:ryoutaku_jo:20190515212057j:plain

iPhoneの対策2:アプリのアイコンをフォルダの奥底に沈める

次は、Twitterのアイコンを、直ぐに目につくところではなく、フォルダの最下層に押し込みました。

f:id:ryoutaku_jo:20190515212634p:plain

また、他にも気が散りそうなアプリを全部フォルダに押し込み、ホーム画面も自分が好きな漫画のモチベーション上がるシーンに変更しました。

f:id:ryoutaku_jo:20190515212351p:plain

漫画「3月のライオン 4巻(著者:羽海野チカ)」 より

ちなみに、ロック画面はこちら

f:id:ryoutaku_jo:20190515212617p:plain

漫画「NARUTO-ナルト- 70巻(著者:岸本斉史)」 より

本当は「ジャック・ハンマー」が「最強の肉体と死を引き替えにする覚悟は既にできてるッッッ」って言っている場面にしたかったんですけど、いい感じに画像が調整出来ず、断念(分かる人だけ分かればいい・・・)

PCの対策1:原則PCから見ない(ブックマーク削除)

次にPC側の対策ですが、iPhoneとPCの両方でTwitterを見出すと、時間の管理が難しいので、原則PCではTwitterを見ない事に決めました。

なので、ブックマークを削除しています。

PCの対策2:Google ChromeにStayFocusdを導入

とはいえ、記事のリンクでTwitterに飛ぶケースもあるので、そういった時にダラダラ見続けない様に、PCにも制限を設けます。

制限を設ける上で採用したのは、StayFocusdというGoogle Chromeのアドオンです。

StayFocusd - Chrome ウェブストア

Screen Timerと同じ様に閲覧時間を監視して、設定した時間が経過すれば、閲覧できない様に制限を掛けてくれます。

こちらは「10分」で設定を行いました。

制限時間経過後の画面はこちらです。

f:id:ryoutaku_jo:20190515214949p:plain

駄目押しの対策:ヘッダー画像で注意喚起

それと、これはGWからやっていましたが、Twitterのホーム画面のヘッダー画像を、下記の様に自身への警告文に変更しました。

f:id:ryoutaku_jo:20190515223434j:plain

これは正直効果無かったですw

人それぞれの価値観で

・・・という具合に、私のTwitter対策をご紹介しましたが、万人にとって、これがベストの選択とは思っていません。

人によっては、Twitterの利用時間が長くなったとしても、それ以上に有意義な体験(ストレス発散・人脈形成など)が出来ていれば、別に制限を掛けなくても良いのではないかと思います。

肝心なのは、何を優先すべきか?という事をしっかりと認識して、それに基づいて行動する事だと考えています。

自分に適した用法用量で、有意義なJavaライフをエンジョイして下さい!!(分かる人だけ分かればいい・・・)

NEXT

次はオメェーの番だぞ!Slack!!

f:id:ryoutaku_jo:20190515222257p:plain

《今日の学習進捗(3年以内に10000時間に向けて)》

・開発定例会議において、機能実装案について話し合われたが、どの案が効果的なのか?自身では全く判断がつかなかった。 開発におけるアンチパターンを理解していない事に起因する為、SQLアンチパターンなど時間を見つけて読んで、理解を深めたい。

・社内でセキュリティ勉強会があったが、改めて個人情報管理の重要性を認識した。 今回の講義で紹介された対策などは、ごく一部分だけだと思うので、自身でも情報を収集して、重大事故を引き起こさないよう努めたい。 また、フレームワーク頼りの開発手法しか経験した事が無いので、技術的なセキュリティ対策に関する知見が欠けていると感じている。 この点についても、書籍などで知識を補填していきたい。

・疲れて来たらネタ記事を書いてしまう現象って、なんて言うんだろうか・・・?

学習開始からの期間 :159日
今日までの合計時間:1549h
一日あたりの平均学習時間:9.8h
今日までに到達すべき目標時間:1452h
目標との解離:97h
「10,000時間」まで、

残り・・・「8451時間!」

SDKとAPIについて

f:id:ryoutaku_jo:20190514222003p:plain

【結論】

SDKとは、あるソフトウェアを開発する際に役立つサンプルコードやリファレンスなどをセットにしたもの(ソフトウェア開発キット)

・それに対してAPIは、外部から機能を呼び出す為のインターフェイス

・なので、SDKのライブラリのインターフェイスAPIと呼ぶ場合もある

【目次】

【本題】

SDKについて

SDKとは、あるソフトウェアを開発する際に役立つサンプルコードやリファレンスなどをセットにしたものです。 「Software Development Kit」(ソフトウェア開発キット)の略称です。

SDKは有償または無償で提供されています。 企業が提供する場合は、自社製品をもっと利用して貰う為のPRの意味も込めて、無償で提供しているケースが多いです。

SDKの例としては、SoftBankがpepperの開発用で配布しているもの(下記)などがあります。

ドキュメント、SDKダウンロード | ロボット | ソフトバンク

APIとの違い

提供元によっては、SDKAPIの両方を提供している場合があります。 どちらもソフトウェアを開発する為の必要なものという点は同じですが、違いがあります。

APIが外部から機能を呼び出す為のインターフェイスであるの対して、SDKはソフトウェアを開発するためのツールやライブラリを集めた物になります。 なので、SDKのライブラリのインターフェイスAPIと呼ぶこともあります。

参考情報

ソフトウェア開発キット - Wikipedia

SDKとAPIについて - Qiita

SDK | ビジネス用語集 | 転職エージェントは正社員専門のエリートネットワーク|転職・人材紹介

《今日の学習進捗(3年以内に10000時間に向けて)》

インフラ構築の打ち合わせにて、改めてネットワークに関する基礎知識が欠如していると実感した。 AWSについては、EC2のインスタンスを立ててS3にファイルアップロードし、Capistranoで自動デプロイするというところまではGWに実践して理解を深めたが、実務レベルの水準となると、まだまだハードルは高いと感じる。 ネットワークの基礎知識に関しては、基本情報処理技術者試験の範囲でカバー出来る部分も多いので、まずはそこから学習して土台を固めていきたい。

学習開始からの期間 :158日
今日までの合計時間:1537h
一日あたりの平均学習時間:9.8h
今日までに到達すべき目標時間:1443h
目標との解離:94h
「10,000時間」まで、

残り・・・「8463時間!」

RubyMineで毎回自動生成される.ideaについて

f:id:ryoutaku_jo:20190513130147p:plain

【結論】

・RubyMineで毎回自動生成される.ideaは、チーム間でプロジェクト設定を共有する為のファイル

・但し、チーム全員がRubyMineを共通設定で使用しないのであれば、GitHubに上げると邪魔になる

・毎回Gitの監視下に入るのが面倒であれば、gitignore_globalに登録すれば、都度gitignoreに登録する手間が省ける

【目次】

【本題】

RubyMineを使用していると生成される.idea

RubyMineを使っていると、.ideaという謎のファイルが、勝手に生成されてGitの監視下に加わります。 今回は、これが何か調べました。

チーム間で設定内容を共有するもの

下記の公式サイトによると、以下の様な説明でした。

Projects - Help | IntelliJ IDEA

Project formats # In IntelliJ IDEA, there are two types of formats in which a project's configuration can be stored — the file-based format format (legacy) and the directory-based format (default and recommended).

For file-based projects, the IDE creates the .ipr, .iws and .iml files. For projects stored in the directory-based format, the IDE creates the.iml file and the .idea directory that keeps project settings.

どうやらプロジェクト設定を保存して、共有する為の物の様です。

全員がRubyMineを使用する訳ではない

同じ環境で開発を行えるという利点がある様ですが、エディタが違えば意味がありません。

不要なファイルがアップロードされていると、コードレビューの邪魔にもなりますので、特に利用していないのであれば、Gitの監視下から外しておくのが得策でしょう。

毎回gitignoreに登録するのは面倒

この.ideaは、毎回勝手に生成されますが、都度gitignoreに登録するのが面倒です。 また、他のメンバーに関係ないファイルがgitignoreに登録されているのも綺麗ではありません。

そういった個人の都合で毎回Gitの監視下から外したいのであれば、.gitignore_globalに登録するのが有用でしょう。

gitignore_globalは、全てのプロジェクトにおいて、登録したファイルをGitの監視下から外してくれます。

.gitignore_globalの設定方法

まず、下記のコマンドで.gitignore_globalを読み込む設定を行います。

git config --global core.excludesfile ~/.gitignore_global

次にホームディレクトリへ.gitignore_globalの作成と編集を行います。

$ vim ~/.gitignore_global

今回は、下記二種類のファイルを記述しました。

.idea/
.DS_Store

保存後、上記二つのファイルはGitの監視下から外れます。

参考情報

Projects - Help | IntelliJ IDEA

How to manage projects under Version Control Systems – IDEs Support (IntelliJ Platform) | JetBrains

グローバルに.gitignoreを設定する方法 | vdeep

《今日の学習進捗(3年以内に10000時間に向けて)》

CKEditorの実装が概ね完了したが、プラグインの導入でかなり苦戦した。 やはりJavaScriptやWebpackなどフロント周りの知識が無いと、公式ドキュメントを読んでも内容の理解が難しい。 本日CTOとの1on1にて、まずはRailsを使いこなせる様にとアドバイス頂いたが、合間を見つけて、ドキュメントを理解できる程度の知識を身につけて行きたい。

学習開始からの期間 :157日
今日までの合計時間:1526h
一日あたりの平均学習時間:9.8h
今日までに到達すべき目標時間:1434h
目標との解離:92h
「10,000時間」まで、

残り・・・「8474時間!」

YAMLについて

f:id:ryoutaku_jo:20190512192303p:plain

【結論】

YAMLとは、構造化されたデータを文字列として扱う為のデータ形式の一種

・拡張子は.yml

Railsではconfigディレクトリ配下の各種設定ファイルなどで用いられている

【目次】

【本題】

YAMLとは

YAMLとは、構造化されたデータを文字列として扱う為のデータ形式の一種です。 構造化と言ってもピンっと来ないと思いますが、下記の様な階層構造をイメージすると良いと思います。

f:id:ryoutaku_jo:20190512203135p:plain

これをYAMLで表すと下記の様な記述になります。

大項目:
  中項目1:
    小項目1:
    小項目2:
    小項目3:
  中項目2:
    小項目4:
    小項目5:
    小項目6:

なお、ファイルの拡張子は.ymlです。

利用シーン

Railsではconfigディレクトリ配下の各種設定ファイルに用いられています。

config/datebase.yml

default: &default
  adapter: mysql2
  encoding: utf8
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: root
  password:
  socket: /tmp/mysql.sock

development:
  <<: *default
  database: test_development

test:
  <<: *default
  database: test_test

production:
  <<: *default
  database: test_production
  username: root
  password: <%= ENV['DATABASE_PASSWORD'] %>
  socket: /var/lib/mysql/mysql.sock

config/locales/views/ja.yml

ja:
  common:
    button:
      sign_up: サインアップ
      log_in: ログイン
      log_out: ログアウト

参考情報

プログラマーのための YAML 入門 (初級編)

《今日の学習進捗(3年以内に10000時間に向けて)》

GWでかなり無茶をしたせいか、この土日は全く学習も開発も進まなかった・・・

改めて、やる気に頼る学習プランは危険であると痛感した。

しかし、ブログでのアウトプットに関しては、やる気の有無に関わらず、続ける事が出来ている。

この事からも、いかに多くのタスクを習慣化させて行けるか?が今後のスキル向上の鍵になると考えている。

習慣化には時間を要するので、早めに次の習慣化に取り組んで行きたい。

学習開始からの期間 :156日
今日までの合計時間:1515h
一日あたりの平均学習時間:9.8h
今日までに到達すべき目標時間:1425h
目標との解離:90h
「10,000時間」まで、

残り・・・「8485時間!」

credentials.yml.encによるアクセスキーの管理方法

f:id:ryoutaku_jo:20190512015759p:plain

【結論】

・Rails5.2以降から、secrets.ymlは廃止され、代わりにcredentials.yml.encが導入された

・credentials.yml.encは暗号化されている為、master.keyで復号化しないと編集は出来ない

・master.keyはデフォルトでgitignoneに登録されている

【目次】

【本題】

アクセスキー暗号化の必要性

AWSなどのアクセスキーを、そのままGitHubに上げてしまうと、過剰請求の被害にある可能性があります。 その為、そういったセキュリティ情報は、暗号化させる必要があります。

Rails5.2より前は、secrets.ymlを用いて暗号化を行う仕組みが備わっていました。 しかしRails5.2以降は、secrets.ymlが廃止され、代わりにcredentials.yml.encが導入されています。

今回は、そのcredentials.yml.encを用いたアクセスキーの管理方法について解説します。

概要

rails new」した時点で、「config」ディレクトリには、credentials.yml.encmaster.keyという二種類のファイルが生成されます。

credentials.yml.encが、アクセスキーなどの情報を暗号化して保持しているファイルです。 そして、master.keyが、credentials.yml.encを復号化させる為の鍵になります。

credentials.yml.encの編集

まず、アクセスキーを情報をcredentials.yml.encに入力する必要がありますが、このファイルは暗号化されているので、開いても数字の羅列が表示されるだけで、直接編集を行う事が出来ません。

編集を行うには、ターミナルから下記コマンドを実行します。

$ EDITOR=vim bin/rails credentials:edit

環境変数でエディタを指定している場合は、$ EDITOR=vimの部分は省略可能です。 上記を実行すると、下記の様な初期の記述内容が表示されます。

# aws:
#   access_key_id: 123
#   secret_access_key: 345

# Used as the base secret for all MessageVerifiers in Rails, including the one protecting cookies.
secret_key_base: ****************************************

こちらを適宜修正して保存します。保存と同時に暗号化が行われ、ファイルが更新されます。

aws:
  access_key_id: super_tekitou
  secret_access_key: koremo_tekitou

# Used as the base secret for all MessageVerifiers in Rails, including the one protecting cookies.
secret_key_base: ****************************************

情報の取り出し方

ここに記述した情報はRails.application.credentials.xxxというコードで呼び出せます。

$ rails c

irb(main):001:0> Rails.application.credentials.aws[:access_key_id]
=> "super_tekitou"

irb(main):002:0> Rails.application.credentials.aws[:secret_access_key]
=> "koremo_tekitou"

例えば、shrineの設定ファイルでAWSのアクセスキーを呼び出したいのであれば、下記の様に記述します。

(省略)
if Rails.env.production?
  s3_options = {
      access_key_id: Rails.application.credentials.dig(:aws, :access_key_id),
      secret_access_key: Rails.application.credentials.dig(:aws, :secret_access_key),
(省略)

これで、安全にアクセスキーを取り扱う事が出来ます。

参考情報

Rails セキュリティガイド - Rails ガイド

《今日の学習進捗(3年以内に10000時間に向けて)》

今日は興が乗らん!!(全く開発に身が入らず・・・) マッタリする日にしました。

学習開始からの期間 :155日
今日までの合計時間:1511h
一日あたりの平均学習時間:9.8h
今日までに到達すべき目標時間:1416h
目標との解離:95h
「10,000時間」まで、

残り・・・「8489時間!」

CKEditor4の導入とカスタマイズ方法

f:id:ryoutaku_jo:20190510191506p:plain

【結論】

・CKEditor4はCDN経由で読み込む事が可能

・デフォルトの設定であれば、JavaScriptのコードを一行記述するだけで、実装可能

ツールバーのカスタマイズも、公式サイトでコードを自動生成してくれる

【目次】

【本題】

CKEditor4の導入方法とカスタマイズ方法について

今回は、CKEditor4の導入方法と、カスタマイズ方法について説明します。

ryoutaku-jo.hatenablog.com

CDN経由で本体を読み込む

今回は、CDN経由でCKEditorを読み込みます。 下記のリンクから、CDNのアドレスは取得できます。

https://ckeditor.com/ckeditor-4/download/

<script src="//cdn.ckeditor.com/4.11.4/full/ckeditor.js"></script>

こちらをCKEditorを読み込みたいページに埋め込みます。

CKEditorを画面に実装

次に、CKEditorを画面に表示させます。 まず、CKEditorで編集したい項目にidを指定します。 今回はeditorとしていますが、任意で構わないです。

<%= form_with(model: post, local: true) do |f| %>
(省略)
  <%= f.text_area :content, class: 'form-control', id: 'editor' %>
(省略)

次に、下記のjavascriptを埋め込みます。 先ほど指定したidを記述して、どの項目にCKEditorを反映させるか指定します。

CKEDITOR.replace( 'editor' );

これでビューへの反映が完了します。

f:id:ryoutaku_jo:20190510210317p:plain

CKEditorのツールバーをカスタマイズ

最後にツールバーをカスタマイズします。 下記のToolbar Configuratorを利用すれば、自身の選択したツールバーの内容に応じて、自動でコードを生成してくれます。

https://ckeditor.com/latest/samples/toolbarconfigurator/index.html#basic

今回は、下記の様にカスタマイズしました。

CKEDITOR.replace( 'editor', {
  //ツールバーグループのカスタマイズ
  toolbarGroups: [
    { name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
    { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
    { name: 'links', groups: [ 'links' ] },
    { name: 'insert', groups: [ 'insert' ] },
    '/',
    { name: 'styles', groups: [ 'styles' ] },
    { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
    { name: 'colors', groups: [ 'colors' ] },
    { name: 'tools', groups: [ 'tools' ] },
    { name: 'others', groups: [ 'others' ] },
    { name: 'about', groups: [ 'about' ] },
    { name: 'document', groups: [ 'mode', 'document', 'doctools' ] }
  ],
  //不要なボタンを削除
  removeButtons: 'Source,Save,NewPage,Print,Templates,' +
    'Find,Replace,SelectAll,Scayt,Cut,Styles,Font,' +
    'Copy,Paste,PasteText,PasteFromWord,BidiLtr,Smiley,' +
    'BidiRtl,Language,Unlink,Anchor,Flash,Outdent,Indent,' +
    'PageBreak,CreateDiv,RemoveFormat,CopyFormatting,' +
    'Superscript,Subscript,Strike,Form,Checkbox,Radio,TextField,' +
    'Textarea,Select,Button,ImageButton,HiddenField,ShowBlocks,About,SpecialChar',
});

これでツールバーのカスタマイズも完了です。

f:id:ryoutaku_jo:20190510210836p:plain

参考情報

・CKEditor4公式ページ
https://ckeditor.com/ckeditor-4/

・設定オプションの記述方法 https://ckeditor.com/docs/ckeditor4/latest/guide/dev_configuration.html

・設定オプションの一覧 https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html

・Toolbar Configurator(ツールバーのオプションを生成するフォーム) https://ckeditor.com/latest/samples/toolbarconfigurator/#basic

・Toolbar Configuratorの使用方法 https://ckeditor.com/docs/ckeditor4/latest/guide/dev_toolbar.html

ツールバーグループの設定方法 https://ckeditor.com/docs/ckeditor4/latest/guide/dev_toolbarconcepts.html#toolbar-groups-configuration

《今日の学習進捗(3年以内に10000時間に向けて)》

・CKEditor4の導入にて、Qiitaなど日本語ページにカスタマイズ方法が載っていないので、英語の公式ドキュメントを参考に進めたが、かなり時間を要してしまった。 公式ドキュメントは、英語なのと、情報が網羅的過ぎることもあり、必要な情報に辿り着くのを困難にしている。 また、CKEditor自体が、JavaScriptで開発されているが、JavaScriptの知識が不足していることも、時間を掛ける要因になった。 公式度キュエントを読むこと自体は慣れも必要だと感じるが、英語・JavaScriptに関しては、どこかで時間を取って学習したい。

学習開始からの期間 :154日
今日までの合計時間:1508h
一日あたりの平均学習時間:9.8h
今日までに到達すべき目標時間:1406h
目標との解離:102h
「10,000時間」まで、

残り・・・「8492時間!」