ナビゲーション

2914/12/31(月)ご案内

IT系の情報まとめです。

主に実務でアレコレやった備忘録とかガチャガチャ遊んでみたものを置いてます。
データベースブログとして使っているので、専門性の高いものはナビゲーションに、
そうでないものはタグに配置しました。

ご案内

2019年3月いっぱいでサイトレイアウトが変わります。
ブックマークをされている方は変更をお願いいたします。
詳細
IT系サイト・ブログの構成を変更します

ナビゲーション

専門性が高い記事を扱います。
戻る
ポータルサイトへ戻ります。
テクニカル×マガジン
ここです
Linux救急箱
UbuntuとCentOSがメイン。他にも色々さわるかも
開発日誌
アプリケーション関連でよく忘れたりするのでコマンドから書いてます
エンジニアのおもちゃばこ
ツール沼ご用達のアイテムがいっぱい!
初心者AWS
私が初心者!って言いたいだけのAmazon Web Service奮闘記
(非公式)Users's マニュアル
昔書いてたadiary Ver3.x系のオレオレマニュアル。チートシートとも

タグ

後で振り返りやすいようにざっくり分けてます。
多くなったらナビゲーションにスピンアウト!
使い方
このサイトの使い方です
ハード
マイコンとかそういう話はFPGAとかで扱うかもしれない
mapr
ビッグデータを扱うのに超便利!だけど結構クセが強いので超大変!
ポートフォリオ
サイト作りの時に参考にしたいレイアウトやスクリプト等
ツール
スピンアウトしました。エンジニアのおもちゃばこ

筆者


中の人について

2019/01/17(木)docker: Error response from daemon: pull access denied for (コンテナ名)エラーを解決する

docker runをした時の備忘録です。
エラー全文は

docker: Error response from daemon: pull access denied for (コンテナ名), repository does not exist or may


当時nodejsを立ち上げようとしていたんですが、何故か上記エラーに見舞われました。
意訳すると「(コンテナ名)ってimageねーです」って話なんですが、意外と探しても見つからないので、タイトルにエラーメッセージをそのまま載せています。

コンテナ名に気づくかどうかがポイントかなぁ。
エラー時、ずっとnodejsと入れていたので発見が遅れました。
nodejsのdockerhubイメージを使う場合、イメージ名はnodejsではなくnodeです。
docker run -itd --name nodejs node
参考のように--nameでnodejsにしてしまったのが今回ハマった原因みたいなものですが…
やはりコンテナには役割名を与えておかないとダメだと思いました。

2019/01/17(木)Hyper-Vの仮想OSのウィンドウサイズを変更する

リモートデスクトップのウィンドウを引っ張っても画面サイズが自動で変更されたりしないので焦りますね。
デフォルトのサイズで使いやすいならいいんですが、そうではない場合、もういいかなってなりつつも使うか、諦めるか。
CUIだとSSHなりでつなげばいいやって思うんですが、GUIだとそうはいかない。

Hyper-V自体の話はしませんが、Windows8.1以上のProを想定しています。
もしかしたらVagrant+VirtualBox他でも使えるかもしれません。

コマンド全文

codeはVSCodeを使っているからです。vimだったりemacsだったりnanoだったり、読み替えて使ってください。
また、再起動コマンドが入っているので、実行時は注意してください。
code /etc/default/grub
### 以下のように「video=hyperv_fb:1600x900」を追加
# GRUB_CMDLINE_LINUX_DEFAULT="quiet splash
# GRUB_CMDLINE_LINUX_DEFAULT="quiet splash video=hyperv_fb:1600x900"

sudo update-grub
sudo reboot
いちいち再起動しないとリサイズ出来ないのが難点ですが、意図した結果は得られました。

2019/01/16(水)手っ取り早くjupyterの威力を体験してみる

matplotlibで図形が描画できるが、これをCLIで実施してもいまいちピンとこない。
スゴいにはスゴいけど、それっぽく見るならブラウザでjupyterにアクセスしてリアルタイム実行された結果を見れる、というのがインパクトが大きいですね。

jupyterで開発するとそれができます。
いつもどおりjupyter notebookで立ち上げて.ipynbに以下をそのままべた張りします。
# matplot
# reference: https://qiita.com/yoku_/items/11ac4ad1df349095655c
import matplotlib.pyplot as plt
import matplotlib.animation
import numpy as np

t = np.linspace(0, 6*np.pi, num=60)
x = 2.0 * np.cos(t) + 5.0 * np.cos(2.0/3.0 * t)
y = 2.0 * np.sin(t) - 5.0 * np.sin(2.0/3.0 * t)

fig, ax = plt.subplots(figsize=(5, 5))
l, = ax.plot([-7, 7],[-7, 7])

animate = lambda i: l.set_data(x[:i], y[:i])
ani = matplotlib.animation.FuncAnimation(fig, animate, frames=len(t), interval = 1000/30.0)

from IPython.display import HTML
HTML(ani.to_jshtml())
anacondaを使うと標準でnumpyやmatplotlibは入っているのですぐに使えるはず。
なければpipなりで入れてください。conda系の場合はpipではなくconda installで入れるようにしましょう。

2019/01/16(水)ipythonでパスワードを入力してランダムなハッシュ値を作る

ランダムな、というところはちょっと恣意的かな…と反省している次第。
from IPython.lib import passwd
passwd()
ipythonのpasswdを使います。
これを実行すると任意でパスワードを入力するとsha256でハッシュ化された数値が表示されます。
このハッシュ値を使うときちんと認証機能として使えます。

主にjupyterのパスワードトークンを作成する時などに。

2019/01/16(水)jupyterの開発環境をPipfileにまとめてみる

あくまで一例です。
mylib/snippet/pythonの実行環境を想定しています。
[[source]]
name = "pypi"
url = "https://pypi.org/simple"
verify_ssl = true

[dev-packages]
isort = "*"
pyformat = "*"

[packages]
jupyter = "*"
ipyparallel = "*"
jupyterlab = "*"
pathlib = "*"
pandas = "*"
nbextensions = "*"
matplotlib = "*"
bash-kernel = "*"
jupyter-contrib-nbextensions = "*"
py-d3 = "*"
ipywidgets-server = "*"
eel = "*"
selenium = "*"
pythreejs = "*"
pyformat = "*"
isort = "*"
ipython = "*"
ipykernel = "*"
scrapy = "*"

[requires]
python_version = "3.7"
使い方は、pip install pipenvでpipenvコマンドを使えるようにして、pipenv installでvirtualenvの環境が作れます。
このPipfileはpython3.7.2で作っているので、バージョンさえ合わせてもらえば同様の環境ができるはず。
なお、Pipfileの使い方は黒いpythonにまとめてます。

2019/01/16(水)Webスクレイピング対策と、scrapy-splashで対策の対策をする

滅多にない話ですが、HTMLをimportすることで動的なコード作成ができます。
サーバーサイドで生成するのでソースのぶっこ抜きをされてもページを大量に作るのは非常に大変。
描画をJavaScriptにやらせれば並のスクレイピングツールからコンテンツを守ることが出来ます。

from IPython.display import HTML
from pathlib import Path

codes = '''
<!DOCTYPE>
<HTML>
HTML要素として
<div id="canvas_inner"></div>
<script>
    document.getElementById("canvas_inner").innerHTML = "inner_Override";
</script>
</HTML>
'''
HTML(codes)
開発・デバッグはjupyter notebookでやると楽です。

それでもスクレイピングができる

要はJavaScriptが動いた後の状態が取れればいいわけです。
手っ取り早いのはSeleniumなどブラウザエンジンを使うことと、pythonに限った話だとscrapy-splashというものがあります。

2019/01/14(月)adiaryがwindowsのローカルでも実施できるようになってました【Ver3.20】

Windowsでadiaryを動かすまでの手順にも書きましたが、これはちょっとした革命ですよ。
今までperlやcgiの環境を作ってアレコレ頑張ってたんですが、その必要がなくなりました。
ダウンロードしてインストーラを実施するだけで全部やってくれるこの手軽さ、まるでWordPressのようです。
adiaryもここまで進化したんだなぁ、と思うと感無量ですよ。

これの何がスゴいって、今まではテストブログをお借りしてアレコレやってたのが不要になりました。
なんだかんだで心が痛かったんですが、動かしているサーバーの環境に依存していたらヤなので、バグ報告時に使うようにしていたのです。*1

なので、少なくともインストーラーを使った状態の環境だと誰でも再現も簡単に出来るはずなので、今後は積極的に活用していこうと思います。

*1 : adiaryのdockerコンテナを作ればその問題も解消するんですが、非公式で作った環境なので適切な環境だと言いはるのもおかしいと思ってます。

2019/01/14(月)【2019年版】人気のプログラミング言語から比較する、15年選手が見た初学者向けプログラム勉強とスキルレベル考察

もう耳タコの話題かもしれませんが、時代を追いかけるのは大事。

Swiftがトップ10入り、Pythonは3位から4位へ--10月TIOBEの人気言語ランキング - ZDNet Japan

上記はニュースサイトの記事ですが、この内容をバカ正直に読んでると最新情報に遅れます。
とりあえず現時点でどうなっているのか、きちんと把握しましょう。

PYPL PopularitY of Programming Language index

執筆時点だとpythonがトップになっていたりJavaScriptが上がってたりするので、たとえば三ヶ月ごとに見ておくとSES派遣や請負案件ごとに求められる言語が移り変わったりするんじゃないかと邪推もできそうです。
実際はワールドワイドな話なのでそこまで簡単な話ではないんですが、技術系の勉強会でトレンドを追いかけるだけでも意味はあるんじゃないでしょうか。

Q.初心者あるある「どの言語を勉強すればいいですか」

A.自力がつけば、初めて学ぶどの言語でも一通り出来ます。

後述するように、言語が難しいんじゃなくて目的別にアプリを作る時の難度があります。
単純にifやforを使ってプログラムを書くだけなら★8ぐらいあれば一応プログラミングの仕事ができます。

★1:まず最初はHTML+JavaScript

初心者だと書いたコードがすぐに動けばいいはずなので、アルゴリズム(四則計算、ifやswitchなど条件文、forやwhileなどループ)を勉強するならJavaScript一択です。
環境構築を考えず、ブラウザで開けばプログラムが動く経験ができます。

★8:プログラムを動く仕組みを学ぶためにpython

とりあえずforまで分かったら次は使えるものを作りましょう。
恐らく、JavaScriptで出来たことはPythonでも出来ると思います。

といっても★があっという間に上がっているように、今まで気にしなくてよかった環境構築という作業をしなければならず、環境構築を行うために大変な作業を行う必要があります。
Pythonの言語を理解するのではなく、pythonでHello, Worldが動くようになるまでの工程を学びます。

★11:ブログを書きたいならPHP

厳密にはWordPressを学ぶ必要があります。そのためにPHPを理解する必要があります。
この時、JavaScriptをPHPで書くという経験をするはずです。
つまりPHPを書くためにはJavaScriptを知る必要がある事を学びます。

PHPが動くようになると、PHPで書いたコードをブラウザで確認するようになるでしょう。
ここまで出来たら脱:初心者だと考えても良いでしょう。

★18~★52:ShellScriptで自動化・コマンドプロンプトを学ぶ

星の幅が広いのは、ここに来てsshという存在を知ることになるからです。仮想化という言葉や概念を理解していない状態ですので、sshはめちゃくちゃ難しい。
ここにきてサーバー・クライアントという概念を理解しないと次のステップに進めません。
そして、この概念があまりにも難しすぎて大体の人が挫折します。

★53~89: プログラミングっぽい言語・Javaでオブジェクト指向を学ぶ

サーバー・クライアントのうちサーバー側をがっしり作り込んでいきます。
Javaはフレームワーク設計に煩すぎるぐらい煩いので、何度もイラッ☆と感じることでしょう。

とはいえ、この段階でしっかりフレームワーク・ライブラリという概念を理解しておかないとプログラマーの第一線で一緒に働こうという気にはならないのです。
  • オブジェクト
  • クラス
  • メソッド
  • カプセル化
  • ポリモーフィズム
  • オブジェクト指向プログラミング
これらが出来たら脱・初級者です。
とはいえ、まだまだなのでこれからも勉強を怠らなければ第一線でも戦えると思います。

★90:githubで公開されているライブラリのソースコードを読む

プログラマーの仕事は人様が作ったプログラムを解析する作業がほとんどです。
プログラムを解析して今風に合わせたり、たとえばPythonで作ったものをJavaScriptに作り変える、なんて事もあります。
大きな話になれば、古くから動いていたシステム(CobolやPerl)を新しいものに作り変える(JavaやRuby)とかもありました。
普段私が悲鳴を上げていますが、ぶっちゃけMaprみたいな分散処理システムなんてまだ優しい方です。

宣伝でもなんでもないんですが、adiaryのgithubなんかは読みやすいです。
このレベルになった人なら普通に読めると思いますよ。
試しにオリジナルテーマを一つ作ってみるとすぐに理解できるでしょう。
テーマ開発マニュアル - adiary開発マニュアル

★106:IoTデバイスや各APIサービスからデータを取ってグラフ化したものをWebで公開するサービスを作ってみる

このレベルになるとgithubを使いこなしていると思います。
個人的にツールやライブラリの使い方が分かっている事を★レベルに加算しているつもりはありませんが、IT系の人事面接などではツールの名前を並べるだけで採用になる(実話)なので知っておくに越したことはないです。

ちなみに、このブログの想定読者はこのレベルです。
タイトルは分かりやすいように具体的にしましたが、要するにサービスを作れるか?という話をしていまっす。
実際に作るならRubyかGolangベースにJQueryでグラフを作るのが楽かなぁ、もっといいライブラリがあるかもしれません。
Jupyter+pyThreejsで楽出来ないか、試行錯誤中です。

これ以上

スーパーエンジニアコースとマネジメントコースがあります。
どちらに進むかは本人の希望・周りの希望・案件状況などによります。

このブログでは比較的マネジメント寄りの話をしています。
私がそっち側の人だからですが、【オンラインハンズオン】Blenderで作ったモデルデータ(.dae)をICSのThree.jsの入門サイトを教材にアニメーションさせるところまでのような凝ったライブラリの話もしているので一応開発やってますよアピールを。*1

*1 : Three.jsやJQueryの話に限れば、アレってフロントエンドエンジニアの範疇?デザイナーじゃないんですよね多分

異端のエンジニアリング

ぶっちゃけ、こんなプログラミングスキルなんてなくても、便利なサービスはいっぱいあるんだからそれらを組み合わせてユーザーに価値を産ませられればいいので、プログラミングに拘る必要はないと思います。
一昨年「ノンプログラミングでサービスを作る」をガチでやってたので思いますが、システムを作るのにプログラムが必要な時代はもう終わってます。
一昔前は(今も?)プログラムも書けないシステムエンジニアはバカにされていましたが、昨今はむしろ逆にサービスも作れないプログラマーがバカにされる時代になってきてるんじゃないかと思います。

プログラミングに挫折したエンジニア希望の方は、こういったアプローチでエンジニアリングに関わってみるのも一手だと思います。

2019/01/14(月)【オンラインハンズオン】Blenderで作ったモデルデータ(.dae)をICSのThree.jsの入門サイトを教材にアニメーションさせるところまで解説

確かにJavaScriptは専門だけど、Three.jsはそれ以上に沼だった。
はじめてangura-jsとかTypeScriptの話をした時の気分でした。
そもそもフロントエンド系というかデザインの話なのでますます管轄外というか…うん。

元々はpythreejsというpipで入れられるパッケージが合ったから使おうと思ったぐらいだったんですが、これが思った以上に沼だったので本家Threejsを使おうとしたら、これがなんとまぁアレな挙動だったので、その辺りの備忘録と共にまとめておきます。

ブラウザのセキュリティ制限について

具体的にはChrome。
chromeをローカル実施する場合、 cmdで"chrome.exe(path)" -allow-file-access-from-filesのオプションを加えないとHttpRequestが実行されないみたいです。
中身は見てないので分からないんですが、たぶんThreejsのコアでここに該当する何かをやっているんでしょう。
alertやconsole.logは動くのでそういう事だと思ってます。

サンプルサイトがわかりにくい

301 Moved Permanentlyにクイックスタート的にソースコードまで公開された状態で解説してくれていますが、結局の所何が何だか分からないまま、とりあえず動くソースを使っているというのが実情ではないでしょうか?
今でこそ理解できたので使えるようになり、そのおかげで純正の状態を使うよりはよっぽど楽なラッパークラスだと思いますが、それでも分からんモンは分からんのですよ。

あまりにも意味がわからなすぎて、結局後述の本を買いました。
買って一巡するだけではちんぷんかんぷん、写経してようやっと何となく理解し始めました。
その中で掲題の通りBlenderで作ったdaeファイルからレンダリングを任意に差し替えてアニメーションをさせることを目標にします。

結論(TL:DR)

load()でdaeファイルを読み込んだらcolladaオブジェクト.scene以下に必要なものが全部入ってる。
必要なものをTHREE.sneceに書き写すコードを追加すれば良い。
メッシュ
load().scene.children[1].children[0]
アニメーション
load().scene.animations
load()はdaeファイルを読み込んだcollada形式のオブジェクト。以下colladaとする。

続きを読む

OK キャンセル 確認 その他