技術メモ1年目

技術のメモ

Datepickerでカレンダー表示(javascript)

以下参考ページ

www.webdesign-fan.com

www.hanemaru.com

Datepickerの使い方と設定のまとめ|Pedal Blog

GoogleMap APIのjavascriptメモ

以下のAPIを利用
developers.google.com

javascript

/**
 * googleMapAPIを利用する際のscript
 */
var map;
var marker = [];
var infoWindow = [];
var markerData = [];
var currentInfoWindow = null;	//最後に開いた情報ウィンドウを記憶

//イベントの情報、緯度、経度を格納していく関数
function setArray(info,lat,lng,url){
	var temp = {name : info, lat : parseFloat(lat), lng : parseFloat(lng), url : url};
	markerData.push(temp);
};

function initMap() {
	// 地図の作成
	var mapLatLng = new google.maps.LatLng({
		lat : markerData[0]['lat'],
		lng : markerData[0]['lng']
	}); // 緯度経度のデータ作成
	map = new google.maps.Map(document.getElementById('map'), { // #に地図を埋め込む
		center : mapLatLng, // 地図の中心を指定
		zoom : 9,	// 地図のズームを指定
		mapTypeId: google.maps.MapTypeId.HYBRID

	});

	// マーカー毎の処理
	for (var i = 0; i < markerData.length; i++) {
		markerLatLng = new google.maps.LatLng({
			lat : markerData[i]['lat'],
			lng : markerData[i]['lng']
		}); // 緯度経度のデータ作成
		marker[i] = new google.maps.Marker({ // マーカーの追加
			position : markerLatLng, // マーカーを立てる位置を指定
			map : map
		// マーカーを立てる地図を指定
		});

		infoWindow[i] = new google.maps.InfoWindow({ // 吹き出しの追加
			content : 'ここに情報ウィンドウに表示させるHTMLを記載', // 吹き出しに表示する内容
		});

		markerEvent(i); // マーカーにクリックイベントを追加
	}
}

// マーカーにクリックイベントを追加
function markerEvent(i) {
	marker[i].addListener('click', function() { // マーカーをクリックしたとき
		
		//別のwindowを表示させるとき現在のwindowを閉じる
		if(currentInfoWindow != null){
			currentInfoWindow.close();
		}
		
		infoWindow[i].open(map, marker[i]); // 吹き出しの表示
		currentInfoWindow = infoWindow[i];
	});
}

以下をhtmlに記載しmap表示

<div id="map"></div>

最後にCSS

/* map */
#map {
	height: 300px;
	width: 1300px;
	margin: 0 auto;
}

spring bootでATNDのイベント情報取得APIを使用したときのメモ

以下のATNDに登録されているイベント情報を取得するAPIを利用。
ATND API リファレンス

service.java

/**
 * イベント情報をAPIから取得し、Listに格納
 */
@Service
public class EventInfoGetService {

	@Autowired
	@Qualifier("zipCodeSearchRestTemplate")
	RestTemplate restTemplate;

	/** 郵便番号検索API リクエストURL */
	private static final String URL = "https://api.atnd.org/events/?keyword={area}&keyword={key}&count=15&format=json";

	/**
	 * リクエストを投げ,EventListBean型のlistに格納しコントローラに返す
	 * 
	 * @return
	 * @throws ParseException
	 */
	public List<EventListBean> service(String area, String key) throws ParseException {

		EventDto eventDto = restTemplate.getForObject(URL, EventDto.class, area, key);

		// 格納するList定義
		List<EventListBean> list = new ArrayList<EventListBean>();

		// listに格納
		for (Map<String, EventDataDto> map : eventDto.getEvents()) {

			// Beanインスタンス化
			EventListBean eventListBean = new EventListBean();
			
			//listへの格納処理記載
                        *********
		}
		return list;
	}
}

あと、以下の設定を記載

RestTemplateResolver.java

@Component
public class RestTemplateResolver {

    @Bean
    public RestTemplate zipCodeSearchRestTemplate() {
        RestTemplate restTemplate = new RestTemplate();
        MappingJackson2HttpMessageConverter messageConverter = new MappingJackson2HttpMessageConverter();
        List<MediaType> supportedMediaTypes = new ArrayList<>(messageConverter.getSupportedMediaTypes());
        supportedMediaTypes.add(MediaType.TEXT_PLAIN); // text/plainのJacksonの処理対象にくわえる
        messageConverter.setSupportedMediaTypes(supportedMediaTypes);
        restTemplate.setMessageConverters(Collections.singletonList(messageConverter)); // カスタムしたHttpMessageConverterを適用
        return restTemplate;
    }
}

spring bootでDB連携する際の設定ファイル

1.pom.xmlの設定

pom.xml

 <!-- 追記開始 -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis</artifactId>
            <version>3.3.0</version>
        </dependency>
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis-spring</artifactId>
            <version>1.2.3</version>
        </dependency>
        
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>
<!-- 追記終了 -->

※デフォルトから追記部分を記載
上からそれぞれ、MySQLを扱うためのライブラリ、MyBatisのライブラリ、MyBatisとSpring連携用のライブラリ、データベース接続用のライブラリ。

2.データソースの設定

application.properties

#MySQLのドライバ設定
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
#接続用URL
spring.datasource.url=jdbc:mysql://localhost/「DB名」※例
#ユーザ名
spring.datasource.username=
#パスワード
spring.datasource.password=

この設定により後はSpring Bootが自動的にこのファイルの設定を元にデータソース生成。

3.MyBatisのBean登録

初めに実行するクラス「FirstSpringApplication.java」を以下を以下のように。

FirstSpringApplication.java

@SpringBootApplication
@MapperScan(basePackages="com.example.persistence")
public class FirstSpringApplication {

    public static void main(String[] args) {
        SpringApplication.run(FirstSpringApplication.class, args);
    }

    // MyBatisの設定
    @Bean
    public SqlSessionFactory sqlSessionFactory(DataSource dataSource) throws Exception {
        final SqlSessionFactoryBean sessionFactory = new SqlSessionFactoryBean();
        sessionFactory.setDataSource(dataSource);
        // コンフィグファイルの読み込み
        sessionFactory.setConfigLocation(new ClassPathResource("/mybatis-config.xml"));

        return sessionFactory.getObject();
    }
}

@Beanを付与した戻り値「SqlSessionFactory」のメソッドを作成し、
BeanとしてDIコンテナに登録。

後は、@MapperScanアノテーションを指定し、属性「basePackages」にパッケージを指定することで、
対象のパッケージに含まれるすべてのMapperインターフェースを検出してくれる。

4.コンフィグファイルの設定

mybatis-config.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE configuration PUBLIC 
        "-//mybatis.org//DTD Config 3.0//EN" 
        "http://mybatis.org/dtd/mybatis-3-config.dtd">

<configuration>
    <settings>
        <setting name="mapUnderscoreToCamelCase" value="true" />
    </settings>
</configuration>

この設定により、データベースのカラム名がスネーク記法(複数の単語を「_(アンダーバー」でつなげた表現)で定義されている場合、
キャメル記法(2つ目以降の単語を大文字でつなげた表現)に変換されてマッピングされる。

(例)「user_id」というカラムの場合、Javaのフィールドが「userId」でマッピングされる。

「yyyy-MM-dd'T'HH:mm:ss.SSSXXX」型の文字列のフォーマットを変更する

日付の文字列の形式を変更するサンプル。

2017-10-10T12:00:00.000+09:00

2017年10月10日 12時00分

に。

String sampleDate = "2017-10-10T12:00:00.000+09:00";

SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd'T'HH:mm:ss.SSSXXX");
Date date = df.parse(sampleDate );
df.applyPattern("yyyy年MM月dd日 HH時mm分");
sampleDate = df.format(date );

SimpleDateFormat のパターンのサンプルはここにある。

http://docs.oracle.com/javase/jp/7/api/java/text/SimpleDateFormat.html