読者です 読者をやめる 読者になる 読者になる

まったり坂をのぼりたい。

忘れたときに見る。思い出したら書く。おおざっぱな備忘録。

MacでVirtualBoxを使ってIEを検証する

雑に紹介

会社のPCで設定したので説明が雑です。
詳しくは参考サイトを見ましょう。

VirtualBoxをダウンロード

ここからダウンロード
Oracle VM VirtualBox
そしてインストール
VirtualBoxを環境設定から日本語にしておくといいと思います。
(日本語のサイトを検証するなら)

仮想IEをダウンロード

Free Virtual Machines from IE8 to MS Edge - Microsoft Edge Development
Virtual machineでOSとIEのバージョンを選択
Select platformでVirtualBoxを選択

どのバージョンまで対応させるか

下のサイトとかでシェア率が調べられます。
Internet explorer (JP marketshare) | Clicky
Windows (JP marketshare) | Clicky

ファイル解凍ソフト(mac)

私はこれ使ってます。
StuffIt Expander

ネットワークの設定

下の記事見て設定しました。今度ちゃんと調べます。
VirtualBoxでポートフォワーディングするときの注意点 - 戦場のプログラマー
ネットワーク設定
割り当て:NAT
ポートフォワーディング
 一つ目
  プロトコル:TCP
  ホストポート:8888
  ゲストポート:80
 二つ目
  プロトコル:TCP
  ホストポート:2222
  ゲストポート:22

日本語化

仮想マシン(windows)上でlanguage pack入れたりタイムゾーン設定したりします。
OSのバージョンによって違うので調べるといいと思います。
ただ、容量大きいので日本語入力チェックが必要な場合に入れるといいと思います。

参考

Mac+VirtualBox+modern.IEでIE6~10環境を無料で構築する - しゃの
VirtualBoxでポートフォワーディングするときの注意点 - 戦場のプログラマー

新年の抱負

あけましておめでとうございます。

今年もよろしくお願いします。

今年やることリスト

今年やることを100個考えてみました。

フロントエンド系

  • React
  • Riot
  • PostCSS
  • WebGL
  • アニメーションライブラリ
  • 管理画面を作成
  • glup
  • webpack
  • リファクタリングスキルをつける
    Reactはこれから業務で使うようです。
    glupでwebpack使えるしwebpackでglup使えるし
    glupでwebpack使わなくてもいいしwebpackでglup使わなくてもいいし、、、
    なんなんだよ!!ってことでちゃんと理解したいです。

環境設定系

  • Jenkins
  • docker
  • bashスクリプト
    Jenkinsは個人的に使ったことないので使いたいと思います。
    dockerは環境設定で辛い思いをしないように勉強したいです。

テスト

  • ユーザーテスト
  • 自動テスト
    ユーザーテストはアイトラッキング使ってwebサイトの最適化をしたいです。

プログラミング言語

アウトプット

  • LT(Lightning Talks)をする
  • Advent calendarを書く
  • ブログを書く
  • githubにコミットする

その他技術系

  • 自然言語処理機械学習勉強
  • データベース勉強
  • セキュリティ勉強
  • ネットワーク勉強
  • ハッカーの学校を読み切る
  • CTF
  • Linuxコマンドを覚える
  • vimを触る
  • HHKBタイプ速度を上げる
  • サーバー立てる
  • Unityでゲームアプリ開発
  • JINS MEMEのアプリ
  • カード管理アプリの作成
  • LINEのAPIbotを作る
  • Raspberry Piでなんか作る
  • デスクトップアプリを作る
  • 技術系イベントに3つ行く
  • 名刺100枚配る

デザイン系

  • webデザイン
  • Live2D
  • sketch
  • SVG作成
  • ドット絵
  • モデル作成
  • MMD
  • ドレスデザイン
  • 美少女イラスト

資格

女子力

  • 料理
  • ヘアスタイル(巻いたり染めたりする)
  • ファッション
  • ネイル
  • メイク
  • airCloset使う
  • 手芸
  • きれいな字を書く

暮らし

  • ミニマリスト
  • いらないものを売る
  • お花を飾る
  • 公共料金をクレジットで支払う
  • ハリネズミを飼う

お金

  • 節約
  • 家計簿
  • Lineスタンプ

健康

その他

2016年を振り返る

今年を振り返る

紅白は紅組が勝ちましたね。まさかの逆転勝利。

今年は社会人1年目の年で
周りの環境も自分の心境もだいぶ変わったなと思いました。

新卒研修

社会人の心得を叩き込まれ、イベントの企画をし、、懇親会の幹事をやり、、、
業務よりそうとう辛かったですw
初めての点滴、初めてのmy頭痛薬。。。

人付き合いとか飲み会の振る舞いとか体で覚えましたw

業務

フロントエンドエンジニアの仕事があったので
希望して、配属されました。
学生の時にHTMLとCSSをちょっと触っていましたが、
自分のコードがクソすぎて、1から勉強し直しました。
JavaScript(jQuery)、Sass、Photoshopを初めて触りました。
1年目なので製品サイトの作成をやりました。

「お前仕事できるのかよーww」
と誰かに言われましたが、できるようになりますよ。
常にこのコードは最善なのかを考えるようになったり
トレンドを追ったりするようになりました。

休みの日

ほぼ寝てましたw
tokyo mxが見れないクソ物件だったので
dアニメを契約して暇な時いっき見とかしました。
エンジニア研修でサーバーサイドが全くわからなかったので
「スッキリわかる サーブレット&JSP入門」を購入し、読みきりました。

来年は

なめられないように頑張ります。
今年はインプットが多かったので
来年はアウトプットをしていきたいと思います。
あと英語は翻訳なしで読めるようになりたいです。

nvmでnode.jsを入れよう

nvmを使う

nodeのバージョン管理にnvmを使うことにしました。
creationix/nvm

.bash_profileを作っておく

ホームディレクトリに.bash_profileファイルを作成します。
pathを通すのに必要なファイルです。

touch ~/.bash_profile

nvmをインストール

次のコマンドを打ちます。

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.32.1/install.sh | bash

wget使いたい場合こっちです。

wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.32.1/install.sh | bash

pathは.bash_profileに書かれます。 ※.bashrcがあるとそっちに書かれるみたいです。

nvmがインストールできたか確認します。

command -v nvm

nvmと出力されたら成功です。

nodeをインストール

インストールできるnodeを調べます。

nvm ls-remote

バージョンを指定してインストールします。

nvm install 7.3.0

npmもインストールされます。

デフォルトで使うnodeのバージョンを指定します。

nvm alias default 7.3.0

macなら

nodebrewでもよかったかもしれない><

参考

creationix/nvm
Node.jsのバージョンを管理する - Qiita
本当に正しい .bashrc と .bash_profile の使ひ分け - Qiita

情報収集の手段

情報収集してますか

私はテックブログやニュースの更新通知をslackに流してます。
後で見る記事はpocketに登録してます。
どの端末からでも見れるのでとても便利。

slackをrssリーダー代わりにする

  1. 適当なチームを作ります。
    Slack: Be less busy
  2. 適当なチャンネルを作ります。
  3. rssプラグインを入れます。
    RSS | Slack
  4. フィードURLを所得し、通知を流すチャンネルを選択
    f:id:canasta0x0:20161221012554p:plain
    手軽にフィードを登録できるChrome拡張機能が便利です。
    Add feed to Slack - Chrome Web Store

後で読む記事をpocketに追加

タグ分けもできて便利(してないけど)
Pocket
ブックマーク感覚で使えるChrome拡張機能も便利
Save to Pocket - Chrome ウェブストア

参考

情報収集と保存とSlackで共有を自動化する - hatajoeのブログ
SlackをRSSリーダーにしたら、他のRSSリーダーサービスを使わなくなった話 - Qiita
Slackを情報収集に使おう!SlackにRSS/Atomを簡単に追加できるChrome拡張機能の紹介 - pixiv inside

jQuery Validation Pluginを使う

formをリアルタイムでチェックしたい

jQuery Validation Pluginを使うと簡単にformのチェックができます。
jQuery Validation Plugin | Form validation with jQuery

基本的な使いかた

※簡略化したのでおかしなところがあるかもしれないです。

html

<form id="FormId" action="">
  <label for="InputId">メールアドレス</label>
  <input id="InputId" name="input_name">
  <p class="error_txt"></p>
  <button id="button" type="submit">送信</button>
</form>

js

//バリデートルールの定義
var methods = {
  email: function(value, element) {
    return this.optional(element) ||/^[\w.!#$%&'*+\/=?^`{|}~-]+@[\w-]+\.[\w.-]+$/.test(value);
  },
  nonSpaceOnly: function(value, element){
    return this.optional(element) ||/[^\u0020\u3000]/.test(value);
  }
}

//メソッドの追加(methodsを適応)
$.each(methods, function(key) {
  $.validator.addMethod(key, this);
});

//inputにルールの適応
var rules = {
  input_name:{
    required:true,
    email: true,
    nonSpaceOnly:true
  }
};

//inputのエラーメッセージ
var messages = {
  input_name:{
    required:"必須項目です",
    email: "正しいメールアドレスを入力してください",
    nonSpaceOnly:"空白のみの入力はできません"
  }
};

//フォームをバリデーション
$("FormId").validate({
  rules: rules,
  messages: messages,
  //フォーカスアウトでバリデーション
  onfocusout: function(element) {
    if (!this.checkable(element)){
      this.element(element);
    }
  },
  //エラー文を出す場所を指定
  errorPlacement: function(error, element) {
    error.appendTo(element.find(".error_txt"));
  }
});

標準のエラーメッセージ日本語化

DLしてきたファイルの
dist/localization/messages_ja.min.js
を読み込めばok

あとからルールの追加・削除

選択肢によって必須・任意の切り替えをするなど
あとからルールの追加・削除をするときは以下の関数を使います。
ルールを追加するときは次の関数を使います。

  $("#InputId").rules("add", {
    required: true,
    nonSpaceOnly:true
  });

ルールを削除するときは次のように記述します。

$("#InputId").rules("remove","required nonSpaceOnly");

ルールを追加する前に削除しようとするとエラーになります。

参考

下のサイトの方が詳しく載ってます。
Documentation | jQuery Validation Plugin
jQuery Validate Pluginの解説とValidate 日本語環境用PluginとjQuery Form Pluginとの連携 - くらげだらけ
【JavaScript】【jquery】jquery.validate.jsの基本的な使い方 - 駆け出しプログラマの備忘録
jQuery Validation Plugin 簡単な使い方まとめ - Qiita

はじめの記事。続いたら奇跡。

はじめまして。

高専卒業して2016年からB2BのIT企業で フロントエンドエンジニアしてます。

え、エンジニアなの?

面接で「君、エンジニア向いてないんじゃない?」 って言われたけど、なぜか採用されました。 うちの会社いろいろやってて、エンジニアもインフラ系からフロント系までいます。 B2C寄りの仕事がしたくて、フロントエンドを志願したら希望が通りました。

ちゃんと仕事やってんの?

3ヶ月くらい研修やって(技術研修は1ヶ月)、 今は既存の製品ページの修正や新規ページの作成をしてます。 HTML/CSS/JavaScriptほぼほぼ初めて使う言語でした。

なぜこの時期にブログをはじめたのか

勉強したことをすぐに忘れるのでちゃんとまとめようと思いました。
まあ、気まぐれでてきとーな性格なので続いたら奇跡です。

ところで

マークダウンって素晴らしいね。