ねこさんとへびさんの新人技術ブログ

新人エンジニアのねこさんとへびさんの、技術向上のためのブログです。

Try!Qrunch 始めてみた

Qrunch

新しい技術アウトプットの場として、Qrunchというサービスが始まったので試しに使ってみました。

qrunch.io

最近のQiitaやはてな界隈でのゴミ記事騒動にうんざりしつつ、
そんななか、類似サービスであるQiitaにゴミ記事騒動にのっかるようなタイミングで宣伝をしたQrunchの手法に「何だかなぁ」さも感じつつ、
(タイミングについては偶偶なんでしょうが)
それでも「アウトプットのハードルを徹底的に下げる」というコンセプトに魅かれたので暫く利用してみようと思います。

私のログ一覧
climbfrog.qrunch.io

Qrunchには、「記事」と「ログ」と2つの投稿タイプがあり、
他人に読ませるための「記事」と、自分のためのメモに使える「ログ」が明確に分かれているのが良いです。
こんな弱小ブログでも一応は読み手のことを考えてしまい、推敲したり自分なりに記事を厚くしちゃったりするんですけど、Qrunchのログは全くそういうの考えなくてガンガン投稿できる。連投にも全く抵抗がない。
何故なら「記事」が別にあるから。
ほかの人の役に立たない内容でも投稿していいんだよっていうお墨付きがもらえているからこそ、気軽に書ける。
作業と平行して作業メモを落とせるありがたさよ。

さらにログの本文検索も対応してたり検索機能がちゃんとしているから、ログが溜まったとき過去記事が見つけられなくなることもなさそう。

Qrunchの使い道

Qrunchの意図としては

WordPressはてなブログ」と「Qiita・dev.to」の中間的な存在

だそうですが、私にとっては、

「Trello・Evernote」と「WordPressはてなブログ」の中間的な存在

TrelloやEvernoteは技術に特化しているわけではないので、コードを貼り付けたとき見難い。
またソーシャル要素がほぼ無いので、モチベーションがあがらない。

その弱点を補うのがQrunch。

まだアカウントを取得して2日めですが、さわりは好感触。
けっこう気に入ってます。

Qrunchにログをガンガン落として、内容がある程度溜まったらこのブログに記事を書くよ!

(by へびさん)

100の目標-10月進捗

もう11月ですね。
時が経つのが早すぎて、全然追いつけてないへびさんです。こんばんは。

10月もジム通いに忙しく、なかなか目標消化がはかどってません。
そんななかでもようやく数学に着手しはじめたんですが、テキストの別冊子解答を紛失してしまうというバカっぷりを発揮。
なので先に掃除&断捨離をすることにしましたorz

11月はTOEICの勉強と断捨離でだいたい終わりそう。

晴マーク:完了
曇マーク:進行中
雨マーク:未着手
です。


中国語

日常会話ができるようになる

  • 1. NHKゴガク まいにち中国語ラジオ講座 7月~3月 すべて聴く(進捗:7月済)
  • 2. 書籍「中国語の文法書」読了
  • 3. 中国語のニュースやドキュメントを読む 24本
  • 4. Instagram開設。中国語で日本の紹介をする。24本
  • 5. レッスンを受ける:予算5万円

英語

ドキュメントがスラスラ読めるようになり、仕事に役立てる

  • 6. TOEIC500点
  • 7. TOEIC550点
  • 8. TOEIC600点
  • 9. 書籍「究めろ!リスニング解答力 TOEIC TEST」読了
  • 10. 書籍「キクタン」読了(進捗: Day14/Day56)
  • 11. 書籍「中学英語 レベル別問題集」2周目
  • 12. 英語ニュースを読む 24本
  • 13. Instagram。英語で日本の紹介をする。24本。

技術
スキル向上で昇給を目指す。他の人に解説できるようになる。

WordPress


CakePHP

  • 20.CakePHP 公式サイトのチュートリアルを一読する
  • 21. 読みたい本の管理システムを作る
  • 22. ねこへび勉強会 目標管理システム を作る

Vue.js
  • 23. 公式サイト ガイド欄を一読する
  • 24. 何か作る

JavaScript

RDBMS

iOSアプリ

WEB開発全般

  • 36. 書籍「リーダブルコード」読了
  • 37. 書籍「体系的に学ぶ 安全なWebアプリケーションの作り方」読了
  • 38. 書籍「初めての自動テスト ―Webシステムのための自動テスト基礎」読了
  • 39. WEBアプリ セキュリティについてのレポートを書く

地図

インフラ

  • 45. CCENT問題集 一冊やる
  • 46. CCENT合格

その他

  • 47. Progate 無料分全部 終わらせる(進捗:9コース済)
  • 48. HTML5 MozillaHTML5項目を一読する
  • 49. 興味のあるジャンルのスライドを5本読む
  • 50. 興味のあるジャンルのスライドを20本読む
  • 51. 興味のあるジャンルのスライドを50本読む
  • 52. WebDriverについての紹介記事を読む
  • 53. Dockerでランプ環境を作る

数学

機械学習を始める前に高校数学を復習しておく

登山
体験することで業務知識を得る
  • 56. ハイキング 15回(近所の里山OK)(進捗:4/15)
  • 57. ハイキング 30回(近所の里山OK)
  • 58. 読図講習に参加する
  • 59. オンライン応急処置講習を受ける
  • 60. 山頂でドリップコーヒーを飲む
  • 61. 山頂で調理する
  • 62. 富士山登頂

運動
登山(&美容)のために体を鍛える
  • 63. 5km完走
  • 64. 10km完走
  • 65. 15km完走
  • 66. 450分何かしら運動
  • 67. 1350分何かしら運動(進捗:残1200分)
  • 68. 2700分何かしら運動
  • 69. 5400分何かしら運動
  • 70. ヨガを始める

美容・健康
人らしく生きる。病気にならない。
  • 71. 5キロ痩せる(進捗:ヤセネー)
  • 72. 握力測定器を買う
  • 73. ネイルを気をつかう
  • 74. 美容健康に良い食事を研究する

生活習慣
老後に備え、自分の"資産"を作る
  • 75. 96万円貯金する
  • 77. ブログを60本書く(進捗:残40本)
  • 78. 副収入をつくる
  • 79. 家計簿をつける
  • 80. 週に2回は"料理"する

教養
教養をつけて、大人の会話ができるように。
  • 81. 読書 技術語学、雑誌以外のジャンルの本を15冊読む(進捗:残11冊)
  • 82. 映画を30本見る(シリーズものは1カウント)(進捗:残27本)
  • 83.生物 高校教科書を買ってきて読む
  • 84. 地学 高校教科書を買ってきて読む
  • 85. 憲法の基本書を読み返す
  • 86. 民法の基本書を読み返す
  • 87. 刑法の基本書を読み返す
  • 88. イラストを描く
  • 89. 将棋 もう少し強くなる
  • 90. 手芸を始める
  • 91. 中国旅行

運転技術
苦手意識を克服し、まともな運転ができるように。
  • 92. バック駐車上手くなる
  • 93. 大町、安曇野、諏訪、上田、白馬にそれぞれ一回ずつ行く(進捗:大町、安曇野、白馬済)
  • 94. 新車を買う
  • 95. 高速を利用する

その他
具体的な目標や達成の方法が定まってないもの。
  • 96. ライフログをつける
  • 97. 断捨離
  • 98. ライティング力向上
  • 99. 人を大切にする
  • 100. 朝7時までに起床する

Memo!無名関数と変数のスコープ - PHP

PHPの無名関数の実装は、クロージャが使われています。

クロージャはローカルスコープの外で定義された、引数以外の変数を利用することができます。
引数以外の変数を利用したい場合は、useを使って渡します。

<?php
$greeting = "Good morning";

$greet_nouse_use = function()
{
    error_log("message: " . $greeting);
};


$greet_use_use = function() use ($greeting)
{
    error_log("message: " . $greeting);
};

このコードの実行結果を見てみましょう。
useを使わない無名関数は親スコープの$greeting変数の値を参照できないですし、
使っている無名関数は参照できています。

message:
message: Good morning


クロージャの特徴として、引数以外の変数を実行時ではなく、自分が定義された時点で解決するという特徴があります。
下のコードでは無名関数$greetが定義された時点で変数$greetingの値はGood morning、
実行の時点ではHelloです。
PHPの無名関数はクロージャですから、Helloが代入されたあとに実行された$greet()は、Good morningを出力します。

<?php
$greeting = "Good morning";

$greet = function () use ($greeting) {
    error_log("message: " . $greeting);
};

$greeting = 'Hello';
$greet();

message: Good morning


useには参照渡しが使えるので、実行時点の変数を使いたければ参照渡しにして変数を引き継ぎましょう。

<?php
$greeting = "Good morning";

$greet = function () use (&$greeting) {
    error_log("message: " . $greeting);
};

$greeting = 'Hello';
$greet();

$greeting = 'Good night';
$greet();

message: Hello
message: Good night


もちろん引数と一緒に使えます!

<?php
$greeting = "Good morning";

$greet = function ($name) use ($greeting) {
    error_log($name . ', ' . $greeting);
};

$greet('Hebisan');

Hebisan, Good morning

(byへびさん)

TS!疑似要素でHTML特殊文字が表示されないの!!

疑似要素の::beforeや::afterなどでHTML特殊文字が文字化けしてしまったらどうすればよいか。
結論を先に書くと

  1. HTML特殊文字の数値文字参照16進数表記を調べる(Ex. &#x2600;)
  2. 16進数部分のみ着目(Ex. 2600)
  3. 正確に6桁16進数にする(0埋めしない4桁でも大丈夫です。)(Ex. 002600)
  4. 先頭にバックスラッシュをつける(Ex. \002600)
  5. 変換した文字列を擬似要素のcontentプロパティに指定する(Ex. content: "\002600";)

文字化けで困っている人は上の手順を試してみてください!

以下、もっと詳しく。


前回の記事、
tkstudy.hateblo.jp
で、

f:id:tksptan:20181004184230j:plain

上図のように各目標の左横に進捗度を表す天気記号をつけたかったのですが、CSSにそのHTML特殊文字を書いたら文字化けしました。
そうです、CSSの文字列にHTML特殊文字は使えないのです。

参考:
developer.mozilla.org

HTML特殊文字(アンパサンドで始まりセミコロンで終わるテキストの固まり)の代わりに、Unicodeコードポイントを使用しましょう。


晴マーク(HTML特殊文字:&#x2600; )をUnicodeコードポイントにした記述

ul.moku li.finish:before {
  content: "\002600";
  position: absolute;
  left : 1em;
  color: #ffb03f;
}

晴マークは、この部分ですね。

content: "\002600";

&#x2600; をUnicodeコードポイントに変換する手順は、
冒頭にも書いたように、以下のとおり。

  1. HTML特殊文字の数値文字参照16進数表記を調べる(Ex. &#x2600;)
  2. 16進数部分のみ着目(Ex. 2600)
  3. 正確に6桁16進数にする(0埋めしない4桁でも大丈夫です。)(Ex. 002600)
  4. 先頭にバックスラッシュをつける(Ex. \002600)

この手順で変換すれば、他の文字も表示できるようになります。

■補足1
HTML特殊文字の数値文字参照16進数の調べ方ですが、
個人的にこちらのサイトが一番分かりやすかったです。

HTML特殊文字一覧(数値参照・文字参照) – atomicbox

■補足2
参考:CSSコンテンツを使用したHTMLエンティティの追加
CSSコンテンツを使用したHTMLエンティティの追加 [html-entities] | CODE Q&A 問題解決 [日本語]

■補足3 目標リストに適応しているCSS

ul.moku {
  border: solid 2px #6091d3;
  border-radius: 10px;
  color: #223a70;
  padding: 0.5em 1em 0.5em 2.3em;
  position: relative;
}

ul.moku li {
  line-height: 1.5;
  padding: 0.5em 0;
  list-style-type: none!important;
}

ul.moku li.finish:before {
  content: "\002600";
  position: absolute;
  left : 1em;
  color: #ffb03f;
}

ul.moku li.start:before {
  content: "\002601";
  position: absolute;
  left : 1em;
  color: gray;
}

ul.moku li.yet:before {
  content: "\002602";
  position: absolute;
  left : 1em;
  color: blue;
}

文字コードについてあまり詳しくないので、用語など間違いがあればご指摘いただけると嬉しいです!

(byへびさん)

100の目標-9月進捗と仕切り直し

100の目標を7、8、9月とやってみて、何でこのTo Doをこなしているのか意義が分からなくなりそうだったので、
この目標をこなすことでどうなるか(どうなりたいか)を改めて書き出してみました。
ついでに、効率的でなさそうな目標をいくつか変更しました。
今後も未着手の目標については、適宜変更していこうと思います。

PC版だけですがリストも見やすくしました。
晴マーク:完了
曇マーク:進行中
雨マーク:未着手
です。

9月は生活の変化が激しくて、To Doリストはなかなか捗りませんでした…。
特に何にどれだけの時間をかけたかとか、家計簿とか、そういったライフログをほとんど残せてないのがダメなところ。


中国語

日常会話ができるようになる

  • 1. NHKゴガク まいにち中国語ラジオ講座 7月~3月 すべて聴く(進捗:7月済)
  • 2. 書籍「中国語の文法書」読了
  • 3. 中国語のニュースやドキュメントを読む 24本
  • 4. Instagram開設。中国語で日本の紹介をする。24本
  • 5. レッスンを受ける:予算5万円

英語

ドキュメントがスラスラ読めるようになり、仕事に役立てる

  • 6. TOEIC500点
  • 7. TOEIC550点
  • 8. TOEIC600点
  • 9. 書籍「究めろ!リスニング解答力 TOEIC TEST」読了
  • 10. 書籍「キクタン」読了(進捗: Day7/Day56)
  • 11. 書籍「中学英語 レベル別問題集」2周目
  • 12. 英語ニュースを読む 24本
  • 13. Instagram。英語で日本の紹介をする。24本。

技術
スキル向上で昇給を目指す。他の人に解説できるようになる。

WordPress


CakePHP

  • 20.CakePHP 公式サイトのチュートリアルを一読する
  • 21. 読みたい本の管理システムを作る
  • 22. ねこへび勉強会 目標管理システム を作る

Vue.js
  • 23. 公式サイト ガイド欄を一読する
  • 24. 何か作る

JavaScript

RDBMS

iOSアプリ

WEB開発全般

  • 36. 書籍「リーダブルコード」読了
  • 37. 書籍「体系的に学ぶ 安全なWebアプリケーションの作り方」読了
  • 38. 書籍「初めての自動テスト ―Webシステムのための自動テスト基礎」読了
  • 39. WEBアプリ セキュリティについてのレポートを書く

地図

インフラ

  • 45. CCENT問題集 一冊やる
  • 46. CCENT合格

その他

  • 47. Progate 無料分全部 終わらせる(進捗:9コース済)
  • 48. HTML5 MozillaHTML5項目を一読する
  • 49. 興味のあるジャンルのスライドを5本読む
  • 50. 興味のあるジャンルのスライドを20本読む
  • 51. 興味のあるジャンルのスライドを50本読む
  • 52. WebDriverについての紹介記事を読む
  • 53. Dockerでランプ環境を作る

数学

機械学習を始める前に高校数学を復習しておく

登山
体験することで業務知識を得る
  • 56. ハイキング 15回(近所の里山OK)(進捗:2/15)
  • 57. ハイキング 30回(近所の里山OK)
  • 58. 読図講習に参加する
  • 59. オンライン応急処置講習を受ける
  • 60. 山頂でドリップコーヒーを飲む
  • 61. 山頂で調理する
  • 62. 富士山登頂

運動
登山(&美容)のために体を鍛える
  • 63. 5km完走
  • 64. 10km完走
  • 65. 15km完走
  • 66. 450分何かしら運動
  • 67. 1350分何かしら運動(進捗:残1234分)
  • 68. 2700分何かしら運動
  • 69. 5400分何かしら運動
  • 70. ヨガを始める

美容・健康
人らしく生きる。病気にならない。
  • 71. 5キロ痩せる(進捗:ヤセネー)
  • 72. 握力測定器を買う
  • 73. ネイルを気をつかう
  • 74. 美容健康に良い食事を研究する

生活習慣
老後に備え、自分の"資産"を作る
  • 75. 96万円貯金する
  • 77. ブログを60本書く(進捗:残43本)
  • 78. 副収入をつくる
  • 79. 家計簿をつける
  • 80. 週に2回は"料理"する

教養
教養をつけて、大人の会話ができるように。
  • 81. 読書 技術語学、雑誌以外のジャンルの本を15冊読む(進捗:残11冊)
  • 82. 映画を30本見る(シリーズものは1カウント)(進捗:残27本)
  • 83.生物 高校教科書を買ってきて読む
  • 84. 地学 高校教科書を買ってきて読む
  • 85. 憲法の基本書を読み返す
  • 86. 民法の基本書を読み返す
  • 87. 刑法の基本書を読み返す
  • 88. イラストを描く
  • 89. 将棋 もう少し強くなる
  • 90. 手芸を始める
  • 91. 中国旅行

運転技術
苦手意識を克服し、まともな運転ができるように。
  • 92. バック駐車上手くなる
  • 93. 大町、安曇野、諏訪、上田、白馬にそれぞれ一回ずつ行く(進捗:大町済)
  • 94. 新車を買う
  • 95. 高速を利用する

その他
具体的な目標や達成の方法が定まってないもの。
  • 96. ライフログをつける
  • 97. 断捨離
  • 98. ライティング力向上
  • 99. 人を大切にする
  • 100. 朝7時までに起床する

Memo!シンプルな無名関数の使い方 - PHP

PHPの無名関数は、PHP5.3から導入されました。

無名関数:関数名をつけずに関数を作成する

もっともシンプルな使い方は、変数に関数を代入し、変数の値として実行します。

<?php
$greet = function($_message)
{
    printf("Hey!Hebisan, %s\r\n", $_message);
};

$greet('Who do you think you are?');
$greet('How dare you say that!');
$greet('Shut up!');

$greet変数を指定すると

$greet('Who do you think you are?');

$greetに代入されている関数が実行され、

Hey!Hebisan, Who do you think you are?

が出力される。

無名関数を配列の要素にして、ループでまわすような使い方もできます。
<?php

$functions = array(
    'func1' => function () {
        $message = 'Cut it out!';
        printf("Hey! %s %s\r\n", 'Hebisan', $message);
    },
    'func2' => function () {
        $r = mt_rand(1, 3);
        if($r === 1) $message = 'Good morning.';
        if($r === 2) $message = 'Good afternoon.';
        if($r === 3) $message = 'Good evening.';
        printf("Hey! %s %s\r\n", 'Neko', $message);
    },
);

foreach ($functions  as $key => $func) {
    $func();
}


参考: PHP: 無名関数 - Manual
(by へびさん)

Rpt!富士山登ってみた

9月18日に初めて富士山に登ってきました!
ルートは富士宮ルート。
富士山登頂ルートのなかでは距離がもっとも短いルートです。

f:id:tksptan:20180926185440j:plain

出発!

f:id:tksptan:20180926185545j:plain

だいたい全行程、このような風景。
あまり変わり映えはしないです。

そして山頂へ

f:id:tksptan:20180926185726j:plain

高山病にならないように、大きく息をすって登りました!
体調、スタミナの状態は心配したより全然よかったです。

剣ヶ峰

f:id:tksptan:20180926185955j:plain

f:id:tksptan:20180926190023j:plain

地獄の下山

私は怖がりで歩き方も下手、加えて靴がよくなかったのか、下山を開始した直後からもう足が痛くなってしまいました。
登山の苦しみが10だとしたら下山の苦しみは100。
泣きかけた。
ふつうは登りより下りの方が速いはずが、私のせいで逆の結果に。
同行者に迷惑をかけるし、足がふらふらで何回も転ぶし、最悪でした。

もっと山にいって歩き方やストックの使い方、勉強しないと(泣)
初めて富士山に行く方は、下山に思わぬ時間がかかることがあるので、余裕をもって早めに出発したほうがよさそうです!

ただ山に慣れてなくても普通の人なら普通に歩けると思うのでそんなに心配しないでくださいね~。
私の運動能力が低スペックすぎるんです。

(byへびさん)