別冊とっしーぱんち

IT技術系、Ruby関連、プログラミングお役立ち

プログラミング用にキーボード設定をカスタマイズする

日本語キーボードでプログラミングをしていると、キーボードの特定のキーが押しづらかったり、ミスタイプをすることがあります。

そんなときにおすすめなのが、キーボード設定のカスタマイズ。特定のキーを別のキーとして認識させることで自分なりに押しやすい位置に変更することができます。

今回はキーボード設定のカスタマイズについての紹介です。

キーボード入力設定変更ソフト

まずは独自のキーボード設定を行うためのソフトをインストールします。

あたりがおすすめソフトになります。まずはそれぞれご利用の環境に合わせてインストールします。

キーボードのカスタマイズ

どちらのソフトでも、できることは一緒で、特定キーの機能を別のキーに割り当てることができます。自分好みに改造していくのが大事なところですが、設定の一例として、以下を挙げておきます。

  • かたかな/ひらがな ー> Backspace
  • 半角/全角     ー> Escape
  • CapsLock ー> WinだとCtrl、MacだとCommand

BackSpaceとEscキーの位置が遠く感じるのを近くに、Ctrlキーも頻繁に使う割に少し窮屈な場所にいるので押しやすいCapsLockに移動しています。

その他カスタマイズ

これに加えて、Macと操作性を揃えておきたいという意図から、WindowsのIME設定から

  • 変換  ー> 日本語入力ON
  • 無変換 ー> 日本語入力OFF

という風にしています。

MacにWindowsのキーボードを挿して使う場合

さらに、Windows用キーボードをMacでも使いたい場合は、以下の設定をすることでMacしかないキーを割り当てることができます。これもどのキーをどこに割り当てるかは個人の好みですので、一例としてみていただければと思います。()ないはKarabiner上のコード名です。

  • Windowsキー(left_command) ー> 左Option(left_option)
  • 左Alt(left_option)    ー> 左Command(left_command)
  • ポーズ(pause) ー> 取り出し(eject)
  • 半角/全角(grave_accent_and_tilde) ー> Esc(escape)

Windowsキーは左コマンドキー。半角/全角キーはMacの場合グレイブアクセントになっているのが少しとまどうところでしょうか。

ちなみにポーズキーを取り出しキーにしているのは、スリープコマンド(Option+Command+Pause)を使いたいためです。再起動コマンドが(Command+Ctrl+Pause)なので、押し間違えないように注意です。(よく間違える。

【プログラミング】記号の読み方いろいろ ” ' # \ : ; ` $ . _ - &

プログラミングしているとよく出てくる記号たち。プログラミング覚えたてのころ、読み方や使い方など、地味につまずきポイントに思います。

そこで、今回はプログラミングでよく使う記号や用法をまとめてみました。
Rubyを例として挙げていますが、JavaScript,Python,PHP,C#などなど様々なプログラミング言語でも使われる記号たちなので、参考にしてみてください。

また、キーボードの位置も合わせて紹介します。慣れないうちは記号の意味はわかったけど、キーボードのどこにその記号あるかわからない!という方もいらっしゃると思うので、これまた参考になれば幸いです。

キーボード上部、数字キーのところにある記号たち

キーボード画像はMacBookのものです。ですが、日本語キーボードの配列はWindowsやMacなどは関係なく一緒になるので、お手持ちのキーボードに置き換えて参考にしてもらえばと思います。

!(イクスクラメーションマーク びっくりマーク)

キーボード入力の仕方は、Shiftキーと数字の1
びっくりマークという言い方のがしっくりきそうな記号。Rubyではnot演算子といって否定する意味で使われます。他のプログラミング言語でも否定系で使われることが多いです。

""(ダブルクォーテーション 2重引用符)

キーボード入力の仕方は、Shiftキーと数字の2
Rubyでは文字列として認識させるために使います。1だと数字。"1"だと文字。みたいな感じですね。他の言語でもそういう風に使われていることが多いと思います。

# (イゲタ)

キーボード入力の仕方は、Shiftキーと数字の3
井桁(いげた)と呼びます。筆者もかつてシャープ記号と勘違いしていました。シャープは♯で、イゲタは#と微妙に角度が違います。

Rubyでは、コメントを書くときや、さきほど出てきた変数展開時に使います。

name = 'とっしーぱんち'
puts "こんにちは¥n #{name}"

結果: こんにちは
         とっしーぱんち

$ (ダラー)

キーボード入力の仕方は、Shiftキーと数字の4
アメリカドルの記号はダラーと呼ばれれます。Rubyではグローバル変数というどこからでも参照できる変数を表す記号として使われます。

% (パーセント)

キーボード入力の仕方は、Shiftキーと数字の5
パーセント記号は、Rubyでは徐余として使われます。割って余りがいくつか、の余りの数値を出すものですね。

& (アンパサンド アンド)

キーボード入力の仕方は、Shiftキーと数字の6
アンドと呼ばれことが多いような気もするこの記号は、if文の条件判定のときに使われることが多いです。

x = true
y = false

if x && y then
  puts '両方Trueのとき'
else
  puts '両方Trueじゃないとき'
end

結果: 両方Trueじゃないとき      

'' (シングルクォーテーション 1重引用符)

キーボード入力の仕方は、Shiftキーと数字の7
ダブルクォーテーション同様文字列として認識させるために使います。ダブルクォーテーションとの違いは、書いた文字列が変換されず、そのまま出力される点です。

name = 'とっしーぱんち'
puts "こんにちは¥n #{name}"

結果: こんにちは
         とっしーぱんち

-(マイナス、ハイフン)

キーボード入力の仕方は、英数入力で0の右にあるキーを押す。

減算する時の記号マイナス。ハイフンとも呼びます。プログラミングでハイフンとして使う場面は多くはないですが、単語と単語をつなぐ時にアンダーバーの代わりにハイフンを使って書くケバブケースという記法があります。

\ (バックスラッシュ)

スラッシュは馴染み深いですが、プログラミングしてると結構登場してくるのがこのバックスラッシュです。\nのように改行を文字で表すときに使います。

ややこしいのが、Macだと¥と\が明確に区別されるのですが、Windowsだとフォントによってどちらも¥として表示されます。Windowsでプログラミングしてる方は、半角の¥つけとけば大概大丈夫だと思いますが、Macで¥nといれると、これは改行文字とは認識されません。

Macの場合はOption+¥でバックスラッシュ文字が打てるのでこれを使うようにしましょう。(地味にハマった人

キーボード右側の記号たち

; (セミコロン)

キーボード入力の仕方は、英数入力でLの右にあるキーを押す。
Rubyでは、1行内に複数命令を書くときに1命令の区切りとして使います。

puts("こんにちは"); puts("とっしーぱんちです")

: (コロン)

キーボード入力の仕方は、英数入力で;セミコロンの右にあるキーを押す。
コロンはhttps://みたいにURLとして使われる文字ですね。Rubyだとスコープ演算子として利用されます。
どっちがコロンでどっちがセミコロンなのか。慣れないうちは混同しがちです。

`(グレイヴ・アクセント バッククォート)

キーボード入力の仕方は、英数入力でPの右にあるキーを押す。
個人的にはバッククォートと呼んでいるのですが、グレイヴ・アクセントという読み方でも同じ意味になるそうです。後者のがなんか響きがかっこいいですね。

Rubyでは、コマンドとして実行されて、その結果が文字列として返ってきます。コマンドってなんぞや?というと、Windowsの場合はコマンドプロンプトで実行できる命令。Macだとターミナル.appで実行できる命令たちです。どっちにもある共通のコマンドで書くとこんな感じになります。

# echoというコマンド結果を出力しています。
puts `echo hello`

結果:hello

. (ドット)

キーボード入力の仕方は、英数入力でMの2個右、<の右にあるキーを押す。
小数点で使われる記号はドットとか読みます。慣れないうちは点のやつ、とか言うかもしれません。Rubyでも他言語でもオブジェクトのメソッド(Rubyの場合はレシーバ)を呼び出すときに使われます。

_(アンダーバー/アンダースコア)

キーボード入力の仕方は、英数入力で右Shiftキーの左にあるキーを押します。
Rubyでは変数名やメソッド名に使われることが多いアンダーバー。アンダースコアと呼ぶ場合もあります。

(空白文字 スペース)

スペースキーで入力できる空白文字。コードを見やすくするために使うことが多いのですが、間違って全角スペース打つと、プログラム実行時に謎のエラーが発生するので注意です。空白なだけに、目に見えづらく間違ったことに気づきにくいところも厄介度高め。

テキストエディタの設定で全角空白文字を表示してくれる機能がついているので、そういった便利機能を使って単純ミスを防いでおきたいです。

Rubyの日付操作 コード集

Rubyプログラミング、日付に関して使いそうなものをまとめました。

Ruby標準ライブラリが提供している機能のみを利用していますので、Rubyさえインストールすればコードをそのまま使うことができます。とはいえ手元で動かして試したのはRuby3.2のみです。

今日は何日?

# 今日
today = Date.today
puts today

今日は今年の何週目?

# 何週目?
puts '今週は' + today.cweek.to_s + '週目'

今日は何曜日?

# 何曜日?
week_days = %w[日 月 火 水 木 金 土]
puts '今日は' + week_days[today.wday] + '曜日'

今月末は何日?

# 月末は?
end_of_month = Date.new(today.year, today.month, -1)
puts '今月末は' + end_of_month.day.to_s + '日'

今日から年末まであと何日?

# 年末まで何日?
end_of_year = Date.new(today.year, 12, -1)
puts '年末まであと' + (end_of_year - today).to_i.to_s + '日'

今日は令和何年?

# 令和何年?
first_time = Date.new 2019, 1, 1
reiwa = today.year - first_time.year + 1
puts '今年は令和' + reiwa.to_s + '年'

もっと便利、使いそうなコードあれば、随時募集中なので、ぜひぜひ教えてください。

MacのターミナルからVisualStudioCodeを起動する

インストールするだけだと、ターミナルソフトからVisualStudioCodeを起動できません。解決方法は公式ページに方法が載っていて

code.visualstudio.com

  • VisualStudioCodeの画面でcmd+shift+P
  • コマンドパレットにShell Command: Install 'code' command in PATHを入力
  • ターミナル再起動

これでターミナル上で

$ code 

と入力しエンターキーを押すだけで起動できるようになります。Macだとターミナルから移動したりファイル作るのが便利に感じていたので、ターミナルを起点としやすくなって地味だけど嬉しい改造です。

おすすめプログラミング言語 4選

プログラミングを学びたい。こう思い立ったときにどの言語を学ぶのが良いか?ということで当ブログでは独断と偏見で4つ選びました。選定基準は成果物、学習効果、習得難易度の3つ。それぞれの定義は

  • 成果物  ・・ 何ができるか
  • 学習効果 ・・ 学習者のプログラミング能力を高める
  • 習得難易度・・ その言語を学ぶのにかかる時間の長さ

としています。あと、主観で決めています。(大事

JavaScript

成果物  :★★☆
学習効果 :★☆☆
習得難易度:★☆☆


まずおすすめするのがJavaScript。JavaScriptを学習する利点は「ブラウザで動作の確認と見た目を動かしながら作業できること」に尽きます。成果物を確認しながら学習を進めるというのは初心者にとってわかりやすく、眼に見える成果はモチベーションの維持にもつながります。「プログラムを実行すると、見た目が変化する」プログラミング体験としてシンプルで気持ち良い特徴です。

C#

成果物  :★★★
学習効果 :★★☆
習得難易度:★★☆


次はC#。このブログで取り上げてる機会はないのですが、C#を学ぶことでできるようになる成果物の種類として、Windowsアプリ、Webアプリケーション、ゲーム制作など最も応用範囲が広い言語です。特に作りたいものがはっきりしていないままとりかかる場合、間口の広いC#を選んでおくのがおすすめです。


Swift

成果物  :★★☆
学習効果 :★★★
習得難易度:★★★


Macを所持する人限定ですが、Swift言語をお勧めします。ひとつの言語で全てのApple製品のソフトウェアを制作することができるのが最大にして唯一無二の特徴でしょう。学習効果と習得難易度がMAXになっていますが、Swift言語を学ぶ教材として、英語教材が多いためです。ただ、長期的にプログラミングを学びつづけていく、という過程の中で、最新の動向や幅広い情報を得るには英語圏の情報が欠かせないため、英語を学びながらプログラミングを学ぶという点で非常によい教材であるため、学習効果は3としています。

Ruby

成果物  :★☆☆
学習効果 :★★★
習得難易度:★★☆


最後にRubyです。目に見える成果を出すものとして、Railsなどが挙げられますが、JavaScriptに比べると最初の成果を出すまでの工程が難しく感じるので星ひとつとしています。ですが、プログラミングテクニックを学ぶ、という点においてはRubyは非常に有用です。オブジェクト指向プログラミングといったテクニックはC#、Swiftに移った際にも応用が効くものですし、メタプログラミングやダックタイピングといったテクニックを学ぶことで、プログラムの楽しさのひとつ設計力を磨くことができます。

【Win Mac対応】段階的に選ぶプログラミング用テキストエディタ

今回はプログラムを書くときに使うテキストエディタというアプリケーションについて個人的おすすめを紹介します。Windows,Mac両方の環境向けに紹介

最初の入り口「メモ帳」「nano」

  • プログラム入門向け。
  • プログラム行数は10行程度
  • 機能は文字を入力するだけ

Windowsだとメモ帳。Macだとnanoというエディタが付属されているので、プログラムの最初の最初はこれで十分です。エディタの機能が少ないということは、純粋にプログラムを書くことに集中できるということです。

慣れてきたら「サクラエディタ」「CotEditor」

  • プログラム初級者向け
  • プログラム行数の目安は100行程度
  • 文字の色分け表示機能や、テキストの編集機能が充実。

サクラエディタはWindows。CotEditorはMac専用の無料テキストエディタです。最初から付属していないので各公式サイトからソフトをダウンロードしてインストールしましょう。

sakura-editor.github.io

coteditor.com

プログラムでよく使う{}記号や、ifなどの制御用コード文字の色分けなどをしてくれたり、文字検索や文字置換機能もより使いやすくなりっています。

プログラムを書く、からプログラム開発へ。「VisualStudioCode」

  • 中級者から上級者まで
  • プログラム行数は制限なし。
  • コードジャンプ機能やデバッグ機能など開発効率をあげる機能が豊富

プログラムを書くことに慣れてきたら、Microsoft社が開発、提供しているVisualStudioCodeに切り替えてみるのがおすすめです。

プログラムのデバッグ機能。複数ファイルにまたがっていても目的のコードまでたどりつけるコードジャンプ。ソースコードを管理できるGitHubとの連携など、プログラムを書くに加えて、作業効率UP、バグを見つけるテスト機能などなど、プログラム開発をするために必要な機能が揃っています。

さらに、拡張機能というものを利用して、元々持っているVisualStudioCodeの機能をさらに向上させることができます。拡張機能は世界中の開発者が制作していて日々便利な機能が増えています。これだけ盛りだくさんの機能がありながら、利用料は無料というところがまたすごいですね。

自分にとって効率の良いプログラミング環境というものを、自分流にカスタマイズしながら構築してくという新たな楽しみも生まれます。

azure.microsoft.com

エディタを超えるIDEという存在 「RubyMine」

もう一歩先に行くとIDEというアプリケーションが出てきます。IDEとは統合開発環境ということで、さきほど紹介しVisualStudioCodeとプラグインの機能があらかじめセットになって入っているラグジュアリ感満載のアプリケーションです。ここではJetBrains「RubyMine」という製品をおすすめします。

プラグイン機能もついていますが標準機能の時点で洗練された機能が数多くあり、強力です。今回挙げたアプリケーションで唯一有料アプリケーションですが、初めから用意された高機能はやはり有料ならではなのでしょう。Rubyプログラミングをする場合はRubyMineとIntellijUltimateが対応しています。Rubyだけに特化するならばRubyMineの方が価格が抑えられます。30日間の無料評価版が手に入るので、それで使用感を試しましょう。

RubyMine:JetBrainsによるRuby on Rails IDE

secure.samuraism.com

【プログラミング】フォント選びのコツ oと0の違いを見やすく

プログラミング用テキストエディタとセットで考えておきたいのがフォント選びです。基本的には自分が好きな見た目にするので良いのですが、プログラミングするときのフォントとして押さえておきたポイントを紹介します。





文字の見間違えが少ないこと

プログラムはほとんどの場合、英数字と記号のみで書いていくのですが、見た目に区別つきずらい文字がいくつかあります。たとえば

  • 数字の0(ゼロ)とアルファベットのo(おー)
  • アルファベット大文字のI(アイ)と小文字のl(エル)と数字の1(イチ)と|(バーティカルバー)

などです。このブログの表示上でもアイとエルなんかは、区別つきづらいかもしれないですね。ただ、ブログのような記事の場合は、読み手が人間なので、誤字があっても読み手の方で前後の文脈を推測して判断してくれるのですが、プログラミングの場合は、解釈するのはコンピュータなので、エルはエルとしか認識されずそれがエラーにつながってしまうこともあります。そういうケアレスミスを防止するためにも、これらの文字がはっきりと区別できるようなフォントを選ぶのがよいんじゃないかと思います。

バーティカルバーは普段馴染みの薄い記号なのですが、プログラミングではよく出てくる記号のひとつです。Rubyだとif文やeach文などで使います。 

等幅フォントであること

等幅フォントというのは1文字の幅がどの文字でも同じであるというフォントです。逆に文字の実際の大きさに沿って幅が決まるフォントをプロポーショナルフォントといいます。文字デザインとしての美しさはプロポーショナルフォントなのですが、プログラミングにおいて、文字幅が揃っているほうがコード全体の見通しがよくなるので、これまたミス防止の一環として等幅フォントにしておくのがおすすめです。

ちなみに、Macだと等幅フォントというカテゴリがあるのですが、Windowsの場合は、プロポーショナルフォントにはPという文字がついています。「MS Pゴシック」はプロポーショナルフォント、「MSゴシック」は等幅フォントといった感じです。

最後に見た目の違いを画像で紹介します。

実際どんな感じに違うのか。というのをMacに搭載されいてるフォントで見比べてみました。

Osakaのプロポーショナルフォント

Osakaの等幅フォント

おなじOsakaフォントにも関わらず、かなり見た目が違いますね。なお、わざと見間違いしやすいような文字を散りばめているだけで、プログラム自体は無意味です。等幅フォントの方は、文字の形で違いがわかるように工夫されていて、見分けがつきづらいゼロのような文字には真ん中に斜線が入っていて、アルファベットのオーとの違いをわかりやすくしています。逆にプロポーショナルフォントはデザイン性を重視しているのか、斜線のようなものはなくなっています。特に顕著なのはエルとバーティカルバーと大文字のアイが同じに見えるところでしょうか。


はじめのうちは誰かが書いたプログラムを参考に自分なりのプログラムを書いてみると思うのですが、見たまんま書いてみたつもりなのに動かないといった場合に、単純な文字の打ち間違いなどに早く気づきやすい工夫をすることで能率も上がっていくと思うので、プログラミングをする際にはフォント選びにも気を配ってみるといい感じです。

基本的には以上の2点だけで、文字の見た目なんかは、好みで選んでしまっても全く問題ないので、お気に入りのフォントを見つけてみるのも楽しいと思います。

エディタについてはこちらで紹介しています。

osio-tosimasa.com

【Ruby】Gem「Redcarpet」のソースコード表示に行番号を追加する

前回紹介したRubyGem「Redcarpet」のつづきです。

osio-tosimasa.com

Markdown内にソースコードを埋め込むとGoogle code-prettify用のHTMLを書き出してくれるのですが、行番号を表示するオプションがなかったので、カスタムした事例の紹介です。

試した環境はこちらです。

Ruby 3.2.0
Redcarpet 3.6.0

カスタム用クラスを作成する

まずは独自のHTML生成するためのカスタム用クラスを作ります。やりたいこととしてはlinenumsというオプションをつけたいだけです。それ以外は元々生成してくれるコードとほぼ同一です。#{code}のところはHTMLエスケープしてあげたほうがいいのかもしれません。

class MyCustomRenderHTML < Redcarpet::Render::HTML

  def block_code(code, language)
    "<pre><code class=\"prettyprint linenums lang-#{language}\">#{self.escape(code)}</code></pre>"
  end

  def escape(string)
    string.gsub(/['&\"<>\/]/, {
      '&' => '&amp;',
      '<' => '&lt;',
      '>' => '&gt;',
      '"' => '&quot;',
      "'" => '&#x27;',
      "/" => '&#x2F;',
    })
  end

end

カスタムクラスを使ってHTML出力する

最低限必要な記述は以下の通り。optionsのprettifyはOFFに、extensionsのfenced_code_blocksはONにします。ONにしておかないと、カスタムクラスで定義したblock_codeが呼び出されません。

    options = {
      prettify: false
    }

    extensions = {
      fenced_code_blocks: true
    }

    renderer = MyCustomRenderHTML.new(options)
    markdown = Redcarpet::Markdown.new(renderer, extensions)
    markdown.render(content)

おわりに

余談ですが、Markdown形式でテキストを保存するのが好みです。見出しやリストなど適度に文書内を書式化できるのが便利ですね。

他人様に見せるときはRedcarpetのようなHTML変換ツールがあると、Markdownで保存しておくメリットが広がりますね。 ただHTMLだけだと見た目が寂しいのでCSSを使っておしゃれに飾り付けしたいところです。その辺はまた次回にでも。

【RubyGem紹介】MarkdownをHTMLにする「redcarpet」

今回は、RubyGem「redcarpet」を紹介します。

機能紹介

Markdown記法で書かれた文字列をHTMLに変換してくれます。例を挙げると、Markdownで見出しを意味する#を、h1タグに置き換えてくれます。機能はシンプルですが、シンプルゆえに他の機能と組み合わせやすく使い勝手がよいです。こういうの好き。

インストール

Gemをインストールするときのお馴染み、以下のコマンドでインストールできます。

gem install 'redcarpet'



注意点: Ruby3.2で実行すると以下のエラーがでます。

ruby 3.2: Markdown formatter warns "undefining the allocator of T_DATA class Redcarpet::Markdown"

2023年1月26日時点では、Gemfileに記載してBundler経由でインストールすることで、解消されました。Gemfileには以下のように記述します。

gem 'redcarpet', github: 'vmg/redcarpet'

github.com

基本的な使い方

かんたんなMarkdownを書いて、変換してみます。

require 'redcarpet'

text = <<~EOS

# Title
* list1
* list2
* list3

## SubTitle1
hello redcarpet
EOS

markdown = Redcarpet::Markdown.new(Redcarpet::Render::HTML)
puts markdown.render(text)

これを実行すると、以下のような結果が得られます。

<h1>Title</h1>

<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>

<h2>SubTitle1</h2>

<p>hello redcarpet</p>

Redcarpet::Markdown.new(Redcarpet::Render::HTML)得られるオブジェクトに対してrenderメソッドを呼ぶだけで作れます。簡単。シンプルなだけではなく、Markdown変換時のルールや吐き出すHTMLタグを改変したりなど拡張性もあります。そちらの紹介はまた次回に。

【Ruby】RubyGemsにpassword_cheatsheetを公開しました。

先日RubyGemsに2作目のGemを追加しました。

使い方はこちらのREADMEのまんまです。英語だけど雰囲気でわかるくらいの短さ・・はなず。

説明の通り、ハッシュを渡すとHTMLファイルを吐くだけです。ブラウザで表示するとパスワードは隠されますが、HTMLファイルにはまんまパスワードが書いてあるので他人に公開してはいけないですよ。

用途としては、ブラウザが記憶してくれないWebサイトだったり、ブラウザ以外でアクセスするときパスワードだったりを自分だけが管理、利用するとき用です。

果たしてこのgemに需要があるのか。という問題作なのですが、少なくとも僕には需要がありまして。ポータブルなパスワードファイルが欲しかったのです。あとLiquidとStimulusを使ってなにか作ってみたかった。


興味ありましたら、ダウンロードしてみてくださいね。