自分用メモ。Atomの便利な機能やインストールしたパッケージをメモしておく。 エディタの設定 Preferences->Editorから以下の設定を有効にする。 Show Indent Guide :インデントガイドを表示する。 Show Invisibles :スペースやタブを視認できるようにする。 Soft Wrap :画面外にある文字を折り返して表示する。 Soft Wrap Hanging Indent :80字で折り返して表示する。 パッケージのインストール方法 Preferences->Installからパッケージを検索してインストールする。 インストールしたパッケージ 操作をVimライクにするvim-mode-plusとex-modeに加えて、構文解析してくれるlinter系のパッケージをインストールした。 Vim化系 vim-mode-plus ex-mode Linter系 linter

頻出するCSSセレクタの使い方をまとめる。 対象読者 HTMLとCSSを初めて触る人。 CSSのセレクタ周りの理解を有耶無耶にしていた人。 最初に知っておきたいCSSの注意点 CSSの文法に全角文字および、全角スペースを使用することはできない。 セレクタ(id、class)の頭文字に数字を使用することはできない（例:2linesなど）。 スタイルの適用順位はポイント制となっており、より獲得ポイントが高いセレクタを持つスタイルが優先される（see CSSのスタイル適用の優先順位について）。 セレクタの基本的な使い方 CSSにはHTMLの構造から要素を選択するために「要素」、「id」、「class」の3つの選択方法が用意されている。 html <div id="foo"></div&

HTMLとCSSの話。Font Awesomeと疑似要素beforeやafterを合わせて使うと便利だったのでメモ。 Font Awesomeの使い方 Get started with Font Awesomeに載っている内容だが、以下のコードでスタイルシートを読み込むことができる。 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="

ブログのWebサーバとしてNginxを使っている。Nginxについて勉強したことをメモしておく。 インストール Ubuntuの場合は以下のコマンドでインストールすることができる。 sudo apt-get update sudo apt-get upgrade sudo apt-get install nginx Ubuntuにデフォルトでインストールされているufw(ファイアウォール)を設定するには以下のようにする。 # ssh(22)のポートを開放する sudo ufw allow ssh # ufwで利用可能なアプリケーションを確認 sudo ufw app list # Nginx Fullを指定してhttp(80)とhttps(

AWS EC2 t1.micro + WordPressでブログをやっていたが、AWSから*Abuse Reportが届いたのをきっかけにConoHa 1GB + Ghostに移行した。 *不正アクセスの兆候等が確認された場合に送られてくるレポート 構築した環境 移行前 EC2 t1.micro(Amazon Linux) + Wordpress + PHP + Nginx(Webサーバとリバースプロキシ) + MySQL 構築にはAmimoto AMI（インスタンスを作るためのイメージファイル）を使用した。 移行後 ConoHa 1GB(Ubuntu) + Ghost + node.

SEOとは何か SEOとは、Search Engine Optimization（検索エンジン最適化）の略称である。 検索結果において、ウェブページをより高い順位に表示させることを目的として行う取り組みのことである。 今回はSEOの基本であるtitle、description、keywords、h1タグを適切に設定する方法について解説する。 OGPとは何か OGPとは、Open Graph Protocol (オープン・グラフ・プロトコル)の略称である。 OGPはもともと、Facebookが策定した仕様である。今ではFacebookだけではなく、mixiなど、様々なSNSでも利用されるようになった。 OGPを利用すると、リンクの元となるコンテンツにどのような情報が含まれているか、効率良く伝えることができる。 例えば、FacebookなどのSNSで、URLを貼るだけで写真と説明文つきのリンクを出力するにはOGPを設定する必要がある。

ウェブサイトを作るアルバイトを1年ちょいやったので、そこで必要だった知識をメモ。 はじめに この記事は、筆者がウェブサイト制作のアルバイトを1年ほど行った結果、ウェブサイトを制作するのに必要だった知識を制作手順ごとにまとめたものである。 制作環境はMac + Google Chrome + Dreamweaver + Photoshop + Illustratorだが、今回はソフトウェアの使い方についてはほとんど解説しない。 今回は「htmlとcssをどのように書けば目的のレイアウトを作れるか」に重点を置いて解説する。 尚、本記事では説明を複雑にしないようにcssはhtmlファイル内のstyleタグに直接記述するが、実際に業務を行う場合はhtmlファイルとcssファイルはしっかりと分けて、要素の定義とデザインは分離して管理することを推奨する。 対象読者 htmlとcssは結構触るが、レイアウトまでは作れないプログラマ寄りの人 ワイヤーフレームを作成する まず初めに、ウェブサイトの構成を決める。どのようなコンテンツが必要か、コンテンツをどのように配置するか、ウェブサイトのページ数、バックエンド（サーバー、プログラム、データベース）

仕事でJavaScriptからDOMを通してHTMLを操作したことはあったけど、今回改めて勉強したのでメモしておく。 DOMとは DOMとは、「Document Object Model」の略である。プログラムから「HTML 文書」や「XML 文書」を利用するための、標準化された仕様を指す。 DOMが生まれた背景として、JavaScriptのようなクライアント側のプログラムを使ってHTMLの内容を動的に変化させる「ダイナミックHTML」という概念の登場がある。登場初期の頃はブラウザごとに制御方法が違っていたので、ブラウザごとに専用のJavaScriptのコードを用意する必要があったが、それが煩わしかったので、制御方法を統一するためにDOMという仕様が生まれた。 DOMを構成するもの HTML文書は、「タグ」「属性」「値」「文書」などの部品で構成されている。この部品のことをノードと呼ぶ。HTML文書がブラウザに読み込まれると、

各プログラミング言語には、1度しか使わない様な用途で作成するクラスやメソッドには、名前を付けずにそれを使用する方法が用意されていることに気付いた。今回はJavaScriptの関数に名前を付けずに使用する方法を勉強したのでメモしておく。 関数とは 関数とは、同じ処理を何度も使い回したいときに使用するものである。デフォルトの関数定義は以下のような書式となる。 書式 function 関数名( ) { 処理 } 無名関数とは 無名関数とは、名前の無い関数のことである。1度しか使わない様な用途の関数を作りたいときに使用する。逆に言うと、1度しか使わないのでわざわざ名前を付ける必要が無い。 書式 //関数定義 var 変数名A = function (引数){ 処理 } //関数呼び出し var 変数名B = 変数名A(引数); console.log(変数名B)

JavaのコレクションAPIでよく使うんだけど、忘れちゃっていちいち検索していたメソッドをまとめてくれている記事を発見した。大変有難いので引用させて頂いてメモしておく。 JavaのコレクションAPIでよく使うメソッド 操作名前 Array(配列) List Map 要素の参照 a[i] get(int index) get(Object key) 要素の変更 a[i]に代入 set(int index, E element) put(K key, V value) 要素の追加

Effective Javaを読んでいる。自分でジェネリクスなクラスを作る場合の書式と利点が分からなかったので調べた。後から見返して分かり辛いと思ったところは加筆する予定。 型引数とは 型引数はクラス宣言・インタフェース宣言で、クラス名・インタフェース名に続いて指定する。型引数は<>で囲み、その中に１つ以上の型変数を定義する。複数個指定する場合には、コンマ（,）で区切る。 public interface Map<K, V> { //... } 型変数の命名規則は変数の命名規則と同じだが、英大文字で１字が推奨されている。 定義した型変数は、implements句やextends句、メソッドの引数、返り値だけでなく、インスタンス変数やメソッド内部で用いることもできる。

Effective Javaを読んでいる。Javaでは、配列は使わずにリスト（ジェネリクス）を使えということだったのでメモ。 ジェネリクスとは ジェネリクスとは、「総称性（Genericity）」「ジェネリック・プログラミング」とも呼ばれるプログラミング技法で、 オブジェクト指向とは異なるパラダイムからきたものである。データの型に束縛されず、型そのものをパラメータ化して扱うことができる。Javaでは主にコレクションクラスに導入されている。 変性とは 何故、配列よりリストを使うことが推奨されるのかを理解するために、先に変性について理解しておく必要がある。 共変 (covariant): 広い型（例：double）から狭い型（例：float）へ変換すること。 反変 (contravariant) : 狭い型（

最近はEffective Javaをずっと読んでいる。Javaでは定数宣言にpublic static final intを使わず、enumを使えとのことだったのでメモしておく。 従来の定数宣言 従来は、Javaで定数宣言をするときは、以下のように宣言していた。 //色の黒と白 public static final int COLOR_BLACK = 0; public static final int COLOR_WHITE = 1; //アニメ「プリキュア」のキュアブラックとキュアホワイト public static final int

JavaにもPHPのcloneメソッドのような機能があり、PHPのcloneメソッドのような使い勝手を期待したが、あまり良いものではなかった。使い方が結構特殊だったのでメモを残しておく。 ２種類のコピー方法 オブジェクトのコピーにはシャローコピーとディープコピーの２種類があり、cloneメソッドの使い方を学ぶ上では、前提知識として持っておくべきである。以下より、それぞれのコピーについて説明する。 シャローコピー シャローコピー（浅いコピー）は、コピー元のオブジェクトとコピー先のオブジェクトがメモリ上の同じデータ(インスタンス変数)を参照している状態である。 コピー元のオブジェクトに対してインスタンス変数に変更を加えると、コピー先のオブジェクトが参照しているデータが同じ物なので、コピー先のオブジェクトから見たインスタンス変数も変更されることになる。 つまり、シャローコピーは参照のコピーのみを行う。 ディープコピー ディープコピー（深いコピー）は、オブジェクトのみのコピーではなく、オブジェクトとメモリ上のデータ(インスタンス変数)の両方をコピーする。 二つのオブジェクトが参照しているデータは別々のものなので、一方のオブジェクトのインスタンス変数に変更を加えても、

Effective Javaを読んでいたところ、勉強になったことがあったのでメモしておく。 コンポジションとは コンポジション（Composition）は、日本語で「混合物」を意味する単語である。あるクラスの機能を持つクラスのことを指す。 特定のクラスの機能を、自分が作るクラスにも持たせたい場合に、継承を使わずフィールドとしてそのクラスを持ち、そのクラスのメソッドを呼び出すメソッドを持たせること。そうすることで、クラスに他のクラスの機能を組み込むことができる。 厳密なオブジェクト指向では、継承は「機能の継承」を目的とせず、「スーパークラスはサブクラスの一種である」といういわゆる「is-a」の関係を持たなければならない。そのため、単に機能を持たせたい場合には、継承ではなくコンポジションとすることが推奨される。 継承とコンポジションをどう使い分けるか 継承を使ったほうが良い場合とコンポジションを使ったほうが良い場合があるが、具体的に何を基準にして使い分ければ良いだろうか。 この問題を解決するために、一般的な物の考え方の一つに「

Effective Javaを読んでいたところ、とても重要そうなテクニックを見つけたのでメモしておく。 staticファクトリーメソッドとは staticファクトリーメソッドとは、オブジェクトを返す単なるstaticのメソッドである。 通常、クラスのインスタンスはコンストラクタが提供するが、代わりにstaticなメソッドでオブジェクトを提供する方法もある。無意識にコンストラクタでインスタンスの提供を行わないように注意したい。 staticファクトリーメソッドは、デザインパターンのファクトリーメソッド（Factory Method）ではない点に注意。 staticファクトリーメソッドの例 public static Boolean valueOf(boolean b) { return b ? Boolean.TRUE : Boolean.FALSE; } staticファクトリーメソッドの長所 コンストラクタと異なり、名前を持つため、コンストラクタに対するパラメータ自身が返されるオブジェクトを表現していない場合には、適切な名前を持つstaticファクトリーメソッドは使いやすく、

デザインパターンのうちのBuilderパターンを勉強したのでメモしておく。 Builderパターンとは Builderとは、建築者や建築業者などを意味する単語である。 このパターンは複数のコンストラクタを用いて初期化を行いたいような場合に複雑さを抑えることが出来る。 Builderパターンを使わない場合の初期化処理 伝統的には、複数のコンストラクタで初期化を行うときには以下のように記述する。 public class Foo { private int a; private int b; private int c; public Foo(a) { //何らかの初期化処理 } public Foo(a, b) { //何らかの初期化処理 } public Foo(a, b,

Swingを触り始めたので、Window Builderも触ってみた。 Window Builderとは GUIアプリケーションのデザインを簡単にしてくれるEclipseのプラグインである。 実際にGUIを見ながらコンテナやコンポーネントを配置していくことで直感的にアプリケーションをデザインすることが出来る。 Window Builderをインストールする まずは以下のサイトから自分のEclipseのバージョンに合ったlinkをクリックする。 http://www.eclipse.org/windowbuilder/download.php リンク先のURLをコピーし、Eclipseの[ヘルプ]->[新規ソフトウェアのインストール]から作業対象に先ほどコピーしたURLをペーストして、これを追加する。「Swing デザイナー」「SWT デザイナー」「WindowBuilder Engine」が表示されるので全てにチェックを付け、「次へ」

まだ業務が始まらないので、窓際の席で細々とJavaの基礎を復習している。Effective Javaを読み始めたので、この本の中で知らなかったことを順次メモしていこうと思う。 toStringメソッドとは toStringメソッドは、インスタンスの文字列表現を返すメソッドである。その文字列は「クラス名@ハッシュコード」のような形式であり、具体的には「PhoneNumber@163b91」となる（正確にはgetClass().getName() + '@' + Integer.toHexString(hashCode())と等しい値を返す）。toStringメソッドは、java.lang.Objectに実装されているメソッドであり、Javaの実装では全てのクラスがjava.lang.Objectを継承しているため、全てのクラスでtoStringメソッドを呼び出すことが出来る。 toStringメソッドのドキュメントには次のように書かれている。

Javaの初期化と言えば、一般的にはコンストラクタだが、Javaにはスタティックイニシャライザとインスタンスイニシャライザを使って初期化を行う方法があり、今まで知らなかったのでメモしておく。 スタティックイニシャライザとは スタティックイニシャライザは、主にクラス変数（staticな変数）を初期化するときに使用する。クラス変数の場合はインスタンスを生成しなくても使用できるので、コンストラクタは必要ない。スタティックイニシャライザを使用すると、クラスが初期化される直後にクラス変数を初期化することが出来る。 スタティックイニシャライザ(Static Initializer)は他にも「クラス初期化子」「静的初期化子」「静的ブロック」「staticブロック」とも呼ばれている。 static {}がスタティックイニシャライザである。 class InitializeTest { public static int[] foo = new int[100]

Swingのフレーム（JFrame）とパネル（JPanel）で画面遷移するアプリケーションを作ってみた。アプリケーションとは言ってもハイアンドローという簡単な数当てゲームなのだが、今後本格的にSwingで開発するようになったときのために自分用にメモしておく。 Swingで画面遷移するアプリケーション Swingでハイアンドローを作った。ハイアンドローは、現在の数字が次に来る数字より大きいか小さいかを当てるゲームである。数字は0～100までが使用される。次に来る数字が大きいと思ったらHigh、小さいと思ったらLowのボタンをクリックする。クリックしたボタンに応じて結果が分岐し、自分の答えが当たっていれば「正解」のメッセージ、外れていれば「不正解」のメッセージを表示する。 ソースコードは以下である。 import java.awt.Container; import javax.swing.JFrame; import frame.

CygwinにJavaをインストールしようと思い、Cygwinのsetup.exeやapt-cygからパッケージを探したのだが、見つからなかった。 調べてみるとCygwin用のJavaは提供されていないらしく、既存のCygwinユーザの方々は渋々Windows用のJavaを使っているようだ。しかし、Windows用のJavaをCygwinで使おうとすると、パスの書き方をWindowsのパスの書き方にしないといけなかったりで、なかなか煩わしい（Windowsのディレクトリ構造を表す円マークはCygwinではエスケープ文字という扱いがされていたりして）。 そこで、CygwinでJavaを快適に使うための方法が紹介されている記事を見つけたので、それを参考にしてjava_wrapperを導入してみたのでメモしておく。 java_wrapperを導入する まずは、こちらのサイトからjava_wrapperをダウンロードする。 Cygwin上でJavaコマンドを快適に使用する環境 プロジェクト日本語トップページ – SourceForge.JP ダウンロードしたjava_wrapperをCygwinの/binに配置する。 続いて、環境変数JAVA_HOMEにWindows版のJavaがインストールされている（binディレクトリが存在するディレクトリ）を設定する。[システムのプロパティ]

前の会社ではMacbook AirにiTerm2（ターミナル環境）、Alfred（アプリケーションランチャ）、Vim（エディタ）などをインストールして開発を行っていたが、転職に伴ってPCがIiyama製のWindowsノートパソコンに変わったので、前の開発環境になるべく近付けるように色々な設定を行った。 ターミナル環境 iTerm2の代わりにCygwinをインストールした。Cygwinは仮想的にターミナル環境を実現するツール郡である。Cygwinに付属のMinttyはiTerm2と比べてもほとんど遜色ないが、タブが使えないのが残念である（仕方がないので、tmuxのタブ機能で代替している）。 アプリケーションランチャー Alfredに代わるランチャとしてExecutorをインストールした。Alfredと比べて、Executorは無料であるが、Alfredの備える様々な機能には残念ながら及ばない。しかし、普通にランチャとして使うなら十分に納得のいくものである。 メインエディタ Macbookで開発していたときは、PHPとJavascriptをメインで書いていたこともあって、VimにneosnippetとneocomplcacheとSyntasticとJSLintを導入してやっていたが、転職に伴いメインで使う言語がJavaになってしまった。Javaと言えば、Eclipseが最強過ぎてVimではイマイチ追従出来ないのでEclipseにVrapper（Vimのキーバインディングを実現するプラグイン）を入れることで満足のいくものになった。

業務で使うのでJavaのSwingを勉強し始めた。ちょっと触ってみた所感としては、ゲームプログラミングみたいで楽しい。昔やってたフラッシュゲームのプログラミングに似ている。 Swingとは Swingは、プログラミング言語JavaのGUIツールキット。同じくJavaのGUIツールキットであるAWT（Abstract Window Toolkit）を拡張したもの。 AWTはオペレーティングシステムのウィンドウシステムに準じたデザインになるのに対し、Swingで作成したGUIはJavaプログラム上で描画されるので、より柔軟な設計が可能となる。AWTに対しSwingのようなコンポーネントを軽量コンポーネントと呼ぶ。プラグイン可能なルック・アンド・フィールを持っているので、簡単にルック・アンド・フィールを切り替えることができる。またAWTには無かった、表、スライダー、スピナ、ツリー表示をするコンポーネントなど高度なコンポーネントが用意されている。 コンテナとは Swingを使ったプログラムではベースとなるウィンドウを作成する。そしてウィンドウの中に様々な部品を追加していくことになる。 このウィンドウのような、コンポーネントを格納することが出来る機能を持った部品をコンテナ（英語では、

PHPを書いていたときは他に良いエディタが無かったから仕方なくVimを使ってたけど、Javaを書くときはEclipseでいいよね、ということでEclipseにVrapperを導入した。 Vrapperとは EclipseのキーバインドをVimっぽくしてくれるEclipseのプラグインである。 Vrapperの導入方法 [ヘルプ]->[新規ソフトウェアのインストール]にて、[作業対象]に以下のURLを入力してインストールする。 http://vrapper.sourceforge.net/update-site/stable インストールが終わると、Eclipseの上部メニューにVimのトグルボタンが追加されている。ボタンがオンになっている間はVimのキーバインドが有効になる。 キーバインドの設定 続いて、EclipseのキーバインドとVimのキーバインドで重複しているものを取り除く作業を行う。 メニューの[ウィンドウ]->[設定]->[一般]