残り3ヶ月を切った2018年、そして2019年の目標

転職成功、明日出社。
仕事プライベートひっくるめた今後の2つの目標を書いてみる。

変化を恐れず、受け入れる。

例えばPCの操作環境の変化。
オフィスでも家でもカフェでも公園でもどこでも、環境に左右されることなく、体力十分であれば全力を出せるようにする。
いままではわりと家やオフィスのように、マウスがあってデュアルディスプレイでないとやる気が出なかったりしたが、転職で東京に来ていろんな環境でPCを触ることが増えると思うし、せっかく東京に来たのに閉じこもっていてはもったいないので、ノマドワーキングできればと思う。

他には生活環境の変化などもそうで、いままで自分自身、予定通りに行かなかったり、いつもでないことに出会った時に、精神的に揺らいで弱気になったり、いつもの自分でないことがとても多かった。
周りに影響されないよう変化を恐れず、受け入れて、いつでも自分の力が発揮できるような精神力を身に付けたい。

多くのものを与え、与えられる人間になる

与えるものは、例えば技術的な情報やアドバイスであったり、TPOに応じて必要な言葉(ビジネス的にいえばマネジメント、プライベートでは友情・愛情と形容されるようなこと)など、相手がうれしい楽しいといったプラスの感情になったり利益となるようなこと全般であり、与えられるものも同様である。

ほとんどの人は20代前半までは実生活のなかで与えられることが多いが、30代に近くにつれ与えることが増えてくる。
仕事ではマネージャー的なポジションにつき、プライベートでは家族を持つ人もいる。

そうしたなかで与えるだけでなく与えられ続けるためには、相手のことを深く理解することが必要だし、自分自身が与え続けることも必要である。

目上の人、年下の人すべての人に分け隔てなく与え、与えられる人間になりたい。

もちろん与えるためには私自身にも技術力・人間力といった力が必要であるため、自己研鑽は怠らない。
技術力としては、次のような目標がある。

エンジニアとしての技術力の向上

具体的にはフロントエンドでは

  • Canvas(WebGL)を数式を利用してばりばり書くことができるようにする(自然力学やジェネレーティブアートで用いられるようなアルゴリズムを理解し、実際にプログラムで利用できるようにする)
  • React、Vue.jsに関する知見を高める(このサイトをReactで組み込む)

バックエンドでは、

  • いい加減先延ばしにしてきたPythonを勉強し、AIの知識を身に付ける(簡単なものでいいので、AIを使ったWebアプリをリリースする)
  • ネットワーク・インフラの問題を多く経験し、苦手意識をなくす

また論理的に説明する力も必要不可欠であるため、仕事以外にも次のような形で説明する力を身に付けられればと思う。

  • 本ブログの継続的な更新(週1ペースくらいでできれば)とコンテンツレベルの向上
  • ドットインストールなどのようなプログラミング学習のための動画作成(文章だけでなく手元を見せつつ話して説明できる力を身に付ける)

 

たぶんはじめてブログに今後の目標的なコンテンツを書いたが、やはり文字にすると明確になるしモチベーションもあがる。
今後も継続的できればと思う。

印刷用CSSでよく設定されているパターン

@pageディレクティブでページ全体の余白の調整。
単位はmmがよく利用される。

@media print {
  @page { margin: 5mm; }
}

印刷では、ウェブ上での1ページが複数ページになるため、見出しの途中や画像の途中でページが変わることがある。
以下は表示する行数をコントロールする方法。

@media print {
  p,h1, h2, h3, h4, h5, h6 {
    /* 改ページ前のページ末尾に書かれるべき最低行数 */
    orphans: 3;
    /* 改ページ後のページ先頭に書かれるべき最低行数 */
    widows: 3;
  }
  h1, h2, h3, h4, h5, h6 {
    /* 要素の直後で改ページしない */
    page-break-after: avoid;
  }
  table, img, pre, blockquote {
    /* 要素の途中で改ページしない */
    page-break-inside: avoid;
  }
}

リンク先を表示させたり、略語を示すabbrタグのtitleを表示。

@media print{
  a.link[href]:after { content: " (" attr(href) ")"; }
  a.link[href^="javascript:"]:after, a.link[href^="#"]:after { content: ""; }
  abbr[title]:after { content: " (" attr(title) ")"; }
}

GitでFTPアップロードする手順

git-ftpをインストール

$ brew install git-ftp

インストールできたか確認

$ git ftp

FTP情報を入力(gitで管理しているディレクトリで操作)

$ git config git-ftp.url ftp://<ホスト名>/<該当フォルダまでのパス>
$ git config git-ftp.user <ユーザー名>
$ git config git-ftp.password <パスワード>

コミット後に反映する場合、最初の一回は以下のコマンドを実行(git-ftp.logが生成されていることを確認)

$ git ftp init -v

次回以降は以下のコマンドでデプロイされる

git ftp push

【アーカイブ】Ruby文法メモ

見返すことはないとは思うが、Rubyの文法メモが出てきたので、ここに写しておく。
情報は2014年11月16日時点のものなので、あしからず。

# コメント

=begin
コメント
=end


# rubyはすべてオブジェクト

msg = "hello world!" # 変数
MSG = "hello world!" # 定数
print msg # 改行がない
puts msg # 改行がある
p msg # データの種類がわかる

# メソッド
# ! 破壊的メソッド
# ? 真偽値を返すメソッド

puts msg.upcase # HELLO ~
puts msg # hello ~
puts msg.upcase! # HELLO ~
# ポインタを操作してまう
puts msg # HELLO ~
puts msg.empty? # true

# 配列
arr = [5, 8, 4]
p arr[0] # 5
arr[0] = 3
p arr[0] # 3
p arr[0..2] # [3, 8, 4] // 0~2の要素を取ってくる
p arr[0...3] # [3, 8] // 0~2未満の要素を取ってくる
p arr[-1] # 4 # 最後の要素を取ってくる
p arr[1, 2] # [8, 4] # 1番目の要素から2個分

arr[0...2] = [1, 2] # [1, 2, 4]
arr[1, 0] = [10, 11, 12] # [1, 10, 11, 12, 2, 4]
arr[0, 5] = [] # [4]
arr.size # 要素数
arr.sort # 小さい順にソート
arr.reverse # 逆順にソート
arr.sort.reverse # 繋げられる
arr.push(100) # 配列末尾に100を追加
arr << 101 << 102 # 配列末尾に101, 102を追加

# ハッシュ
sales = {"isaka" => 200, "hirata" => 300}
p sales["isaka"] # 200
# シンボルの書き方 (文字列オブジェクトをキーを使う場合、文字列オブジェクトを使うより早い書き方)
sales = {:isaka => 200, :hirata => 300}
p sales[:isaka] # 200
# ruby1.9からできる書き方
sales = {isaka:200, hirata:300}
p sales[:isaka] # 200

sales.size # 要素数
sales.keys # キーのみ返す
sales.values # 値のみ返す
sales.has_key?(:isaka) # そのキーがあるかどうか


# キャスト
a = 10
b = "5"
p a + b.to_i # 15 to_iはint変換 to_sはString変換

# %記法
s = "hel\"lo"
s = %Q(hel"lo) # ダブルクォーテーション
s = %(hel"lo) # ダブルクォーテーション
s = %q(hel"lo) # シングルクォーテーション

a = ["a", "b", "c"] # 文字列のみの配列
a = %W(a b c)
a = ['a', 'b', 'c'] # 文字列のみの配列
a = %w(a b c)

# if

score = 80
if score > 60
 puts "ok"
elsif score > 40
 puts "soso"
else
 puts "no"
end

puts "ok" if score > 60

=begin

true それ以外(0, ""も含む)
false false nil

=end

a = 1
b = 2
a, b = 1, 2 # 多重代入

# case

signal = "red"

case signal
when "red"
 puts "stop"
when "green", "blue"
 puts "go"
else
 puts "end"
end

# ループ

# 数値オブジェクトのtimes
3.times do |i|
 puts "#{i} : hello"
end

i = 0
while i < 3 do
 puts "#{i} : hello"
 i += 1
end


3.times do |i|
 if i == 1
 break # ループを終える
 next # ループを1段階進める
 end
 puts "#{i} : hello"
end


for i in 0..2 do 
 puts i
end

for color in ["red", "pink", "blue"] do
 puts color
end

["red", "pink", "blue"].each do |color|
 puts color
end

{"red"=>200, "pink"=>200, "blue"=>200}.each do |color, price|
 puts "#{color}:#{price}"
end


# 関数的メソッド
def sayHi(name = "sapporo")
 puts "Hi!" + name
end

def sayHi_s(name = "sapporo")
 s = "Hi!" + name
 s # return sと同意
end

sayHi("tom")
puts sayHi_s()


# クラス
# クラス名は必ず大文字
class User

# クラス変数
 @@count = 0

# コンストラクタ
 def initialize(name)
 # インスタンス変数
 @name = name
 @@count += 1
 end

# ゲッタ
 # アクセサをつくらないと外部からアクセスできない
 def name
 @name
 end

# セッタ
 def setName(newName)
 @name = newName
 end

# アクセサを設定
 # attr_accessor :name
 # ゲッタのみを設定
 # attr_reader :name
 # セッタのみを設定
 # attr_writer :name

# インスタンスメソッド
 def sayHi
 puts "my name is #{@name}"
 end

# クラスメソッド
 def User.sayHello
 puts "class meshod"
 end

end

tom = User.new("tom")
tom.sayHi()
User.sayHello()

# getter
tom.name
# setter
tom.name = "tombo"
tom.setName("tombo")


# 継承
class SuperUser < User

def shout
 puts "HELLO #{@name}"
 end
end


# Timeクラスの使い方
t = Time.now # 今の時間

transition・animationがスムーズじゃないと思ったら

IEやEdge、Androidの一部のブラウザでは:before、:after擬似要素にtransitionやanimationをかけると、その要素がスムーズにアニメーションしなかったり、あるいは周辺の要素に同時にアニメーションを付加していた場合に動きがおかしくなったりする現象が見られることがある。

解決方法は2つあり、

  • transitionの場合にはtransition-propertyをできるだけ限定する(allにしない)こと
  • 擬似要素ではなく素直にdivなどの新しい要素でアニメーションさせること

が挙げられる。
ひとつめはブラウザの負荷を下げるということで納得できるが、もうひとつは擬似要素のほうがレンダリング負荷が高いということだろうか?
普通の要素と擬似要素はブラウザの解釈の仕方が違い(IEではline-heightにremを使うと擬似要素のみバグったりすることもあるので)からくるものなのか?

謎だが、もしお困りの方がいましたら是非試してください。

Dockerのよく使うコマンド

コンテナの起動(-dオプションをつけ、バックグラウンドで起動することが一般的)

$ docker-compose up -d

コンテナの停止

$ docker-compose down

コンテナの停止とそのボリュームを削除

$ docker-compose down -v

ボリュームの一覧表示

$ docker volume ls

ボリュームの削除

$ docker volume rm (VOLUME NAME)

イメージの一覧表示

$ docker images

イメージの削除

$ docker rmi (IMAGE ID)

現在起動しているコンテナの一覧表示

$ docker ps

すべてのコンテナの一覧表示

$ docker ps -a

コンテナの削除

$ docker rm (CONTAINER ID)

任意のサービスで任意のコマンドを実行

$ docker-compose exec (サービス名) (コマンド)

$ docker-compose exec wp-cli wp db export data.sql --allow-root

スマホ・タブレット端末のHTML・CSSコーディングで意識すべきこと

よく知られているものは、input[type=”text”]やtextareaなどでfont-size: 16px以上でないとフォーカスしたときに拡大されてしまうということ。

さらにタブレット用のデザインをつくるときにやりがちなのが、タブレットのときのみPCと同じ見た目になるように同じViewportにする方法。これには副作用があり content=”width=device-width”以外のViewportにしたときに、タッチ関連のイベントが一瞬遅れて反応するようになるから、要注意。
これは昔のタッチデバイスで問題となっていたダブルクリックを判断するための時間を確保するためであり、今はViewportの設定からその機能をON/OFFするようになったためである。

「たいていのことは20時間で習得できる」所感

  • 習得したいスキルをこまかいパーツに分解し、習得者の意見を聞いてエッセンスを掴みつつ、重要な項目のみを抽出する
  • 目標とするパフォーマンスレベルを意識し、速度を意識してスキルの習得に取り掛かる
  • わからない、理解の追いつかないことが出てきても、量をこなすことでわかることも出てくるため、とりあえず量をこなすことも大事
  • スキル習得の効率をあげるアイテムには惜しまず投資する

上記のようなノウハウを徹底すれば、たいていのことを20時間で習得できるとうたう名書。
プログラムのくだりは、すでに基本的な素養があった部分が大きいと思うが、
個人的にそれとなく行なっていたことを言葉にしてくれているので、新しいスキルを習得するときの心構えを見直すことができるよい本だった。
ずっと本棚にしまってあって、読むのに3年かかってしまった。。

Google Maps API サービス変更「Google Maps Platform」(移行期間:2018年 6/11 – 7/16)

この期間中に旧サービスの「Google Maps APIs Standard Plan / Premium Plan」にてAPIキーを使用していない場合、7/17以降には、エラー画面となりGoogle Mapsが表示されなくなる。
※ただし、iframeによる埋め込みについてはAPIキーがなくても利用可能(一般公開されているページに限る)

APIキーは2016年6/22より必須となったが、6/22以前からGoogle Masp APIを利用しているドメインの場合は、コンソールでの警告にとどまっていた。
今回のサービス変更によって2018年の6/11からはAPIキーの使用が強制となり、
移行期間後の7/17以降にはエラー画面となる。

また旧サービスの「Google Maps APIs Standard Plan / Premium Plan」を使用していたとしても、利用規約や価格が変更されているため注意が必要(リクエスト数の大幅な減少など)。

  • Google Maps Platform:月間28,000リクエスト(1日平均933リクエスト)
  • Google Maps APIs Standard Plan:1日25,000リクエスト

利用料の確認・無料枠を超えないように制限をかける方法:
https://www.marie-web.design/blog/google-maps-platform/

参考:
https://internet.watch.impress.co.jp/docs/special/1124760.html
https://ring-and-link.co.jp/dream2000/user/notice/web/2479
https://qiita.com/umeume66/items/823c8188d895f89e42be