Programming is Attitude, Not code.

プログラミング学習ブログ

Macの起動音とThe Beatles

f:id:shiro-tamaki:20201230124901j:plain
出典:PhotAC

今回は、プログラミングを行う上でなくてはならないモノ。日々お世話になっている、
大好きなAppleMacにまつわるお話です。

Macの電源を入れたときの「ジャーン」という起動音

ご存知の方も多いかと思いますが、macOS Big Surになり、2016年以来、世界一有名な起動音が復活しました。(Windows派の方すいません)
この起動音、実はあのザ・ビートルズの名曲「ア・デイ・イン・ザ・ライフ 」から着想を得て制作された音のようです。 1980年代後半〜1990年代にかけて、Appleサウンドデザイナーとして勤務していたジム・リークス氏という方が制作に携わり開発。下記、米メディアCNBCのインタビューで語っています。
また、この起動音ですが商標登録もされているそうです。

スティーブ・ジョブスは、ビートルズ好きでも有名ですが、
こういったこと知ると、もうAppleから離れられなくなりますね。
ボブ・ディランとかもどっかに隠れてたりしないかなぁ…。

初期のMacintosh Quadraから搭載されたそうです。

4:20ぐらいから流れます。しかし、ここはぜひとも最初から聴いていただきたい!

[Jim Reekes: The Apple sound designer who created Sosumi]
ジム・リークス氏インタビュー。他にもカメラのシャッター音などについても話されてます。
Meet the man who created Apple's most iconic sounds — Sosumi, the camera click and the start-up chord

 

Git-itのインストール手順 〜ループとリライトしないために〜

Git-it Git/GitHub学習アプリケーション

f:id:shirotamaki:20210107013334p:plain

Git、GitHubを学習する際にお世話になったこちらのアプリケーション。

下記のサイトより、インストールが可能となっていますが、
今回は、CLIからの方法でインストールする手順を書きたいと思います。

初学者あるあるなのかは分かりませんが…、
どうもまだCLI操作がうまくいかず、インストールにだいぶ時間を取られてしまいました…。

素直にzipファイルからインストールすればいいだけなのですが、
ターミナルを起ち上げ、「バシッ」とコマンドを決めインストールする姿に憧れ、トライしてみました。

そんな僕と同じようなCLIビギナーに、こちらの情報がお役に立てば幸いです。

f:id:shirotamaki:20210107012430p:plain
出典:いらすとや


インストール先はこちら

git-it-electron(CLIはこちらから。)
github.com


git-it-electron(zipファイルはこちらから。) github.com

インストール手順

環境

WindowsLinuxでも利用可能のようです。

1. ターミナルを起動させる。

まず、お使いのターミナルを起動させホームディレクトリへ移動してください。

2. git cloneする。

上記のURLにアクセスし、下記のHTTPSを選択しコピーする。

f:id:shirotamaki:20210106235022p:plain

コピーしたHTTPSを、引数へ指定するため以下のように記述します。

$ git clone https://github.com/jlord/git-it-electron.git

これでインストールは完了です。

3. 中身を確認する。

以下のディレクトリが作成されています。

$ ls
git-it-electron

4. git-it-electronへ移動する。

$ cd git-it-electron

5. npmをインストールする。

で、ここからが私が詰まったポイントです。
アプリケーションは無事にインストールされたようですが、どうやって起動するのか? ここでだいぶ悩みました…。
GUI上のFinderからディレクトリ内を確認し起動できるアプリケーションを探したのですが見つからず…(zipファイルでインストールした場合はアイコンが出現します)

色々と調べた結果、Node.jsが必要とのことでした。

Node.jsとはサーバサイド側で動くJavaScriptで、新たにnpm(Node Package Managerの略)をインストールする必要がある。とのことでした。

Node.js とは
Node Package Manager の略。 JavaScript 系のパッケージを管理するツール。 必要とするパッケージをインストールする際、依存するパッケージもまとめてインストールしてくれる。 ライセンスは Artistic License。GPL に似ているが、改造版を再配布する際に名称変更が必要な点が異なる。 npm パッケージを集めたリポジトリ (npmjs.com) が運営され、40万ものパッケージが登録されている。 引用:npm入門 - とほほのWWW入門

以下のコマンドを入力しNode.jpをインストールします。

$ npm install

インストールされているか確認する方法。

$ npm -v
6.14.4

6. npmを使い、アプリケーションを起動させる。

ここまで来たら後は起動させるだけです。 以下のコマンドを入力。

$ npm start

成功した場合、以下の画面と共にアプリケーションが起動します!

f:id:shirotamaki:20210107012222p:plain

終了したい場合は、ctrl + C

あとは、手順に沿って、Git/GitHubの学習を進めることができます。

アプリケーションの内容ですが、
Git、GitHubの基本について、手順を追って手を動かしながら学ぶことができ、最後はプルリクエストを実際行うところまで学習できます。

Git、GitHubを始めたばかりの人から、しばらく触ってないなーと復習したい人まで、早い人だと1時間、平均3〜4時間程度で学べるそうです。(僕はだいぶかかりましたが…)

気になった方は、ぜひ一度チャレンジしてみてください!




f:id:shirotamaki:20210107010319j:plain
出典:PhotAC

インストールでエラーがループしまくり…

コードをリライトしまくった1日...

こんな日も何だか楽しくなってきたのは、成長した証だと思いたい。

そんな、ループとリライトしまくったときはこの曲を!!
最後までお読みいただきありがとうございました!!!

youtu.be

youtu.be

プログラミング初学者のためのツール20選

f:id:shiro-tamaki:20201229182251j:plain
出典:photAC

フィヨルドブートキャンプに参加し早10日。 カリキュラムを通して学んだことや、実際に使ってみて「便利だな〜」と思った各種ツールを、2020年という事で「20」に絞りご紹介。20選すべて無料で利用できます。
Webの広い世界の入口にようやく立てた感じですが、初学者の方の参考になれば幸いです。

使用環境

Chrome拡張機能

WhatFont

Webサイトで表示されているフォントの詳細情報をみることができる拡張機能。Webページ制作において、参考にしているページのfont-size、font-familyなどを知る上で役に立ちます。
WhatFont - Chrome ウェブストア

ColorPick Eyedropper

Web上のページやロゴ、ヘッダー画像などの色コードを調べたい時に使える拡張機能です。
ColorPick Eyedropper - Chrome ウェブストア

GoFullPage - Full Page Screen Capture

Chromeで開いているWebページ全体のスクリーンショットを取得することができる拡張機能。相手側(メンターの方等)にページ全体の内容を共有したい時に役に立ちます。
GoFullPage - Full Page Screen Capture - Chrome ウェブストア

Create Link

そのページのリンクをMarkdown形式でコピペしたい時に便利です。通常、ページタイトルとURLをそれぞれコピーしてから、Markdowon形式で [hogehoge](http://piyopiyo.ne.jp) と記述すると思いますが、こちらを用いれば、この一連の動作をたった2回のクリックのみで行うことができます。 Create Link - Chrome ウェブストア

Google翻訳

プログラミング学習において避けては通れない英語。特に英文を翻訳する時に利用しています。
Google 翻訳 - Chrome ウェブストア

Google Directionary

同じくGoogleから出ている辞書ツール。こちらの方は単語をクリックすると、ポップアップで簡易的な意味や発音を確認できます。「これどういった意味だったかな〜」と、本格的に辞書を引くまでもない時に利用しています。
Google Dictionary (by Google) - Chrome ウェブストア

Evernote web Clipper

ノートアプリの定番Evernoteへ切り取って保存できます。気になった記事はとりあず切り取ることを習慣にしています。
Evernote Web Clipper - Chrome ウェブストア

UI Build Assistand

YouTuberのしまぶーが開発したUI構築に便利な拡張機能。HTML要素にbackground-colorとoutline のCSSを付与し、レイアウトを作るときの補助として使えます。ページ全体のUI構築をザックリと知りたい時に利用しています。
UI Build Assistant - Chrome ウェブストア

Wappalyzer

表示中のWebページで利用されているソフトウェアやサービス、フレームワークなどを一覧表示してくれます。気になったWebページで、何が使われれているのか知りたい時に利用しています。
Wappalyzer - Chrome ウェブストア

 

アプリケーション編

Alfred

便利なランチャーアプリケーション(アプリを簡単に呼び出すための機能)。検索欄に起動したいアプリケーションの名前を入力することで、該当する候補を表示でき、そこから一発でアプリケーションを起動できます。
Alfred - Productivity App for macOS

Clipy

プログラミングコードを編集する中で多用されるコピペ作業ですが、過去にさかのぼって同じコードを使いたいという場面に便利です。
Clipy - Clipboard extension app for macOS

Mac標準カラーピッカーアプリ「DigitalColor Meter」

前述のChrome拡張機能でも同じような機能をご紹介しましたが、こちらは最初からMacに搭載されているアプリケーションです。個人的にはこっちが好み。
Mac用Digital Color Meterユーザガイド - Apple サポート

Skitch

切り取った画像に加工(コメント、矢印、囲いなど)を加える事ができるツール。相手側(メンターの方等)に情報をお伝えする時に役に立ちます。
Skitch | Evernote

Gyazo

画像やGIF動画をURLで共有できるツールです。
Gyazo/Gyazo GIF Gyazo - ダウンロード

Record it

デスクトップの指定した範囲を録画してWeb上で共有できます。動画の場合はGyazo GIF(無料版)よりもこちらの方が長い時間録画でき便利です。 Recordit: Record screencasts fast & free! with GIF Support!

CODEPEN

HTML・CSS・JSのソースを共有できるサービスです。打ったコードもすぐに確認できるので学習にも最適です。
CodePen

Boost Note

Markdownを使いメモを取れるアプリケーション。色々とメモアプリは試してはみましたが、今のところコレが一番しっくりきました。
Boost Note - An open sourced markdown editor for developers

VSCode

定番のテキストエディタテキストエディタも色々試してみましたが、初学者の僕にとってはコレが一番使いやすいと思いました。また、Qitta、ブログ、Twitterなどの情報ですが、初学者に人気なエディタで間違いなくトップで名前が上がるエディタなので、VSCode一択で大丈夫だと思います。
Visual Studio Code – コード エディター | Microsoft Azure

iTerm2

Macの標準ターミナルで十分だとは思いますが、カッコいいターミナルに憧れ導入しました。全然使いこなせていないですが...。みようみまねで見た目だけはイケてる感じにして利用しています。 iTerm2 - macOS Terminal Replacement

タイピスト

タイピング練習ソフトといえば、寿司打が有名ですが、個人的にはこちらををプッシュしたい。理由としては、英文の入力コースがあるからです。普段から打ち慣れている日本語とは違い、プログラミングコードは英単語の羅列になります。英単語の入力パターンに慣れる上でもこちらをオススメしたいです。

「タイピスト」Mac App Store

 

プログラミングのおとぎ話

Fairytale of Programming

fairy tale : おとぎ話のような、信じられないほど美しい
意味・使い方・読み方 | Weblio英和辞書



ザ・ポーグス(The Pogues)は、イギリスのロック・バンド。イギリス生まれのアイルランド人ボーカリスト、シェイン・マガウアン(Shane MacGowan)を中心にロンドンで結成された。
出典: フリー百科事典『ウィキペディア(Wikipedia)』




この時期になると必ず聴いている個人的クリスマスソングNo.1

Fairytale of New York

日本ではあまり知られていないこの曲ですが、
本国イギリスでは、毎年クリスマスソング上位を争う定番曲として知られています。



そんなクリスマスに向け、
こんなプレゼントを自分に向けて購入してみました。

f:id:shiro-tamaki:20201221132113p:plain
プログラムすごろく アベベのぼうけん
プログラムすごろく アベベのぼうけん おどろきの上巻 | ダイスケホンゴリアン, 雅彦, 佐藤, 太祥, 石澤, 智子, 貝塚 |本 | 通販 | Amazon



これまた僕の大好きなハードコアパンクバンドBBQ CHICKENSのボーカリストダイスケ・ホンゴリアンがイラストを担当。

open.spotify.com

この「アベベのぼうけん」は物語自体がプログラムによってできている、新しい形式の本です。書かれた手順を丹念にたどり、楽しみながら読み解いていくことで、手順やルールを筋道立てて考える力、つまり「プログラミング的思考」が自然と養われます。そして私達に未来に対する期待や希望、わくわくを与えてくれるのです。言わば、プログラミングとは未来を切り拓く力なのです。
引用:プログラムすごろくアベベのぼうけん 帯解説より

・これからプログラミングを始めたいと思っているあなた
・学習で行き詰まりプログラミングが嫌いになりそうなあなた
・将来お子さんをプログラマーにしたいあなた

そんな、全てのパンクス!プログラミングス!にオススメな、ポップでロックな可愛い絵本です♪



上巻 下巻からなり、ビートルズ赤盤 青盤のように楽しめます♪

f:id:shiro-tamaki:20201221173546p:plain
The Beatles 赤盤&青盤


それでは、今宵もプログラミングのおとぎ話を夢に想い描き、 メリークリスマス!

Programming is Attitude, Not code.

Punk is Attitude, Not style.

"パンクはスタイルじゃない、姿勢だ"

Do It Yourself.

"自分で考え行動を起こす精神、それがパンクだ"

The Clashジョー・ストラマーの言葉です。
当ブログのタイトルは、この言葉へオマージュを込め名付けました。


The Clash - White Riot (Live)

ブログの目的とタイトルに込めた思い

今回、プログラミングに関する情報を投稿していく目的でブログを起ち上げました。
私と同じくプログラミング初学者の方のお役に立てる情報を投稿できればと考えています。

そんな中、数多くあるプログラミング関連のブログと差別化するため、また好きな音楽とクロスさせ投稿することで楽しんで記事をアップできるのではないか?との思いから、

プログラミング ✕ 音楽

を当ブログのテーマにおきたいと思います。

Programming is Attitude, Not code.

"プログラミングはただのコードじゃない、姿勢だ"

プログラミング学習を始めた当初、プログラミングとはただのコードの集まりだと思っていました。
しかし、学びを進める中で、プログラミングとはプログラマーやそこに関わる多くの人たちの思いの詰まった思想でもあり哲学でした。

コードという数字アルファベットを羅列した単なるスタイルではなく、コードで世の中を変えていく、良くしていこうという決意であり 態度そして姿勢なのです。

DIY
自分で考え手を動かさないことにはプログラミング技術は身につかない プログラミング学習を進めていく中で強く感じたことです。

このふたつの思いが、私の中で敬愛するジョーストラマーの言葉とリンクし、そこからタイトルに思いを込めました。

 

来たる12月22日はジョーストラマーの命日になります。

このブログをジョーに捧げます。

ジョー・ストラマー
イングランド出身のミュージシャン。パンクロックバンド「ザ・クラッシュ」のボーカル兼ギタリスト。
出典: フリー百科事典『ウィキペディア(Wikipedia)』

あとがき

最後まで読んでいただきありがとうございます。
個人的な趣味嗜好、感じた思いのままをブログへ綴っておりますことご理解ください。
今後ともあたたかく見守っていただけると幸いです。