[はじめの一歩] Servlet からデータベースへの単純な問い合わせ

0
1475
views

Java で業務アプリなどの Webアプリを作るには、Servlet からデータベースに接続する機能、データの登録・削除・更新をする機能の作成はほぼ必須になってきます。

そこで、まずは簡単に Servlet からデータベース(PostgreSQL)に接続して、取り込んだレコードを画面に表示する一連の流れを作って、Javaアプリからデータベースへの接続の基本をつかんでみましょう。

注意点

前提

以下のページでの事前準備を実施済みであることが前提です。

PostgreSQLをインストールする:
http://snagimo.com/installing-postgresql-on-localhost

PostgreSQL はじめてのコマンド操作:
http://snagimo.com/psql-commands-for-the-first-time

[Eclipse] 動的Webプロジェクトに下準備をして PostgreSQL を使えるようにする:
http://snagimo.com/postgresql-jdbc-driver-and-context-xml-for-eclipse

考慮をしていない点

まずデータベースに単純に接続、問い合わせ、結果表示をしてみようということを主眼としているため、以下のような点は考慮していません。

  • 無駄な処理の排除
  • コードの可読性
  • 変更・処理追加の容易性
  • 起こりうる例外への配慮
  • 安全・安定性

ディレクトリ・ファイル構成

動的 Web プロジェクトで PlainDatabaseAccess(任意の名前)プロジェクトを作成します。ディレクトリ・ファイル構成は次のような感じです。

作成画面のイメージ

下記が作成する画面のイメージです。ボタンを押して、データベースに問い合わせた結果を画面に表示するというものです。

データベースに問い合わせた後、以下のように結果が表示されます。

以下に、このような単純な問い合わせ処理を実現するための初歩的なソースコードを示します。

画面表示処理

WebContent/index.jsp


<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="dbconnect.dto.FreshFishDTO"%>
<%@ page import="java.util.List"%>






DB接続テスト
</head>
<body>
	<header>
		<h1>DB接続テスト</h1>
	</header>
	<article>
		<table>
			<tr>
				<th>接続対象のテーブル名</th>
				<th>レコードの抽出条件</th>
			</tr>
			<tr>
				<td>fresh_fish</td>
				<td>魚種コード = 501 もしくは 魚種名 = いわし</td>
			</tr>
		</table>

		<form action="DatabaseAccessService" method="post">
			<input type="submit" name="ExecFindAll" value="DB からデータを取得する" />
		</form>

		<%
			if (session.getAttribute("FreshFishes") != null) {
		%>
		<p>上記条件でDBから抽出したレコードの詳細は以下の通りです。</p>
		<table>
			<tr>
				<th>鮮魚ID</th>
				<th>魚種コード</th>
				<th>魚種名</th>
				<th>産地</th>
				<th>価格</th>
			</tr>
			<%
				@SuppressWarnings("unchecked")
					List<FreshFishDTO> fishes = (List<FreshFishDTO>) session.getAttribute("FreshFishes");
					int i = 0;
					for (FreshFishDTO fish : fishes) {
			%>
			<tr>
				<td><%=fish.getFreshFishID()%></td>
				<td><%=fish.getFishCode()%></td>
				<td><%=fish.getFishName()%></td>
				<td><%=fish.getDistrict()%></td>
				<td><%=fish.getUnitPrice()%> 円</td>
			</tr>
			<%
				}
			%>
		</table>
		<form action="SessionInvalidService" method="post">
			<input type="submit" name="ExecDeleteDisplayContents"
				value="表示結果をクリアする" />
		</form>
		<%
			}
		%>
	</article>
</body>
</html></code></pre>
<h3>WebContent/css/main.css</h3>
<pre data-language="css"><code class="language-css">@CHARSET "UTF-8";
body {
	margin: 0;
	padding: 0 1em;
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue",
		"Noto Sans Japanese", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN,
		Arial, Meiryo, sans-serif;
}

article {
	margin: 0;
	padding: 0;
}

form {
	margin: 0;
	padding: 0;
}

form input[type="submit"] {
	margin: 1em 0;
	padding: 1em 2em;
	font-size: 1em;
}

form input[type="submit"]:hover {
	cursor: pointer;
}

h1 {
	margin: 1em 0;
	padding: 0;
	border-bottom: 1px solid #bbb;
	color: #555;
	font-size: 1em;
}

table {
	border-collapse: collapse;
}

th {
	margin: 0;
	padding: 0 1em;
	border: 1px solid #000;
	background-color: #ccc;
}

td {
	margin: 0;
	padding: 0 1em;
	border: 1px solid #000;
}</code></pre>
<h2>Servlet での問い合わせ処理</h2>
<h3>src/dbconnect/DatabaseAccessService.java</h3>
<pre data-language="java"><code class="language-java">package dbconnect;

import java.io.IOException;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

import javax.naming.InitialContext;
import javax.naming.NamingException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import javax.sql.DataSource;

import dbconnect.dto.FreshFishDTO;

/**
 * Servlet implementation class ConnectionService
 */
@WebServlet("/DatabaseAccessService")
public class DatabaseAccessService extends HttpServlet {
	private static final long serialVersionUID = 1L;

	/**
	 * @see HttpServlet#HttpServlet()
	 */
	public DatabaseAccessService() {
		super();
	}

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
	 *      response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doPost(request, response);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
	 *      response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		HttpSession session = request.getSession(false);

		String datasourceName = "java:comp/env/jdbc/foodShop";
		String sql = "SELECT * FROM fresh_fish WHERE fish_code = ? OR fish_name = ? ORDER BY fresh_fish_id;";
		int targetFishCode = 501;
		String targetFishName = "いわし";
		List fishes = new ArrayList<>();

		Connection connection = null;
		DataSource dataSource = null;

		try {
			InitialContext intitCtx = new InitialContext();
			dataSource = (DataSource) intitCtx.lookup(datasourceName);
		} catch (NamingException e) {
			e.printStackTrace();
		}
		try {
			connection = dataSource.getConnection();
		} catch (SQLException e) {
			e.printStackTrace();
		}

		try {
			PreparedStatement statement = connection.prepareStatement(sql);
			statement.setInt(1, targetFishCode);
			statement.setString(2, targetFishName);
			ResultSet resultSet = statement.executeQuery();

			while (resultSet.next()) {
				FreshFishDTO fish = new FreshFishDTO();
				fish.setFreshFishID(resultSet.getInt("fresh_fish_id"));
				fish.setFishCode(resultSet.getInt("fish_code"));
				fish.setFishName(resultSet.getString("fish_name"));
				fish.setDistrict(resultSet.getString("district"));
				fish.setUnitPrice(resultSet.getInt("unit_price"));
				fishes.add(fish);
			}
			connection.close();
		} catch (SQLException e) {
			e.printStackTrace();
		}

		session.setAttribute("FreshFishes", fishes);
		response.sendRedirect("index.jsp");
	}
}</code></pre>
<h2>Servlet での問い合わせ結果の破棄処理</h2>
<h3>src/dbconnect/SessionInvalidService.java</h3>
<pre data-language="java"><code class="language-java">package dbconnect;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

/**
 * Servlet implementation class SessionInvalidService
 */
@WebServlet("/SessionInvalidService")
public class SessionInvalidService extends HttpServlet {
	private static final long serialVersionUID = 1L;

	/**
	 * @see HttpServlet#HttpServlet()
	 */
	public SessionInvalidService() {
		super();
	}

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
	 *      response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doPost(request, response);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
	 *      response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		HttpSession session = request.getSession(false);
		if (hasSession(session)) {
			session.invalidate();
		}

		response.sendRedirect("index.jsp");
	}

	private boolean hasSession(HttpSession session) {
		return session != null;
	}
}</code></pre>
<h2>問い合わせ結果を詰め込むオブジェクト</h2>
<h3>src/dbconnect/dto/FreshFishDTO.java</h3>
<pre data-language="java"><code class="language-java">package dbconnect.dto;

public class FreshFishDTO {
	private int freshFishID;
	private int fishCode;
	private String fishName;
	private String district;
	private int unitPrice;

	public int getFreshFishID() {
		return freshFishID;
	}
	public void setFreshFishID(int freshFishID) {
		this.freshFishID = freshFishID;
	}
	public int getFishCode() {
		return fishCode;
	}
	public void setFishCode(int fishCode) {
		this.fishCode = fishCode;
	}
	public String getFishName() {
		return fishName;
	}
	public void setFishName(String fishName) {
		this.fishName = fishName;
	}
	public String getDistrict() {
		return district;
	}
	public void setDistrict(String district) {
		this.district = district;
	}
	public int getUnitPrice() {
		return unitPrice;
	}
	public void setUnitPrice(int unitPrice) {
		this.unitPrice = unitPrice;
	}
}</code></pre>
        </div>

        <footer>
                        
            <div class="td-post-source-tags">
                                            </div>

            <div class="td-block-row td-post-next-prev"><div class="td-block-span6 td-post-prev-post"><div class="td-post-next-prev-content"><span>前の記事</span><a href="http://snagimo.com/warning-of-unknown-tags-from-eclipse-when-wrote-html5-tags">Eclipse で HTML5 のタグを使うと警告が出てしまう</a></div></div><div class="td-next-prev-separator"></div><div class="td-block-span6 td-post-next-post"><div class="td-post-next-prev-content"><span>次の記事</span><a href="http://snagimo.com/git-push-to-remote-repository-from-eclipse">Eclipse 上のプロジェクトを GitHub・Bitbucket などのサービスにアップする方法</a></div></div></div>            <div class="author-box-wrap"><a href="http://snagimo.com/author/hashimoto-natsuki"><img alt='' src='http://0.gravatar.com/avatar/04d1f3d8d6deaef7b131eb544597a5d8?s=96&d=mm&r=g' srcset='http://0.gravatar.com/avatar/04d1f3d8d6deaef7b131eb544597a5d8?s=192&d=mm&r=g 2x' class='avatar avatar-96 photo' height='96' width='96' /></a><div class="desc"><div class="td-author-name vcard author"><span class="fn"><a href="http://snagimo.com/author/hashimoto-natsuki">橋本夏樹</a></span></div><div class="td-author-url"><a href="https://snagimo.com">https://snagimo.com</a></div><div class="td-author-description"></div><div class="td-author-social"></div><div class="clearfix"></div></div></div>            <div class="td-post-sharing td-post-sharing-bottom td-with-like"><span class="td-post-share-title">シェア</span>
            <div class="td-default-sharing">
	            <a class="td-social-sharing-buttons td-social-facebook" href="https://www.facebook.com/sharer.php?u=http%3A%2F%2Fsnagimo.com%2Ffirst-step-to-show-records-from-database-with-servlet" onclick="window.open(this.href, 'mywin','left=50,top=50,width=600,height=350,toolbar=0'); return false;"><i class="td-icon-facebook"></i><div class="td-social-but-text">Facebook</div></a>
	            <a class="td-social-sharing-buttons td-social-twitter" href="https://twitter.com/intent/tweet?text=%5B%E3%81%AF%E3%81%98%E3%82%81%E3%81%AE%E4%B8%80%E6%AD%A9%5D+Servlet+%E3%81%8B%E3%82%89%E3%83%87%E3%83%BC%E3%82%BF%E3%83%99%E3%83%BC%E3%82%B9%E3%81%B8%E3%81%AE%E5%8D%98%E7%B4%94%E3%81%AA%E5%95%8F%E3%81%84%E5%90%88%E3%82%8F%E3%81%9B&url=http%3A%2F%2Fsnagimo.com%2Ffirst-step-to-show-records-from-database-with-servlet&via=Snagimo"><i class="td-icon-twitter"></i><div class="td-social-but-text">Twitter</div></a>
	            <a class="td-social-sharing-buttons td-social-google" href="https://plus.google.com/share?url=http://snagimo.com/first-step-to-show-records-from-database-with-servlet" onclick="window.open(this.href, 'mywin','left=50,top=50,width=600,height=350,toolbar=0'); return false;"><i class="td-icon-googleplus"></i></a>
	            <a class="td-social-sharing-buttons td-social-pinterest" href="https://pinterest.com/pin/create/button/?url=http://snagimo.com/first-step-to-show-records-from-database-with-servlet&media=http://snagimo.com/wp-content/uploads/servlet_shows_records_from_postgresql.png&description=%5B%E3%81%AF%E3%81%98%E3%82%81%E3%81%AE%E4%B8%80%E6%AD%A9%5D+Servlet+%E3%81%8B%E3%82%89%E3%83%87%E3%83%BC%E3%82%BF%E3%83%99%E3%83%BC%E3%82%B9%E3%81%B8%E3%81%AE%E5%8D%98%E7%B4%94%E3%81%AA%E5%95%8F%E3%81%84%E5%90%88%E3%82%8F%E3%81%9B" onclick="window.open(this.href, 'mywin','left=50,top=50,width=600,height=350,toolbar=0'); return false;"><i class="td-icon-pinterest"></i></a>
	            <a class="td-social-sharing-buttons td-social-whatsapp" href="whatsapp://send?text=%5B%E3%81%AF%E3%81%98%E3%82%81%E3%81%AE%E4%B8%80%E6%AD%A9%5D+Servlet+%E3%81%8B%E3%82%89%E3%83%87%E3%83%BC%E3%82%BF%E3%83%99%E3%83%BC%E3%82%B9%E3%81%B8%E3%81%AE%E5%8D%98%E7%B4%94%E3%81%AA%E5%95%8F%E3%81%84%E5%90%88%E3%82%8F%E3%81%9B%20-%20http%3A%2F%2Fsnagimo.com%2Ffirst-step-to-show-records-from-database-with-servlet" ><i class="td-icon-whatsapp"></i></a>
            </div><div class="td-classic-sharing"><ul><li class="td-classic-facebook"><iframe frameBorder="0" src="http://www.facebook.com/plugins/like.php?href=http://snagimo.com/first-step-to-show-records-from-database-with-servlet&layout=button_count&show_faces=false&width=105&action=like&colorscheme=light&height=21" style="border:none; overflow:hidden; width:105px; height:21px; background-color:transparent;"></iframe></li><li class="td-classic-twitter"><a href="https://twitter.com/share" class="twitter-share-button" data-url="http://snagimo.com/first-step-to-show-records-from-database-with-servlet" data-text="[はじめの一歩] Servlet からデータベースへの単純な問い合わせ" data-via="" data-lang="en">tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></li></ul></div></div>	        <span style="display: none;" itemprop="author" itemscope itemtype="https://schema.org/Person"><meta itemprop="name" content="橋本夏樹"></span><meta itemprop="datePublished" content="2017-08-13T10:18:41+00:00"><meta itemprop="dateModified" content="2017-09-23T20:30:03+00:00"><meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="http://snagimo.com/first-step-to-show-records-from-database-with-servlet"/><span style="display: none;" itemprop="publisher" itemscope itemtype="https://schema.org/Organization"><span style="display: none;" itemprop="logo" itemscope itemtype="https://schema.org/ImageObject"><meta itemprop="url" content="http://snagimo.com/wp-content/uploads/img/2017/04/snagg_logo_header.png"></span><meta itemprop="name" content="Snagimo"></span><meta itemprop="headline " content="[はじめの一歩] Servlet からデータベースへの単純な問い合わせ"><span style="display: none;" itemprop="image" itemscope itemtype="https://schema.org/ImageObject"><meta itemprop="url" content="http://snagimo.com/wp-content/uploads/servlet_shows_records_from_postgresql.png"><meta itemprop="width" content="1068"><meta itemprop="height" content="544"></span>        </footer>
    </article> <!-- /.post -->

    <script>var block_td_uid_7_5b03cdd52563e = new tdBlock();
block_td_uid_7_5b03cdd52563e.id = "td_uid_7_5b03cdd52563e";
block_td_uid_7_5b03cdd52563e.atts = '{"limit":3,"sort":"","post_ids":"","tag_slug":"","autors_id":"","installed_post_types":"","category_id":"","category_ids":"","custom_title":"","custom_url":"","show_child_cat":"","sub_cat_ajax":"","ajax_pagination":"next_prev","header_color":"","header_text_color":"","ajax_pagination_infinite_stop":"","td_column_number":3,"td_ajax_preloading":"","td_ajax_filter_type":"td_custom_related","td_ajax_filter_ids":"","td_filter_default_txt":"\u5168\u90e8","color_preset":"","border_top":"","class":"td_uid_7_5b03cdd52563e_rand","el_class":"","offset":"","css":"","tdc_css":"","tdc_css_class":"td_uid_7_5b03cdd52563e_rand","tdc_css_class_style":"td_uid_7_5b03cdd52563e_rand_style","live_filter":"cur_post_same_categories","live_filter_cur_post_id":5552,"live_filter_cur_post_author":"2","block_template_id":""}';
block_td_uid_7_5b03cdd52563e.td_column_number = "3";
block_td_uid_7_5b03cdd52563e.block_type = "td_block_related_posts";
block_td_uid_7_5b03cdd52563e.post_count = "2";
block_td_uid_7_5b03cdd52563e.found_posts = "2";
block_td_uid_7_5b03cdd52563e.header_color = "";
block_td_uid_7_5b03cdd52563e.ajax_pagination_infinite_stop = "";
block_td_uid_7_5b03cdd52563e.max_num_pages = "1";
tdBlocksArray.push(block_td_uid_7_5b03cdd52563e);
</script><div class="td_block_wrap td_block_related_posts td_uid_7_5b03cdd52563e_rand td_with_ajax_pagination td-pb-border-top td_block_template_1"  data-td-block-uid="td_uid_7_5b03cdd52563e" ><h4 class="td-related-title td-block-title"><a id="td_uid_8_5b03cdd5265dc" class="td-related-left td-cur-simple-item" data-td_filter_value="" data-td_block_id="td_uid_7_5b03cdd52563e" href="#">関連記事</a><a id="td_uid_9_5b03cdd5269c4" class="td-related-right" data-td_filter_value="td_related_more_from_author" data-td_block_id="td_uid_7_5b03cdd52563e" href="#">同じ著者から</a></h4><div id=td_uid_7_5b03cdd52563e class="td_block_inner">

	<div class="td-related-row">

	<div class="td-related-span4">

        <div class="td_module_related_posts td-animation-stack td_mod_related_posts">
            <div class="td-module-image">
                <div class="td-module-thumb"><a href="http://snagimo.com/servlet-%e3%81%a7%e3%81%af-%e5%85%a5%e5%87%ba%e5%8a%9b%e3%81%ae%e3%83%aa%e3%82%bd%e3%83%bc%e3%82%b9%e3%83%95%e3%82%a1%e3%82%a4%e3%83%ab%e3%82%92%e3%81%a9%e3%81%93%e3%81%ab%e7%bd%ae%e3%81%8f%e3%81%ae" rel="bookmark" title="Servlet では 入出力のリソースファイルをどこに置くのがいいのか問題"><img width="198" height="145" class="entry-thumb" src="http://snagimo.com/wp-content/uploads/2017/12/hiking-path-way-198x145.jpg" srcset="http://snagimo.com/wp-content/uploads/2017/12/hiking-path-way-198x145.jpg 198w, http://snagimo.com/wp-content/uploads/2017/12/hiking-path-way-80x60.jpg 80w, http://snagimo.com/wp-content/uploads/2017/12/hiking-path-way-300x220.jpg 300w" sizes="(max-width: 198px) 100vw, 198px" alt="" title="Servlet では 入出力のリソースファイルをどこに置くのがいいのか問題"/></a></div>                <div class="td-post-category-wrap"><a href="http://snagimo.com/category/java/servlet" class="td-post-category">Servlet</a></div>
            </div>
            <div class="item-details">
                <h3 class="entry-title td-module-title"><a href="http://snagimo.com/servlet-%e3%81%a7%e3%81%af-%e5%85%a5%e5%87%ba%e5%8a%9b%e3%81%ae%e3%83%aa%e3%82%bd%e3%83%bc%e3%82%b9%e3%83%95%e3%82%a1%e3%82%a4%e3%83%ab%e3%82%92%e3%81%a9%e3%81%93%e3%81%ab%e7%bd%ae%e3%81%8f%e3%81%ae" rel="bookmark" title="Servlet では 入出力のリソースファイルをどこに置くのがいいのか問題">Servlet では 入出力のリソースファイルをどこに置くのがいいのか問題</a></h3>            </div>
        </div>
        
	</div> <!-- ./td-related-span4 -->

	<div class="td-related-span4">

        <div class="td_module_related_posts td-animation-stack td_mod_related_posts">
            <div class="td-module-image">
                <div class="td-module-thumb"><a href="http://snagimo.com/singleton-pattern-for-connecting-to-database" rel="bookmark" title="Singleton パターンによるDB接続クラス"><img width="198" height="145" class="entry-thumb" src="http://snagimo.com/wp-content/uploads/2017/09/alone-bikini-body-fun-198x145.jpeg" srcset="http://snagimo.com/wp-content/uploads/2017/09/alone-bikini-body-fun-198x145.jpeg 198w, http://snagimo.com/wp-content/uploads/2017/09/alone-bikini-body-fun-80x60.jpeg 80w, http://snagimo.com/wp-content/uploads/2017/09/alone-bikini-body-fun-300x220.jpeg 300w" sizes="(max-width: 198px) 100vw, 198px" alt="" title="Singleton パターンによるDB接続クラス"/></a></div>                <div class="td-post-category-wrap"><a href="http://snagimo.com/category/java/servlet" class="td-post-category">Servlet</a></div>
            </div>
            <div class="item-details">
                <h3 class="entry-title td-module-title"><a href="http://snagimo.com/singleton-pattern-for-connecting-to-database" rel="bookmark" title="Singleton パターンによるDB接続クラス">Singleton パターンによるDB接続クラス</a></h3>            </div>
        </div>
        
	</div> <!-- ./td-related-span4 --></div><!--./row-fluid--></div><div class="td-next-prev-wrap"><a href="#" class="td-ajax-prev-page ajax-page-disabled" id="prev-page-td_uid_7_5b03cdd52563e" data-td_block_id="td_uid_7_5b03cdd52563e"><i class="td-icon-font td-icon-menu-left"></i></a><a href="#"  class="td-ajax-next-page ajax-page-disabled" id="next-page-td_uid_7_5b03cdd52563e" data-td_block_id="td_uid_7_5b03cdd52563e"><i class="td-icon-font td-icon-menu-right"></i></a></div></div> <!-- ./block -->
	<div class="comments" id="comments">
            </div> <!-- /.content -->
                            </div>
                        </div>
                        <div class="td-pb-span4 td-main-sidebar" role="complementary">
                            <div class="td-ss-main-sidebar">
                                <div class="td-a-rec td-a-rec-id-sidebar td_block_wrap td_block_ad_box td_block_widget td_uid_10_5b03cdd52851c_rand td-pb-border-top td_block_template_1 "><span class="td-adspot-title">- Advertisement -</span><div class="td-rec-wrap"><div class="td-all-devices"><a href="#"><img src="http://snagimo.com/wp-content/uploads/fox_dribbble_1x.jpg"/></a></div></div></div><div class="td_block_wrap td_block_popular_categories td_block_widget td_uid_11_5b03cdd5290d3_rand widget widget_categories td-pb-border-top td_block_template_1"  data-td-block-uid="td_uid_11_5b03cdd5290d3" ><div class="td-block-title-wrap"><h4 class="block-title"><span>POPULAR CATEGORIES</span></h4></div><ul><li><a href="http://snagimo.com/category/wordpress">WordPress<span class="td-cat-no">19</span></a></li><li><a href="http://snagimo.com/category/css">CSS<span class="td-cat-no">9</span></a></li><li><a href="http://snagimo.com/category/excel">Excel<span class="td-cat-no">9</span></a></li><li><a href="http://snagimo.com/category/ruby">Ruby<span class="td-cat-no">8</span></a></li><li><a href="http://snagimo.com/category/os/windows/windows10">Windows 10<span class="td-cat-no">8</span></a></li><li><a href="http://snagimo.com/category/devlopment-tool">開発ツール<span class="td-cat-no">8</span></a></li></ul></div> <!-- ./block --><div class="td_block_wrap td_block_6 td_block_widget td_uid_12_5b03cdd52a45b_rand td-pb-border-top td_block_template_1 td-column-1"  data-td-block-uid="td_uid_12_5b03cdd52a45b" ><script>var block_td_uid_12_5b03cdd52a45b = new tdBlock();
block_td_uid_12_5b03cdd52a45b.id = "td_uid_12_5b03cdd52a45b";
block_td_uid_12_5b03cdd52a45b.atts = '{"limit":"5","sort":"random_posts","post_ids":"","tag_slug":"","autors_id":"","installed_post_types":"","category_id":"","category_ids":"","custom_title":"Most Recent","custom_url":"","show_child_cat":"","sub_cat_ajax":"","ajax_pagination":"","header_color":"","header_text_color":"","ajax_pagination_infinite_stop":"","td_column_number":1,"td_ajax_preloading":"","td_ajax_filter_type":"","td_ajax_filter_ids":"","td_filter_default_txt":"\u5168\u90e8","color_preset":"","border_top":"","class":"td_block_widget td_uid_12_5b03cdd52a45b_rand","el_class":"","offset":"","css":"","tdc_css":"","tdc_css_class":"td_uid_12_5b03cdd52a45b_rand","tdc_css_class_style":"td_uid_12_5b03cdd52a45b_rand_style","live_filter":"","live_filter_cur_post_id":"","live_filter_cur_post_author":"","block_template_id":""}';
block_td_uid_12_5b03cdd52a45b.td_column_number = "1";
block_td_uid_12_5b03cdd52a45b.block_type = "td_block_6";
block_td_uid_12_5b03cdd52a45b.post_count = "5";
block_td_uid_12_5b03cdd52a45b.found_posts = "116";
block_td_uid_12_5b03cdd52a45b.header_color = "";
block_td_uid_12_5b03cdd52a45b.ajax_pagination_infinite_stop = "";
block_td_uid_12_5b03cdd52a45b.max_num_pages = "24";
tdBlocksArray.push(block_td_uid_12_5b03cdd52a45b);
</script><div class="td-block-title-wrap"><h4 class="block-title"><span>Most Recent</span></h4></div><div id=td_uid_12_5b03cdd52a45b class="td_block_inner">
        <div class="td_module_6 td_module_wrap td-animation-stack" >
            <h3 class="entry-title td-module-title"><a href="http://snagimo.com/setting-classifications-for-culuculating" rel="bookmark" title="[ピボットテーブル] 集計を分類する項目を決める">[ピボットテーブル] 集計を分類する項目を決める</a></h3>
            <div class="td-module-meta-info td-no-comment td-category-small">
                <a href="http://snagimo.com/category/excel" class="td-post-category">Excel</a>                <span class="td-post-date"><time class="entry-date updated td-module-date" datetime="2017-05-04T16:47:39+00:00" >2017.05.04</time></span>            </div>

                    </div>

        
        <div class="td_module_6 td_module_wrap td-animation-stack" >
            <h3 class="entry-title td-module-title"><a href="http://snagimo.com/resolution-of-confliction-at-git-pull-request" rel="bookmark" title="プルリクエストで競合してしまったら、、のベタープラクティス">プルリクエストで競合してしまったら、、のベタープラクティス</a></h3>
            <div class="td-module-meta-info td-no-comment td-category-small">
                <a href="http://snagimo.com/category/devlopment-tool/git" class="td-post-category">Git</a>                <span class="td-post-date"><time class="entry-date updated td-module-date" datetime="2017-12-02T04:53:42+00:00" >2017.12.02</time></span>            </div>

                    </div>

        
        <div class="td_module_6 td_module_wrap td-animation-stack" >
            <h3 class="entry-title td-module-title"><a href="http://snagimo.com/get-domain-at-mu-mu-domain" rel="bookmark" title="ムームードメインでドメインを取得する">ムームードメインでドメインを取得する</a></h3>
            <div class="td-module-meta-info td-no-comment td-category-small">
                <a href="http://snagimo.com/category/wordpress" class="td-post-category">WordPress</a>                <span class="td-post-date"><time class="entry-date updated td-module-date" datetime="2016-11-10T07:13:34+00:00" >2016.11.10</time></span>            </div>

                    </div>

        
        <div class="td_module_6 td_module_wrap td-animation-stack" >
            <h3 class="entry-title td-module-title"><a href="http://snagimo.com/how-to-make-template-of-jasper-reports" rel="bookmark" title="帳票テンプレート タイトル周りの作成">帳票テンプレート タイトル周りの作成</a></h3>
            <div class="td-module-meta-info td-no-comment td-category-small">
                <a href="http://snagimo.com/category/devlopment-tool/jasperreports" class="td-post-category">JasperReports®</a>                <span class="td-post-date"><time class="entry-date updated td-module-date" datetime="2017-09-03T01:26:34+00:00" >2017.09.03</time></span>            </div>

                    </div>

        
        <div class="td_module_6 td_module_wrap td-animation-stack" >
            <h3 class="entry-title td-module-title"><a href="http://snagimo.com/managed-uploads-by-folders-of-categories" rel="bookmark" title="画像を年月フォルダでなく、カテゴリ別フォルダで管理する方法">画像を年月フォルダでなく、カテゴリ別フォルダで管理する方法</a></h3>
            <div class="td-module-meta-info td-no-comment td-category-small">
                <a href="http://snagimo.com/category/wordpress/website-architecture" class="td-post-category">サイト設計</a>                <span class="td-post-date"><time class="entry-date updated td-module-date" datetime="2016-10-02T07:23:00+00:00" >2016.10.02</time></span>            </div>

                    </div>

        </div></div> <!-- ./block -->                            </div>
                        </div>
                            </div> <!-- /.td-pb-row -->
    </div> <!-- /.td-container -->
</div> <!-- /.td-main-content-wrap -->

    <!-- Instagram -->
    
    <div class="td-footer-ad td-container-wrap">
            </div>

    <div class="td-footer-outer-wrapper td-container-wrap ">
        <!-- Footer -->
        <div class="td-footer-wrapper td-footer-template-2 ">
    <div class="td-container">
        <div class="td-pb-row">
            <div class="td-pb-span4">
                <div class="td_block_wrap td_block_3 td_uid_14_5b03cdd52f2d7_rand td-pb-border-top td_block_template_1 td-column-1"  data-td-block-uid="td_uid_14_5b03cdd52f2d7" ><script>var block_td_uid_14_5b03cdd52f2d7 = new tdBlock();
block_td_uid_14_5b03cdd52f2d7.id = "td_uid_14_5b03cdd52f2d7";
block_td_uid_14_5b03cdd52f2d7.atts = '{"limit":2,"sort":"featured","post_ids":"","tag_slug":"","autors_id":"","installed_post_types":"","category_id":"","category_ids":"","custom_title":"\u30a8\u30c7\u30a3\u30bf\u306e\u30d4\u30c3\u30af","custom_url":"","show_child_cat":"","sub_cat_ajax":"","ajax_pagination":"","header_color":"","header_text_color":"","ajax_pagination_infinite_stop":"","td_column_number":1,"td_ajax_preloading":"","td_ajax_filter_type":"","td_ajax_filter_ids":"","td_filter_default_txt":"\u5168\u90e8","color_preset":"","border_top":"","class":"td_uid_14_5b03cdd52f2d7_rand","el_class":"","offset":"","css":"","tdc_css":"","tdc_css_class":"td_uid_14_5b03cdd52f2d7_rand","tdc_css_class_style":"td_uid_14_5b03cdd52f2d7_rand_style","live_filter":"","live_filter_cur_post_id":"","live_filter_cur_post_author":"","block_template_id":""}';
block_td_uid_14_5b03cdd52f2d7.td_column_number = "1";
block_td_uid_14_5b03cdd52f2d7.block_type = "td_block_3";
block_td_uid_14_5b03cdd52f2d7.post_count = "2";
block_td_uid_14_5b03cdd52f2d7.found_posts = "3";
block_td_uid_14_5b03cdd52f2d7.header_color = "";
block_td_uid_14_5b03cdd52f2d7.ajax_pagination_infinite_stop = "";
block_td_uid_14_5b03cdd52f2d7.max_num_pages = "2";
tdBlocksArray.push(block_td_uid_14_5b03cdd52f2d7);
</script><div class="td-block-title-wrap"><h4 class="block-title"><span>エディタのピック</span></h4></div><div id=td_uid_14_5b03cdd52f2d7 class="td_block_inner">
        <div class="td_module_3 td_module_wrap td-animation-stack" >
            <div class="td-module-image td-module-image-float">
                <div class="td-module-thumb"><a href="http://snagimo.com/cant-execute-script-on-powershell" rel="bookmark" title="PowerShell でスクリプトが実行できない"><img width="100" height="70" class="entry-thumb" src="http://snagimo.com/wp-content/uploads/img/2017/03/1741/powershell-100x70.png" alt="" title="PowerShell でスクリプトが実行できない"/></a></div>            </div>

            <div class="td-item-details td-no-comment td-category-small">
                <h3 class="entry-title td-module-title"><a href="http://snagimo.com/cant-execute-script-on-powershell" rel="bookmark" title="PowerShell でスクリプトが実行できない">PowerShell でスクリプトが実行できない</a></h3>
                <div class="td-module-meta-info">
                    <a href="http://snagimo.com/category/os/windows/windows10" class="td-post-category">Windows 10</a>                    <span class="td-post-date"><time class="entry-date updated td-module-date" datetime="2017-03-26T17:25:56+00:00" >2017.03.26</time></span>                </div>
            </div>

                        <div class="clearfix"></div>
        </div>

        
        <div class="td_module_3 td_module_wrap td-animation-stack" >
            <div class="td-module-image td-module-image-float">
                <div class="td-module-thumb"><a href="http://snagimo.com/how-to-move-thunderbird" rel="bookmark" title="Thunderbird の引っ越し方法"><img width="100" height="70" class="entry-thumb" src="http://snagimo.com/wp-content/uploads/img/2016/11/1542/thunderbird-100x70.png" alt="" title="Thunderbird の引っ越し方法"/></a></div>            </div>

            <div class="td-item-details td-no-comment td-category-small">
                <h3 class="entry-title td-module-title"><a href="http://snagimo.com/how-to-move-thunderbird" rel="bookmark" title="Thunderbird の引っ越し方法">Thunderbird の引っ越し方法</a></h3>
                <div class="td-module-meta-info">
                    <a href="http://snagimo.com/category/devlopment-tool" class="td-post-category">開発ツール</a>                    <span class="td-post-date"><time class="entry-date updated td-module-date" datetime="2016-11-16T06:45:47+00:00" >2016.11.16</time></span>                </div>
            </div>

                        <div class="clearfix"></div>
        </div>

        </div></div> <!-- ./block -->                            </div>

            <div class="td-pb-span4">
                <div class="td_block_wrap td_block_3 td_uid_15_5b03cdd53253e_rand td-pb-border-top td_block_template_1 td-column-1"  data-td-block-uid="td_uid_15_5b03cdd53253e" ><script>var block_td_uid_15_5b03cdd53253e = new tdBlock();
block_td_uid_15_5b03cdd53253e.id = "td_uid_15_5b03cdd53253e";
block_td_uid_15_5b03cdd53253e.atts = '{"limit":2,"sort":"popular","post_ids":"","tag_slug":"","autors_id":"","installed_post_types":"","category_id":"","category_ids":"","custom_title":"\u4eba\u6c17\u306e\u6295\u7a3f","custom_url":"","show_child_cat":"","sub_cat_ajax":"","ajax_pagination":"","header_color":"","header_text_color":"","ajax_pagination_infinite_stop":"","td_column_number":1,"td_ajax_preloading":"","td_ajax_filter_type":"","td_ajax_filter_ids":"","td_filter_default_txt":"\u5168\u90e8","color_preset":"","border_top":"","class":"td_uid_15_5b03cdd53253e_rand","el_class":"","offset":"","css":"","tdc_css":"","tdc_css_class":"td_uid_15_5b03cdd53253e_rand","tdc_css_class_style":"td_uid_15_5b03cdd53253e_rand_style","live_filter":"","live_filter_cur_post_id":"","live_filter_cur_post_author":"","block_template_id":""}';
block_td_uid_15_5b03cdd53253e.td_column_number = "1";
block_td_uid_15_5b03cdd53253e.block_type = "td_block_3";
block_td_uid_15_5b03cdd53253e.post_count = "2";
block_td_uid_15_5b03cdd53253e.found_posts = "116";
block_td_uid_15_5b03cdd53253e.header_color = "";
block_td_uid_15_5b03cdd53253e.ajax_pagination_infinite_stop = "";
block_td_uid_15_5b03cdd53253e.max_num_pages = "58";
tdBlocksArray.push(block_td_uid_15_5b03cdd53253e);
</script><div class="td-block-title-wrap"><h4 class="block-title"><span>人気の投稿</span></h4></div><div id=td_uid_15_5b03cdd53253e class="td_block_inner">
        <div class="td_module_3 td_module_wrap td-animation-stack" >
            <div class="td-module-image td-module-image-float">
                <div class="td-module-thumb"><a href="http://snagimo.com/universal-adb" rel="bookmark" title="[Vysor 下準備(2) ] Windows 向け Android デバッグドライバ(ADB)のインストール"><img width="100" height="70" class="entry-thumb" src="http://snagimo.com/wp-content/uploads/img/2016/11/1192/download-windows-installer-100x70.png" alt="" title="[Vysor 下準備(2) ] Windows 向け Android デバッグドライバ(ADB)のインストール"/></a></div>            </div>

            <div class="td-item-details td-no-comment td-category-small">
                <h3 class="entry-title td-module-title"><a href="http://snagimo.com/universal-adb" rel="bookmark" title="[Vysor 下準備(2) ] Windows 向け Android デバッグドライバ(ADB)のインストール">[Vysor 下準備(2) ] Windows 向け Android デバッグドライバ(ADB)のインストール</a></h3>
                <div class="td-module-meta-info">
                    <a href="http://snagimo.com/category/smartphone" class="td-post-category">スマートフォン</a>                    <span class="td-post-date"><time class="entry-date updated td-module-date" datetime="2016-11-02T06:41:39+00:00" >2016.11.02</time></span>                </div>
            </div>

                        <div class="clearfix"></div>
        </div>

        
        <div class="td_module_3 td_module_wrap td-animation-stack" >
            <div class="td-module-image td-module-image-float">
                <div class="td-module-thumb"><a href="http://snagimo.com/vysor" rel="bookmark" title="[Vysor まとめ] スマートフォンの画面をPCに表示させる Vysor を使う"><img width="100" height="70" class="entry-thumb" src="http://snagimo.com/wp-content/uploads/img/2016/11/1177/successed-connecting-100x70.png" alt="" title="[Vysor まとめ] スマートフォンの画面をPCに表示させる Vysor を使う"/></a></div>            </div>

            <div class="td-item-details td-no-comment td-category-small">
                <h3 class="entry-title td-module-title"><a href="http://snagimo.com/vysor" rel="bookmark" title="[Vysor まとめ] スマートフォンの画面をPCに表示させる Vysor を使う">[Vysor まとめ] スマートフォンの画面をPCに表示させる Vysor を使う</a></h3>
                <div class="td-module-meta-info">
                    <a href="http://snagimo.com/category/smartphone" class="td-post-category">スマートフォン</a>                    <span class="td-post-date"><time class="entry-date updated td-module-date" datetime="2016-11-04T05:52:03+00:00" >2016.11.04</time></span>                </div>
            </div>

                        <div class="clearfix"></div>
        </div>

        </div></div> <!-- ./block -->                            </div>

            <div class="td-pb-span4">
                <div class="td_block_wrap td_block_popular_categories td_uid_16_5b03cdd535bec_rand widget widget_categories td-pb-border-top td_block_template_1"  data-td-block-uid="td_uid_16_5b03cdd535bec" ><div class="td-block-title-wrap"><h4 class="block-title"><span>人気カテゴリ</span></h4></div><ul><li><a href="http://snagimo.com/category/wordpress">WordPress<span class="td-cat-no">19</span></a></li><li><a href="http://snagimo.com/category/css">CSS<span class="td-cat-no">9</span></a></li><li><a href="http://snagimo.com/category/excel">Excel<span class="td-cat-no">9</span></a></li><li><a href="http://snagimo.com/category/ruby">Ruby<span class="td-cat-no">8</span></a></li><li><a href="http://snagimo.com/category/os/windows/windows10">Windows 10<span class="td-cat-no">8</span></a></li></ul></div> <!-- ./block -->                            </div>
        </div>

        <div class="td-pb-row">
            <div class="td-pb-span12"><aside class="footer-social-wrap">
            <span class="td-social-icon-wrap">
                <a target="_blank" href="#" title="Facebook">
                    <i class="td-icon-font td-icon-facebook"></i>
                    <span class="td-social-name">Facebook</span>
                </a>
            </span>
            <span class="td-social-icon-wrap">
                <a target="_blank" href="#" title="Instagram">
                    <i class="td-icon-font td-icon-instagram"></i>
                    <span class="td-social-name">Instagram</span>
                </a>
            </span>
            <span class="td-social-icon-wrap">
                <a target="_blank" href="#" title="Twitter">
                    <i class="td-icon-font td-icon-twitter"></i>
                    <span class="td-social-name">Twitter</span>
                </a>
            </span>
            <span class="td-social-icon-wrap">
                <a target="_blank" href="#" title="Youtube">
                    <i class="td-icon-font td-icon-youtube"></i>
                    <span class="td-social-name">Youtube</span>
                </a>
            </span></aside></div><div class="td-pb-span12"><aside class="footer-logo-wrap"><a href="http://snagimo.com/"><img class="td-retina-data" src="http://snagimo.com/wp-content/uploads/img/2017/04/snagg_logo_footer.png" data-retina="http://snagimo.com/wp-content/uploads/img/2017/04/snagg_logo_footer.png" alt="" title="" width="272" /></a></aside></div>        </div>
    </div>
</div>
        <!-- Sub Footer -->

                    <div class="td-sub-footer-container">
                <div class="td-container">
                    <div class="td-pb-row">
                        <div class="td-pb-span12 td-sub-footer-menu">
                            <div class="menu-td-demo-footer-menu-container"><ul id="menu-td-demo-footer-menu" class="td-subfooter-menu"><li id="menu-item-5249" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-first td-menu-item td-normal-menu menu-item-5249"><a href="#">Home</a></li>
<li id="menu-item-5250" class="menu-item menu-item-type-custom menu-item-object-custom td-menu-item td-normal-menu menu-item-5250"><a href="#">About</a></li>
<li id="menu-item-5251" class="menu-item menu-item-type-custom menu-item-object-custom td-menu-item td-normal-menu menu-item-5251"><a href="#">contact</a></li>
</ul></div>                        </div>

                        <div class="td-pb-span12 td-sub-footer-copy">
                            © 2017 ionMag Theme - All rights reserved. Free WordPress Theme created with <i class="td-icon-heart"></i> by <b>WPIon</b>.
                        </div>
                    </div>
                </div>
            </div>
            </div>
</div><!--close td-outer-wrap-->

                <div class="td-more-articles-box">
                    <i class="td-icon-close td-close-more-articles-box"></i>
                    <span class="td-more-articles-box-title">他の記事</span>
                    <div class="td-content-more-articles-box">

                    
        <div class="td_module_3 td_module_wrap td-animation-stack" >
            <div class="td-module-image td-module-image-float">
                <div class="td-module-thumb"><a href="http://snagimo.com/bem" rel="bookmark" title="BEM という命名規則"><img width="100" height="70" class="entry-thumb" src="http://snagimo.com/wp-content/uploads/bloom-book-botanical-cactus-100x70.jpeg" alt="" title="BEM という命名規則"/></a></div>            </div>

            <div class="td-item-details td-no-comment td-category-small">
                <h3 class="entry-title td-module-title"><a href="http://snagimo.com/bem" rel="bookmark" title="BEM という命名規則">BEM という命名規則</a></h3>
                <div class="td-module-meta-info">
                    <a href="http://snagimo.com/category/css" class="td-post-category">CSS</a>                    <span class="td-post-date"><time class="entry-date updated td-module-date" datetime="2017-09-17T16:19:02+00:00" >2017.09.17</time></span>                </div>
            </div>

                        <div class="clearfix"></div>
        </div>

        
        <div class="td_module_3 td_module_wrap td-animation-stack" >
            <div class="td-module-image td-module-image-float">
                <div class="td-module-thumb"><a href="http://snagimo.com/installing-postgresql-on-localhost" rel="bookmark" title="PostgreSQLをインストールする"><img width="100" height="70" class="entry-thumb" src="http://snagimo.com/wp-content/uploads/download_postgresql-_binaries-100x70.png" alt="" title="PostgreSQLをインストールする"/></a></div>            </div>

            <div class="td-item-details td-no-comment td-category-small">
                <h3 class="entry-title td-module-title"><a href="http://snagimo.com/installing-postgresql-on-localhost" rel="bookmark" title="PostgreSQLをインストールする">PostgreSQLをインストールする</a></h3>
                <div class="td-module-meta-info">
                    <a href="http://snagimo.com/category/database/postgresql" class="td-post-category">PostgreSQL</a>                    <span class="td-post-date"><time class="entry-date updated td-module-date" datetime="2017-07-31T14:32:53+00:00" >2017.07.31</time></span>                </div>
            </div>

                        <div class="clearfix"></div>
        </div>

        
        <div class="td_module_3 td_module_wrap td-animation-stack" >
            <div class="td-module-image td-module-image-float">
                <div class="td-module-thumb"><a href="http://snagimo.com/erase-gray-line-as-ruler-on-eclipse" rel="bookmark" title="Eclipse のエディタに表示されるグレーの縦線を消す"><img width="100" height="70" class="entry-thumb" src="http://snagimo.com/wp-content/uploads/img/2017/01/2114/00_pigeons-439197_1280-100x70.jpg" alt="" title="Eclipse のエディタに表示されるグレーの縦線を消す"/></a></div>            </div>

            <div class="td-item-details td-no-comment td-category-small">
                <h3 class="entry-title td-module-title"><a href="http://snagimo.com/erase-gray-line-as-ruler-on-eclipse" rel="bookmark" title="Eclipse のエディタに表示されるグレーの縦線を消す">Eclipse のエディタに表示されるグレーの縦線を消す</a></h3>
                <div class="td-module-meta-info">
                    <a href="http://snagimo.com/category/devlopment-tool" class="td-post-category">開発ツール</a>                    <span class="td-post-date"><time class="entry-date updated td-module-date" datetime="2017-01-14T21:33:49+00:00" >2017.01.14</time></span>                </div>
            </div>

                        <div class="clearfix"></div>
        </div>

        
        <div class="td_module_3 td_module_wrap td-animation-stack" >
            <div class="td-module-image td-module-image-float">
                <div class="td-module-thumb"><a href="http://snagimo.com/set-values-for-culculating" rel="bookmark" title="[ピボットテーブル] 集計対象の値を決める"><img width="100" height="70" class="entry-thumb" src="http://snagimo.com/wp-content/uploads/img/2017/05/3858/guilherme-cunha-242693-100x70.png" alt="" title="[ピボットテーブル] 集計対象の値を決める"/></a></div>            </div>

            <div class="td-item-details td-no-comment td-category-small">
                <h3 class="entry-title td-module-title"><a href="http://snagimo.com/set-values-for-culculating" rel="bookmark" title="[ピボットテーブル] 集計対象の値を決める">[ピボットテーブル] 集計対象の値を決める</a></h3>
                <div class="td-module-meta-info">
                    <a href="http://snagimo.com/category/excel" class="td-post-category">Excel</a>                    <span class="td-post-date"><time class="entry-date updated td-module-date" datetime="2017-05-04T16:22:26+00:00" >2017.05.04</time></span>                </div>
            </div>

                        <div class="clearfix"></div>
        </div>

        
        <div class="td_module_3 td_module_wrap td-animation-stack" >
            <div class="td-module-image td-module-image-float">
                <div class="td-module-thumb"><a href="http://snagimo.com/blisk-browser" rel="bookmark" title="Web開発用ブラウザ: Blisk"><img width="100" height="70" class="entry-thumb" src="http://snagimo.com/wp-content/uploads/img/2016/11/1528/blisk_top_page-100x70.png" alt="" title="Web開発用ブラウザ: Blisk"/></a></div>            </div>

            <div class="td-item-details td-no-comment td-category-small">
                <h3 class="entry-title td-module-title"><a href="http://snagimo.com/blisk-browser" rel="bookmark" title="Web開発用ブラウザ: Blisk">Web開発用ブラウザ: Blisk</a></h3>
                <div class="td-module-meta-info">
                    <a href="http://snagimo.com/category/devlopment-tool" class="td-post-category">開発ツール</a>                    <span class="td-post-date"><time class="entry-date updated td-module-date" datetime="2016-11-15T06:20:44+00:00" >2016.11.15</time></span>                </div>
            </div>

                        <div class="clearfix"></div>
        </div>

        
        <div class="td_module_3 td_module_wrap td-animation-stack" >
            <div class="td-module-image td-module-image-float">
                <div class="td-module-thumb"><a href="http://snagimo.com/at-this-pace" rel="bookmark" title="at this pace"><img width="100" height="70" class="entry-thumb" src="http://snagimo.com/wp-content/uploads/2018/01/graph_up-100x70.png" alt="" title="at this pace"/></a></div>            </div>

            <div class="td-item-details td-no-comment td-category-small">
                <h3 class="entry-title td-module-title"><a href="http://snagimo.com/at-this-pace" rel="bookmark" title="at this pace">at this pace</a></h3>
                <div class="td-module-meta-info">
                    <a href="http://snagimo.com/category/%e8%8b%b1%e8%aa%9e" class="td-post-category">英語</a>                    <span class="td-post-date"><time class="entry-date updated td-module-date" datetime="2018-01-01T07:13:45+00:00" >2018.01.01</time></span>                </div>
            </div>

                        <div class="clearfix"></div>
        </div>

                            </div>
                </div>

    <!--

        Theme: ionMag by tagDiv.com 2017
        Version: 2.0 (rara)
        Deploy mode: deploy
        
        uid: 5b03cdd53ec71
    -->

    <script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.3/MathJax.js?config=TeX-MML-AM_CHTML%2CSafe.js&ver=4.9.5'></script>
<script type='text/javascript' src='http://snagimo.com/wp-content/themes/ionMag/js/tagdiv_theme.min.js?ver=2.0'></script>
<script type='text/javascript' src='http://snagimo.com/wp-includes/js/comment-reply.min.js?ver=4.9.5'></script>
<script type='text/javascript' src='http://snagimo.com/wp-content/plugins/ank-prism-for-wp/out/prism-js.min.js?ver=1520690315'></script>
<script type='text/javascript' src='http://snagimo.com/wp-includes/js/wp-embed.min.js?ver=4.9.5'></script>

<!-- JS generated by theme -->

<script>
    

	

		(function(){
			var html_jquery_obj = jQuery('html');

			if (html_jquery_obj.length && (html_jquery_obj.is('.ie8') || html_jquery_obj.is('.ie9'))) {

				var path = 'http://snagimo.com/wp-content/themes/ionMag-child/style.css';

				jQuery.get(path, function(data) {

					var str_split_separator = '#td_css_split_separator';
					var arr_splits = data.split(str_split_separator);
					var arr_length = arr_splits.length;

					if (arr_length > 1) {

						var dir_path = 'http://snagimo.com/wp-content/themes/ionMag';
						var splited_css = '';

						for (var i = 0; i < arr_length; i++) {
							if (i > 0) {
								arr_splits[i] = str_split_separator + ' ' + arr_splits[i];
							}
							//jQuery('head').append('<style>' + arr_splits[i] + '</style>');

							var formated_str = arr_splits[i].replace(/\surl\(\'(?!data\:)/gi, function regex_function(str) {
								return ' url(\'' + dir_path + '/' + str.replace(/url\(\'/gi, '').replace(/^\s+|\s+$/gm,'');
							});

							splited_css += "<style>" + formated_str + "</style>";
						}

						var td_theme_css = jQuery('link#td-theme-css');

						if (td_theme_css.length) {
							td_theme_css.after(splited_css);
						}
					}
				});
			}
		})();

	
	
</script>



			<div id="tdw-css-writer" style="display: none" class="tdw-drag-dialog tdc-window-sidebar">
				<header>

				
					<a title="Editor" class="tdw-tab tdc-tab-active" href="#" data-tab-content="tdw-tab-editor">Edit with Live CSS</a>
					<div class="tdw-less-info" title="This will be red when errors are detected in your CSS and LESS"></div>
				
				</header>
				<div class="tdw-content">

					
					<div class="tdw-tabs-content tdw-tab-editor tdc-tab-content-active">


						<script>

							(function(jQuery, undefined) {

								jQuery(window).ready(function() {

									if ( 'undefined' !== typeof tdcAdminIFrameUI ) {
										var $liveIframe  = tdcAdminIFrameUI.getLiveIframe();

										if ( $liveIframe.length ) {
											$liveIframe.load(function() {
												$liveIframe.contents().find( 'body').append( '<textarea class="tdw-css-writer-editor" style="display: none"></textarea>' );
											});
										}
									}

								});

							})(jQuery);

						</script>


						<textarea class="tdw-css-writer-editor td_live_css_uid_1_5b03cdd53f443"></textarea>
						<div id="td_live_css_uid_1_5b03cdd53f443" class="td-code-editor"></div>


						<script>
							jQuery(window).load(function (){

								if ( 'undefined' !== typeof tdLiveCssInject ) {

									tdLiveCssInject.init();


									var editor_textarea = jQuery('.td_live_css_uid_1_5b03cdd53f443');
									var languageTools = ace.require("ace/ext/language_tools");
									var tdcCompleter = {
										getCompletions: function (editor, session, pos, prefix, callback) {
											if (prefix.length === 0) {
												callback(null, []);
												return
											}

											if ('undefined' !== typeof tdcAdminIFrameUI) {

												var data = {
													error: undefined,
													getShortcode: ''
												};

												tdcIFrameData.getShortcodeFromData(data);

												if (!_.isUndefined(data.error)) {
													tdcDebug.log(data.error);
												}

												if (!_.isUndefined(data.getShortcode)) {

													var regex = /el_class=\"([A-Za-z0-9_-]*\s*)+\"/g,
														results = data.getShortcode.match(regex);

													var elClasses = {};

													for (var i = 0; i < results.length; i++) {
														var currentClasses = results[i]
															.replace('el_class="', '')
															.replace('"', '')
															.split(' ');

														for (var j = 0; j < currentClasses.length; j++) {
															if (_.isUndefined(elClasses[currentClasses[j]])) {
																elClasses[currentClasses[j]] = '';
															}
														}
													}

													var arrElClasses = [];

													for (var prop in elClasses) {
														arrElClasses.push(prop);
													}

													callback(null, arrElClasses.map(function (item) {
														return {
															name: item,
															value: item,
															meta: 'in_page'
														}
													}));
												}
											}
										}
									};
									languageTools.addCompleter(tdcCompleter);

									window.editor = ace.edit("td_live_css_uid_1_5b03cdd53f443");

									// 'change' handler is written as function because it's called by tdc_on_add_css_live_components (of wp_footer hook)
									// We did it to reattach the existing compiled css to the new content received from server.
									window.editorChangeHandler = function () {
										//tdwState.lessWasEdited = true;

										window.onbeforeunload = function () {
											if (tdwState.lessWasEdited) {
												return "You have attempted to leave this page. Are you sure?";
											}
											return false;
										};

										var editorValue = editor.getSession().getValue();

										editor_textarea.val(editorValue);

										if ('undefined' !== typeof tdcAdminIFrameUI) {
											tdcAdminIFrameUI.getLiveIframe().contents().find('.tdw-css-writer-editor:first').val(editorValue);

											// Mark the content as modified
											// This is important for showing info when composer closes
                                            tdcMain.setContentModified();
										}

										tdLiveCssInject.less();
									};

									editor.getSession().setValue(editor_textarea.val());
									editor.getSession().on('change', editorChangeHandler);

									editor.setTheme("ace/theme/textmate");
									editor.setShowPrintMargin(false);
									editor.getSession().setMode("ace/mode/less");
									editor.setOptions({
										enableBasicAutocompletion: true,
										enableSnippets: true,
										enableLiveAutocompletion: false
									});

								}

							});
						</script>

					</div>
				</div>

				<footer>

					
						<a href="#" class="tdw-save-css">Save</a>
						<div class="tdw-more-info-text">Write CSS OR LESS and hit save. CTRL + SPACE for auto-complete.</div>

					
					<div class="tdw-resize"></div>
				</footer>
			</div>
			
</body>
</html>