north-memo

数学できない方の数学科のブログ、一応デザイナー…なのか…?

今日の進捗

今日の進捗

  • 諸事情からWikiシステムを作りたいと思った(後述)
  • Herokuアカウントをとった
  • vagrantでdev環境を建てた
    • vagrantもVirtual Boxも上手く動かなかったので、インストールしなおしたら動いた

なんでWiki作るの?

ReactやAngularJSやTypeScriptを学んでいる。
学んだことをメモしたいが、本の内容などをブログやQiitaなどオープンな場所に置くのは憚られる。
イントラネットで動くWikiシステムが欲しいと思った。そして、家で見れるとか、特定のPCで見れるだけじゃ面倒なので、好きなときに好きな場所で参照したい。

というわけで、勉強のためにも作ることにした。
Wikiシステムと言っても、ひとまず

  • Markdownを入力する画面があり
  • mdを入力してSubmitボタンを押すと
  • mdをパーサしてHTMLに変換し
  • DBに記事IDとmdファイル、HTMLファイルのパス、更新日時を記録
  • 記事IDを指定すれば、編集できる
  • 僕しか見れないようにログイン機能

があればとりあえず良さそう(欲を言えばきりがないが…)
Wikiというか、Qiitaクローンに近いのかな…。コードはGitHubで管理する

明日やること

  • 明日は飲み会なので作業は難しそう
  • HHKB Lite2 黒を買う

明後日以降やること

日記

DELLのU2715Hというモニターを購入して、昨日届いた。
27インチのWQHDだし、ベゼルも薄いし、とても良い。

会社用にはHHKB pro を使っているが、家では良いキーボードがないので、とりあえずHHKB Lite2を買うことにした。

2016夏期アニメのロゴのフォント(まだ分析途中)

2016夏期アニメのロゴのフォントを生放送で調査しました。
まだまだ途中なのですが、一応公開します。
また途中途中わからなかったところを編集したり、見やすくしたり、気になったロゴタイプを個別記事で上げると思います。
多分、放送されてからテロップも上げると思います。
2016春のアニメのロゴ・テロップもおいおい記事を上げるはずです。

どうぞよろしくおねがいします。

はんだくん

メインロゴはオリジナルロゴタイプっぽい
[保留]handa-kunの部分は分からない

この美術部には問題がある

おそらくオリジナルロゴタイプっぽい

(TBSアニメオリジナルロゴタイプおおいなぁ)

パズドラクロス

おそらくメインロゴはオリジナルロゴタイプ
[保留]真ん中の欧文はなんだろう

D.Gray-man HALLO

ブラックレターは多分オリジナルだろう(もしトレースであったとしても僕は分からない)
[保留]「ディー・グレイマン」は多分筑紫Aオールド明朝Eぐらい?

バッテリー

A1明朝
欧文は小さすぎて分からない
「バ」はいじってある

アルスラーン戦記

リュウミン
Trajan

7つの大罪

「つ」こころあたりはあるが、分からん! / 「の」は秀英3号
「聖戦の予兆」は解ミン 宇R

91Days

Garamond Pro Bold(視聴者の方からThx!!)

ベルセルク

欧文は多分Helvetica

食戟のソーマ

多分フリーフォントだが、検証に時間がかかるので保留 

B-PROJECT 鼓動*アンビシャス

多分小塚だろう

ショウバイロック

新丸ゴ H

ドリフェス

多分オリジナルだろう
欧文は分からん

ReLIFE

パスミスっぽい所が有るので、おそらくオリジナルだろう
あったとしてもLucida Gradeだろう

Rewrite

あてはあるが、保留

planetarian ちいさなほしのゆめ

保留(手書き風フォントは難しい)

あまんちゅ!

オリジナルだろう

アンジュ・ヴィエルジュ

保留(C4?)

ばなにゃ

多分オリジナルだろう

チア男子!!

多分オリジナルだろう

初恋モンスター

オリジナル

魔装学園 HxH

メインロゴは何かの骨格を残したオリジナル
「ハイブリッドハート」部分は筑紫かリュウミンだと思う
けど素材が足りないので保留

モブサイコ100

オリジナルだろう

NEW GAME!

オリジナルだろう

ねじ巻き精霊戦記 天鏡のアルデラミン

「アルデラミン」は筑紫Aオールド

orange

欧文はオリジナル University(mashabowさんから教えていただきました。ありがとうございます!!) 「オレンジ」は多分筑紫Aオールド明朝だが、小さいため厳密にはあとから見る

レガリア The Three なんとか

オリジナル
下の欧文は解像度不足で読めない

OZMAFIA!!

欧文わからぬ

Fate プリズマ☆イリヤドライ

多分オリジナル

Tales of Zestiria the X

オリジナルだろう

甘々と稲妻

オリジナルだろう

SERVAMP サーヴァンプ

IMPACT Aは変形
サーヴァンプフリーフォント?オリジナル?

ツキウタ THE ANIMATION

メインロゴタイプはオリジナル
欧文はIMPACTを165%平べったくしたもの

タブー・タトゥー

Trajan
筑紫Aオールド Bだが、「ー」が長くなってる

不機嫌なモノノケ庵

筑紫Aオールド明朝
「な」は縦書きに応じて変形させている

おなら吾郎

オリジナル

Scared Rider XechS

わからなかった、あとで検証

アクティブレイド

ロゴはオリジナル
下の機動強襲室第八係はいい画像がないのでわからぬ

腐男子高校生活

ロゴはオリジナル
欧文は後から検証

斉木楠雄のψ難

オリジナル

DAYS

和文はMB101 B
DAYSはsは多分小文字を大きくしたもの?
わからないので一旦保留

美男高校地球防衛部

欧文はHobo
和文はオリジナル

ぐらP&ロデ夫

オリジナル
サイトのナビゲーションがAkko Rounded Boldだった

魔法少女 なりあ ガールズ

メインロゴタイプはオリジナル
魔法少女?」はDFP綜藝体W9

一人之下

原作が中国なので
オリジナル?中国のフォント?か分からない

タイムトラベル少女

ロゴタイプはコメットBのいじり文字
「マリ・ワカと〜」はあおかねEB

Reactを勉強した(?) 5日目

今日は疲れからか黒塗りの高級車に激突しそうになりました。とにかく眠いなかお勉強。
キーボードを買ったが妙なキー配列に大苦戦して慣れてなかったりニコ生で恥を晒し続けていました。

今日やったこと

Components

  • 繰り返しやることない?いちいち書くの辛くない?
  • 繰り返し真っ当に書いちゃって変数衝突したら辛くない?

そんな時に助けてくれるのがComponentだ!!!

  • Componentの中には templateとcontrollerを入れる
  • <phone-list></phone-list> <- DOMになるようなコンポーネントを作れる、すごい!!
  • .component.jsと.component.spec.jsが必要(多分)
  • 図の理解が重要なんだけど、分からない

今日はコレでおしまい。もう英語読めなくなってるなぁ。日本語のドキュメントを最初に読んだあとでやろう。
流石に疲れたのでおやすみなさい。

Reactを勉強した(?) 4日目

引き続きAngularJSを勉強している。

今日学んだこと

1 Static Template

普通にHTMLを書くようにをapp/index.htmlに書くと反映される

2 Angular Templates

View と Template

  • View : Model(データ構造)をHTMLテンプレートに通して反映したもの
  • HTMLテンプレートについて
    • ng-app : モジュール(後述)を読み込む
    • ng-controller : DOMのsub-treeを担当している
    • ng-repeat : each文みたいな書き方が出来る(変数名 in 配列)
    • {{}} : コントローラーのモデルから参照できる

Model と Controller

  • Model : コントローラーの中にある、中にリテラルで記述されたオブジェクトがある簡単な配列
  • Controller : $scope という引数を持つ構造的な関数。モデルをインスタンス化するのがコントローラー
  • app.jsでng-appのmoduleを定義する

    The PhoneListController controller attaches the phone data to the $scope that was injected into our controller function. This scope is a prototypal descendant of the root scope that was created when the application was defined. This controller scope is available to all bindings located within the tag. ↑の記述はさっぱり意味がわからなかった

Scope

  • Scopeの概念はAngularJSにおいてかなり重要
  • Template, model, controllerを一緒に動かすためののりみたいな役割をするもの
  • コレによって model と views を切り分ける
  • 一方で model が変更すれば views にも反映し、逆もまた然りみたいな

Testing

controllerとviewを切り分けたことによってテストが簡単になるらしいが、テストをそもそもそんなに知らないので読み飛ばした

Experiments

やってみよう、みたいな所。実際にやってみたよ!

Reactを勉強した(?) 3日目

creator.dwango.co.jp クリエイターズブログで記事を執筆しました。思った以上の反響で驚いております…!!読んでいただいた方、感想を頂いた方、githubにstarを下さった方など…、本当に有難うございます。これを励みに、これからも精進してまいります。

さて、タイトルはさておいてAngularJSのチュートリアルで学んでいます。

今日やったこと

環境構築

  • angular-phonecatをclone
  • npm install
    package.jsonに依存パッケージを書いておけば npm install で全てインストールしてくれるということを知った。便利
    • bowser
    • http-server
    • karma
    • karma-chrome-launcher
    • karma-firefox-kauncher
    • karma-jasmine
    • protractor
    • shalljs
  • npm startで完成品を見てみる
    • npm start は何を読み込んで何を実行しているんだろうか?
  • npm test でunitテストが出来る
    • 何を読み込んでいるのか調べておく
    • 「テスト」というものについては貸していただいた本で勉強しておく
  • npm run update-webdriver
  • npm protractor
    • なんかいろいろテストしてくれるやつらしいけど、意味がよくわからなかったので、後から調べる

STEP0 : bootstrapping

  • git checkout -f step-0
    ブランチを切り替えることでチュートリアルを成立させるの頭いい使い方だなと思った
  • もっかいnpm install
    ここではチュートリアルようにvalidetorとかいろいろインストールしてくれてるみたい
  • コードを見てみる
<!doctype html>
<html lang="en" ng-app>
  <head>
    <meta charset="utf-8">
    <title>My HTML File</title>
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
    <script src="bower_components/angular/angular.js"></script>
  </head>
  <body>

    <p>Nothing here {{'yet' + '!'}}</p>

  </body>
</html>
  • ng-app 属性 : これがangularJSのルートのHTML要素だよというflag
  • <script src="bower_components/angular/angular.js"></script> : HTMLを全て読み込むまで待ってから実行するcallbackが起動する感じになってる
  • <p>Nothing here {{'yet' + '!'}}</p>: {{}}で書くとモデルを参照できたりJSっぽことが出来るよ
  • bootstrappingでやっている重要な3つのこと
    • injectorによるmoduleの依存関係の解決
    • root scopeができて、applicationのModelのContextになる。
      • 後半何を言っているのかよくわからないので、そのうち分かるようになるのを待つか、調べる。
    • ngappのあるrootのHTML要素から順にDOMを「コンパイル(単純なDOMのれんラヂング+JSっぽいこと)」していく。

今日は一旦ここまで。明日はStatic Templeteをする予定。

そういえば、会社の優しいフロントエンドエンジニアの方がReactやNode.js、JSでのテストの手法などの本をおすすめ&貸して頂きました。ありがたい…!!頑張って勉強します〜〜。

Reactを勉強した(?) 2日目

さて,プロフェッショナルで藤田さんが特集されていたり,WWDCがあったりであまり時間が取れなかったのですが,一応やりました.
昨日は全くわからなかった。

先輩に相談すると, - Reactの派生は、まず流れとしてMVCフレームワークの思想がある(reactはそれを更に詳細に分割したもの) - まずはMVCフレームワークを勉強すると良いのではないか というアドバイスを頂いたので,おすすめしてもらったangularJSとbackborn.jsのうち,angularJSを勉強することにした.

今回はドットインストールにangularJSがあったので,チュートリアル的にやってみることにした.
ところが03のコントローラーを作るところでどうやっても ng-controller が undefined と言われてしまう。

公式ドキュメントを見てみると、どうもglobalにcontrollerを宣言するのはダメらしい。これは1.3.0からの仕様のようだ。
ドットインストールで行われていたバージョンは1.0.1であるから、おそらくこれだと判断した。

Twitterに愚痴ってたところ、フロントエンドに詳しい友人からも、あるあるだから基本は公式ドキュメントを漁ったほうがいいよ、というアドバイスを頂いた。
というわけで今日の進捗はあまりなかった。これからはAngularJSの公式のtutorialsで進めていくことにする。

だんだんReactをやっているのか分からなくなったが、最終目標はReactなのは変わらないから、AngularJSでMVCフレームワークが理解できるまでは(一旦チュートリアルを達成するまでは)タイトルの最後に(?)を付けておくことにする。
周りの人が支えてくださり、とても幸せだ。さて、今日も頑張ろう。

Reactを勉強した1日目

結論:何がなんだかさっぱり分からない

今日やったこと

learnyoureact

NodeSchoolに行った際、そこではlearnyounodeをやった。これもこれでわからない所がたくさんあった(特に、callback関数周り)が、一日で10問目まで進むことが出来た。
しかし、今回のlearnyoureactは、僕の頭がついていけずに1問目、2問目、3問目、とよくわからないまま、ただ言われたとおりに入力してなんとか出来たが、5問目でさっぱり分からなくなった。
Twitterでも反応を調べてみたが、みんなわかってる感じで、わからないのは僕の知識不足や頭の悪さのせいだろう、作者の方には本当に申し訳無さ…。
後から解消するにも、ここにわからなかったことをメモしておく。

1問目 HELLO_REACT

  • npm installでたくさんインストールするが、何が何をインストールしてその結果何がしたいのかさっぱり分からなくなった。次をインストールしたようだ。
    • react
    • react-dom
    • express
    • body-perser
    • express-react-views@0.9.0
    • babel@5.8.23
  • program.jsに以下を書いたプログラムが、何をしているのかわからなかった
    • expressってなんだ
    • babelってなんだ
    • jsxってなんだ
  • viewディレクトリにindex.jsxを作ったが
    • export default class ToolBox extend React.Component ってなんだ
    • render() ってなんだ
  • Reactのドキュメントの案内があるが、このどこを参照すればいいのだ
  • JSXシンタックスのリファレンスの案内があるが、これもどこを参照すればいいのか
  • とりあえず入力して下さいと言われたとおりにやってクリア

2問目 COMPONENT

  • Componentを組み合わせて作るとあるが、そもそもComponentが分からない
  • HTMLのタグとJSXを組み合わせることも出来るらしいが、JSXがわからないので、何が組み合わさってどうなるのかわからなかった
  • Reactのコンポーネントは大文字の変数で始め、HTMLのタグを記述する際には小文字の変数ではじめるらしいが、なにがなにやら…
  • ローカルのコンポーネントのクラスとはなんだ
  • JSXってHTMLも入れるんじゃなかったっけな感じで、何と何を識別しているか大混乱…
  • 問題は上のサンプルを見よう見まねで書いてクリア
  • 結局コンポネントはclass ~~で始まっているものだと言う認識だが、それでいいのか?

3問目 PROPS

  • propsってそもそもなんだろうか…
  • {this.props.title}のthisは何を指しているんだ?
  • とりあえず{this.props.title}と{this.props.children}で目的のものがとれることだけ文章から読み取れたのでそれを書いてクリア
  • コンポーネントと子コンポーネントはわからないまま…

4問目 PROPTYPES

  • 型がチェックできるとバグが少なくなって良いと言う話は分かった
  • 型.isRequiredと書けばとりあえず型一致を確かめてくれるのは理解したが、キー名のとりかたがよくわからなかった
  • 再利用可能なコンポーネント??
  • とりあえず文字列で確かめたければReact.PropTypes.stringを書けばいいということは分かったので書き換えてクリア

5問目 STATE

  • とりあえず、変更可能なのがstateで変更不可能なものがpropsなのぐらいは分かった
  • 書き換えはしたが、初期値を設定する方法が全く分からない
    • ドキュメントを見ればわかるかと思ったが、コッチがclass〜〜と書いている中、ドキュメントは var = 〜〜と書いているし、何が何を対応しているのか、本当にこうして良いのかさっぱり分からなくなった
  • 突然コンストラクタが出来たが、中のsuperが何か全くわからない
  • handleChange関数も何を引数に取れば良いのかとか、this.setStateの使い方も、公式ドキュメントやQiitaを探したが、全く理解できなかった
  • 手も足も出なくなり終了

これからどうしていくか

  • とりあえず、出来そうだと思えるまでは learnyoureactはおいておく
  • Reactの公式ドキュメントを見て勉強してみる。
  • Reactはそもそも何を解決しようとしているのかもわからない、事前知識がないのか。(事前知識が何なのか、事前知識が必要なのかどうかさえ分からない)
    • 大規模開発をスムーズに進めるらしいが、その手段として上げられているものの意味がよく分からない
    • TypeScript(名前だけ知っている)のお話も知っていないといけないのかなぁ、良く分からない。

じゃあなんで勉強してんの?

最近頻繁に話を聞く、知って置かなければなぁという焦りがある。多分使う。