Author Archives: 管理人

テーマを構成するテンプレートについて

個々のページを出力するテンプレート

ファイル名 内容
home.php サイトのトップページを出力
front-page.php サイトのトップページを出力
archive.php 月毎などのアーカイブページを出力
category.php カテゴリー毎のアーカイブページを出力
date.php 日付毎のアーカイブページを出力
single.php 個々の投稿ページを出力
page.php 個々の固定ページを出力
author.php 作成者別のアーカイブページを出力
tag.php タグ毎のアーカイブページを出力
search.php 検索結果のページを出力
404.php Not Foundのページを出力

各ページで共通な部分を出力するテンプレート

ファイル名 内容
header.php ヘッダー部分を出力
footer.php フッター部分を出力
sidebar.php サイドバー部分を出力
searchform.php 検索フォームを出力
comments.php コメント一覧とコメント入力フォームを出力

一部のページ飲みIDやスラッグで出力を分ける

ページの種類 テンプレートのファイル名
固定ページ page-ID.php,page-スラッグ.php
カテゴリー毎のアーカイブページ category-ID.php,category-スラッグ.php
タグ毎のアーカイブページ tag-ID.php,ID-スラッグ.php
ユーザー毎のアーカイブページ author-ID.php,author-スラッグ.php

[JAVA]アルゴリズムチャレンジ part.1(リニアサーチ)

[このシリーズでは何回かに分けて、定番アルゴリズムを紹介していきます。ぜひ、プログラミングの練習に活用ください。]

プログラミング技術を向上させる方法として、定番アルゴリズムを学習することを自分はオススメしています。
定番のアルゴリズムには、いいプログラムを作成するための考え方(ヒント)がたくさん詰まっています。これらのアルゴリスムから学んだヒントを活かして、より良いプログラムの作成を目指すことで、プログラミング技術は向上していきます。

リニアサーチ(線形探索法)

リニアサーチは定番アルゴリズムの中で、探索アルゴリズムというカテゴリーに分類されます。探索アルゴリズムは名前から連想できるように、目的のデータを探し出すアルゴリズムのことです。同じカテゴリーではリニアサーチの他にバイナリサーチ(二分探索法)、ハッシュ探索法などがあります。

リニアサーチのイメージ

リニアサーチを簡単に説明すると「データを先頭から順番に調べて探すアルゴリズム」です。
何だか小難しく聞こえるかもしれませんが、下記の流れ図やソースコードを見れば、ありふれた考え方であることに気づくと思います。
他のアルゴリズムに比べると、簡単なアルゴリスムの一つです。

例)ある配列の中から目的のデータを取得する
イメージ図

この図を見て、どんなコードを書けば良いのか、頭に浮かんできましたか?
今度は、アルゴリスムの流れを確認してみましょう。
フロート図

最後にソースコードにしたら、どうなるのか確認してみましょう。
プログラミングの練習でこの記事を読まれている方は、ここで一旦読むのを止めて、ソースコードを書いてみるのをお勧めします。
イメージ図とアルゴリズムの流れをヒントにソースコードを書いてみてください。書き終わったら、答え合わせをしてください。

リニアサーチ : サンプルコード[JAVA]

public class LinearSearch {
	
	public static void main(String[] args){
		//探索対象のリスト
		int array[] = new int[]{2,4,3,5,1};
		//ターゲット
		int target = 5;
		//探索結果の判定
		boolean canFind = false;
		
		for(int i=0;i<array.length;i++){
			if(array[i]==target){
				System.out.println(target+"は"+(i+1)+"番目である。");
				canFind = true;
				break;
			}
		}
		if(canFind==false){
			System.out.println("見つかりませんでした。");
		}
	}
}

いかかがでしょうか。このようなソースコードになるかと思われます。皆さんが書いたコードはどうでしょうか?
もっといい書き方があれば、ぜひご指摘ください。いや、心からお持ちしております!

この記事が皆様のお役に立てれば、幸いです。

意外と奥が深い!ライフゲーム作ってみました

皆さんはライフゲームはご存知ですか?ボードゲームの人生ゲームとか連想しそうですが、プログラミングに関係するライフゲームとなると、生命の誕生と死をシミュレーションするゲームを意味します。

ライフゲーム (Conway’s Game of Life[1]) は1970年にイギリスの数学者ジョン・ホートン・コンウェイ (John Horton Conway) が考案した生命の誕生、進化、淘汰などのプロセスを簡易的なモデルで再現したシミュレーションゲームである。単純なルールでその模様の変化を楽しめるため、パズルの要素を持っている。

ライフゲーム -Wikipedia

実際は下のイメージ図のように、緑色の点(生命)が条件に従って、誕生と消滅を繰り返していきます。無限ループに入る形状などがいくつかあるようです。

イメージ

lifegame

今回はJAVAでライフゲームを作成してみました。以下はサンプルコードになります。

サンプルコード

LifeGame.java

package lifeGame;
import java.awt.Color;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

import javax.swing.JButton;
import javax.swing.JFrame;

public class LifeGame extends JFrame implements ActionListener, Runnable{
	private static final long serialVersionUID = 1L;
	private JButton button1,button2;
	private LifePanel lifePanel;
	private Thread t;
	private boolean flg,kissOfDeath;
	
	public static void main(String[] args) {
		new LifeGame().setVisible(true);
	}
	public LifeGame(){
		this.setSize(530, 500);//Panel全体の大きさ
		setBackground(Color.black);
		flg = false;
		kissOfDeath = false;//スレッドのフラグ 命名はジョークのようなもの
		setLayout(null);
		//Startボタン
		button1 = new JButton();
		button1.setText("Strat");
		button1.setBounds(10, 420, 70, 20);
		getContentPane().add(button1);
		//Clearボタン
		button2 = new JButton();
		button2.setText("Clear");
		button2.setBounds(440, 420, 70, 20);
		getContentPane().add(button2);
		//LifePanel
		lifePanel = new LifePanel(100, 80);//LifePanelの大きさ
		lifePanel.setBounds(10, 10, 500, 400);
		lifePanel.setBackground(Color.black);
		getContentPane().add(lifePanel);
		button1.addActionListener(this);
		button2.addActionListener(this);
		setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
	}
	
	public void actionPerformed(ActionEvent ev){
		if(ev.getSource() == button1){//StartまたはStopボタン押下
			//開始前または停止中
			if(!flg){
				button1.setText("Stop");
				kissOfDeath = true;
				t = new Thread(this);
				t.start();
			} else {//稼働中
				kissOfDeath = false;
				button1.setText("Start");
			}
			flg = !flg;//フラグ切り替え(スマートな書き方で結構好きw)
			return;
		} else {//Clearボタン押下
			lifePanel.initialData();
			lifePanel.repaint();
			return;
		}
	}
	
	public void run(){
		//ライフサイクル
		do {
			lifePanel.checkAllLife();//パターン判定
			lifePanel.repaint();
			try {
				Thread.sleep(100L);
			}
			catch(Exception _ex){}
		} while(kissOfDeath);
	}
}

Lifepanel.java

package lifeGame;

import java.awt.Color;
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.Image;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;

import javax.swing.JPanel;

public class LifePanel extends JPanel{
	private static final long serialVersionUID = 1L;
	private boolean data[][];
	private int dataWidth;
	private int dataHeight;
	private Image offScreen;
	private Graphics offg;
	
	public LifePanel(){
		this(25, 25);
	}
	//LifePanel
	public LifePanel(int i, int j){
		dataWidth = i;
		dataHeight = j;
		setPreferredSize(new Dimension(dataWidth * 5,dataHeight * 5));
		initialData();
		addMouseListener(new MouseAdapter(){
			public void mousePressed(MouseEvent mouseevent){
				doMouseDown(mouseevent);
			}
		});
	}
	//最初のLifePanelの状態
	public void initialData(){
		data = new boolean[dataWidth][dataHeight];
		for(int i = 0; i < dataWidth; i++){
			for(int j = 0; j < dataHeight; j++){
				data[i][j] = false;
			}
		}
	}
	//セルをLifePanelにセット
	public void doMouseDown(MouseEvent ev){
		int i = ev.getX() / 5;
		int j = ev.getY() / 5;
		if(i >= dataWidth || j >= dataHeight){
			return;
		} else {
			data[i][j] = !data[i][j];
			repaint();
			return;
		}
	}
	
	public void update(Graphics g){
		paint(g);
	}
	//セルの状態をLifePanelに反映
	public void paint(Graphics g){
		if(offScreen == null){
			offScreen = createImage(dataWidth * 5, dataHeight * 5);
			offg = offScreen.getGraphics();
		}
		offg.setColor(Color.BLACK);
		offg.fillRect(0, 0, dataWidth * 5, dataHeight * 5);
		offg.setColor(Color.GREEN);
		for(int i = 0; i < dataWidth; i++){
			for(int j = 0; j < dataHeight; j++){
				if(data[i][j]){
					offg.fillRect(i * 5, j * 5, 4, 4);
				}
			}
		}
		g.clearRect(0, 0, getSize().width, getSize().height);
		g.drawImage(offScreen, 0, 0, this);
	}
	//LifePanel内のすべてのセルをパターン判定
	public void checkAllLife(){
		boolean aflag[][] = new boolean[dataWidth][dataHeight];
		for(int j = 0; j < dataWidth; j++){
			for(int k = 0; k < dataHeight; k++){
				int i = checkLife(j, k);
				aflag[j][k] = false;
				if(i == 2 && data[j][k]){
					aflag[j][k] = true;
				}
				if(i == 3){
					aflag[j][k] = true;
				}
				if(i < 2 || i > 3){
					aflag[j][k] = false;
				}
			}
		}
		for(int l = 0; l < dataWidth; l++){
			for(int i1 = 0; i1 < dataHeight; i1++){
				data[l][i1] = aflag[l][i1];
			}
		}
		repaint();
	}
	//パターン判定(詳細はwikipediaなどを参照ください)
	public int checkLife(int i, int j){
		int k = 0;
		int l = dataWidth;
		int i1 = dataHeight;
		return k = (k = (k = (k = (k = (k = (k =
				//三項演算子で周囲のセルを判定(こういう時に綺麗にかけるのいいですよね)
				(k += data[(i + l + -1) % l][(j + i1 + -1) % i1] ? 1 : 0)//左上のセル
				+ (data[(i + l) % l][(j + i1 + -1) % i1] ? 1 : 0))//左
				+ (data[(i + l + 1) % l][(j + i1 + -1) % i1] ? 1 : 0))//左下
				+ (data[(i + l + -1) % l][(j + i1) % i1] ? 1 : 0))//上
				+ (data[(i + l + 1) % l][(j + i1) % i1] ? 1 : 0))//下
				+ (data[(i + l + -1) % l][(j + i1 + 1) % i1] ? 1 : 0))//右上
				+ (data[(i + l) % l][(j + i1 + 1) % i1] ? 1 : 0))//右
				+ (data[(i + l + 1) % l][(j + i1 + 1) % i1] ? 1 : 0);//右下
	}
}

上記のソースコードをコピペするだけですぐにライフゲームを作成することができます。生存パターンを少し変えてみたりすることで、オリジナルのライフゲームを楽しむのも面白いかもしれませんね。また、プログラミンングの練習にも使えると思うので、初心者の方にはコードを真似てみるのもいいかもしれません。余計なお世話かもしれませんが、適当にコメントも追加しておきました。

この記事が皆様のお役に立てれば、幸いです。

コピペするだけで使える!CSSで会話形式のフキダシデザイン

色んなサイトを見ていると会話形式でフキダシになっている記事を見かけたりしますね。そのような記事で、シンプルで綺麗なデザインのものを見ると、どんな風にCSSを書いているんだろう?と、気になってしまいます。(開発者ツールでCSSを確認して、記事を読み切らずに終わってしまうこともしばしば笑)
今回は、この会話形式のフキダシデザインを作ってみました。そのままコピペで利用できるように仕上げておりますので、どんどん利用してください。

サンプルデザイン

質問者の写真

コピペで使える!CSSで会話形式のフキダシデザイン
アイコンを大きくするなら、のwidthとheigthを編集しましょう。

解答者の写真

コピペで使える!CSSで会話形式のフキダシデザイン
アイコンを左側にだけにするなら、balloon_answerのclass名をballoon_questionに編集しましょう。

イメージはこんな感じになります。
少しアレンジを加えたい方は、ソースコードのコメントを参考に手を加えてみてくださいね。

ソースコード

HTML

<div class="question_Box">
    <div class="question_image">
        <img src="質問者の写真" alt="質問者の写真" width="90" height="90"/>
    </div>
    <div class="balloon_question">
        <p>フキダシのコメントをここに書き込んでください。</p>
    </div><!-- /.balloon_question -->
</div><!-- /.question_Box -->

<div class="question_Box">
    <div class="answer_image">
        <img src="回答者の写真" alt="解答者の写真" width="90" height="90" />
    </div>
    <div class="balloon_answer">
        <p>フキダシのコメントをここに書き込んでください。</p>
    </div><!-- /.balloon_answer -->
</div><!-- /.question_Box -->

CSS

.balloon_answer,
.balloon_question {
    position: relative;
    background: #fff;
    border: 1px solid #c8c8c8;
    padding: 20px 15px;
    border-radius: 10px;
    width: 70%;
    font-size: 13px;
}
.balloon_question {
    float: right;
    margin-right: 20px;
}
.balloon_answer:after,
.balloon_answer:before,
.balloon_question:after,
.balloon_question:before {
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.balloon_question:after,
.balloon_question:before { right: 100%; }
.balloon_answer:after,
.balloon_answer:before { left: 100%; }
.balloon_answer:after,
.balloon_question:after {
    border-color: rgba(255, 255, 255, 0);
    border-width: 15px;
    margin-top: -15px;
}
.balloon_answer:after { border-left-color: #fff ; }
.balloon_question:after { border-right-color: #fff ; }
.balloon_answer:before,
.balloon_question:before {
    border-color: rgba(200, 200, 200, 0);
    border-width: 16px;
    margin-top: -16px;
}
.balloon_answer:before { border-left-color: #c8c8c8; }
.balloon_question:before { border-right-color: #c8c8c8; }
.question_image { float: left; }
.answer_image {
    float: right;
    margin-right: 20px;
}
.answer_image img,
.question_image img { 
    border-radius: 50px;
    border: 2px solid #00A1E0;//アイコンの枠の色を変更はここ
    padding: 5%;
}
.question_Box {
    margin-bottom: 25px;
    overflow: hidden;
}
//スマホ用
@media(max-width: 640px){
    .question_image,
    .answer_image { 
        width: 20%;
    }
    .answer_image img,
    .question_image img{
        width: 100%;
        height: 100%;
    }
    .balloon_answer,
    .balloon_question{
        width: 65%;
        padding: 10px 15px;
    }

}

この会話形式をもっと簡単に利用できるようにショートコードにしてしまうのが良さそうですね。
次回の記事では、これらをショートコード化する方法を紹介できればと思います。(WordPressの機能になります。)
今回、参考にさせていただいたサイト
CSSで会話形式のフキダシデザインを作ってみる

この記事が皆様のお役に立てれば、幸いです。

「PATHを通す」って、何なのさ?分かれば、環境構築が少し楽になる!?

AndroidStudio、Eclipseなどなど新しい開発ツールをダウンロードしてきて、まず最初にやることは環境構築ですね!
初心者の方にとっては、「えっ!ダウンロードしてきただけじゃ、使えないの!」と、思いますよね。自分もそう思っていました。しかも、環境構築がなかなか難しいんですよね…
今回は、まだまだ環境構築に慣れていない方の苦手意識がなくなるように、「PATH」について簡単に説明させていただきます。

PATHをわざわざ設定する必要あるの?

できることなら面倒な設定はしたくないですねよね。もし、PATHを設定しない場合どうなるのか図で確認してみましょう。
[PATHを設定していない場合]
PATHを設定していない場合 part1
きっと、プログラムはうまく実行されないと思います。本来ならば、「javac」というコマンドを入力すると「javac.exe」というプログラムファイルが実行される、という仕組みになっていますが、パソコンは「javac」というコマンドに合致するプログラムファイルを見つけることができないのです。

プログラムファイルを見つける仕組みは次のようになっています。
1.現在いるディレクトリにコマンドプロンプトで入力されたコマンドに合致するプログラムファイルがあるかどうか調べる。
2.合致するプログラムファイルがあればそれを実行する。無ければ、次へ。
3.PATH環境変数で指定されたパスにあるかどうかが調べます。
4.合致するプログラムファイルがあればそれを実行する。
というような仕組みになっています。

一般にコンピュータの中にはたくさんのプログラムファイルが存在していて、様々なディレクトリに散らばっています。
(今回はJAVAを取り上げていますが、PHPなど他の言語を制御するプログラムファイルも存在しているのです。)
コマンドが入力されたとき、その都度それらの全てについてコマンドに合致するかどうかを調べていくのは、かなり大変です。

もし、PATHを設定せずに、プログラムを実行するには、コマンドをこのように記入する必要があります。
PATHを設定していない場合 part2
毎回毎回、こんなコマンドを書くのは面倒ですよね…
この面倒な操作を省くために、[PATHを通す]ことになるのです。

PATHを設定することで操作がかなり楽になる!

最初は面倒な思いもしますが、PATHを設定できている場合を確認してみましょう!
PATHを設定している場合 part1
PATHを設定している場合 part2

このように最低限のコマンドで実行できるようになります。今回は分かりやすくするために、コマンドプロンプトからコマンドを入力した場合を例にしていますが、最初に少し触れたAndroidStudioやEclipseの内部でも同じようなことが行われています。これらはPATHが設定されていることを前提になっているので、利用する前にPATHの設定が必要になるのです。

まとめ

今回の記事でお伝えしたかったのは、
[PATHはプログラムファイルを探してくる場所を指定するもの]
[PATHを設定することで面倒な操作を省くことができる]
ということです。

初心者のうちは自分が何のためにやっているのか分からない操作がいくつもあると思います。そのうちの1つが、今回の[PATHの設定]ですね。分からない操作が少しずつ分かるようになってくると、苦手意識が無くなり、楽しくなってくると思います。
コツコツと分からないことを分かること、得意なことにしていきたいですね!

この記事がみなさんのお役に立てれば幸いです。
(この記事は簡単に説明させていただくために、小難しい内容はかなりざっくりと省いております。さらに詳しく理解したい方は、もう少し詳しく書かれた記事や文献を参考にすることをお勧めいたします。)