しろがねによる技術日記

メインはIT日記的な感じで書きますが、ほかにもいろいろ書きます

(Semantic-UI) GoogleMap挿入の仕方

GoogleMap定義

ここはいつも通り

  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
  <script>
  $(document).ready(function() {
    var latlng = new google.maps.LatLng(35.68121300000001, 139.767294);
    var myOptions = {
      zoom: 17,
      center: latlng
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    marker = new google.maps.Marker({
        position: latlng,
        map: map
    });
  });
  </script>

Semantic-UI ui embed を使う

  <div class="ui vertical stripe segment" id="access">
    <div class="ui middle aligned stackable container">
      <div class="ui text container">
        <h3 class="ui header centered">
          <p>ACCESS</p>
        </h3>
      </div>
      <div class="ui embed" id="map_canvas">
      </div>
    </div>
  </div>

たぶん使い方違うんだろうけどなぁ。。。 semantic-ui.com

ページ内リンクのスクロール方法

Javascript

  <script>
    $(document).ready(function() {
      // #で始まるアンカーをクリックした場合に処理
      $('a[href^="#"]').click(function() {
        // スクロールの速度
        var speed = 1000; // ミリ秒
        // アンカーの値取得
        var href= $(this).attr("href");
        // 移動先を取得
        var target = $(href == "#" || href == "" ? 'html' : href);
        // 移動先を数値で取得
        var position = target.offset().top;
        // スムーススクロール
        $('body,html').animate({scrollTop:position}, speed, 'swing');
        return false;
      });
    });
  </script>

href=“#” は除外したい場合は、下記に置き換える

$('a[href*="#"]:not([href="#"]')

(Semantic-UI) 背景画像を固定にする

CSS

    .masthead {
      background-image: url("./img/bg.jpg") !important;
      background-repeat: no-repeat !important;
      background-size: cover !important;
      background-attachment: fixed !important;
    }

大事なのは、「!important」をつけてスタイルを優先させること

TERASOLUNA による初期構築

概要

TERASOLUNA 使って開発しようとしたときにいつも忘れるので備忘録

TERASOLUNAって?

NTT DATAさんがつくってる spring fw のライブラリ群
ガイドラインもしっかり作ってるので参考にしてます。
terasolunaorg.github.io

mybatis の genrator-plugin とがないのでその辺はいつもの自前のものを流用

初期構築

こんな感じの bat ファイルでさくっと作成

cd %~dp0
mvn archetype:generate -DinteractiveMode=false ^
                       -DgroupId=sample.group ^
                       -DartifactId=sample ^
                       -Dversion=1.0.0-SNAPSHOT ^
                       -Dpackage=sample.package ^
                       -DarchetypeGroupId=org.terasoluna.gfw.blank ^
                       -DarchetypeArtifactId=terasoluna-gfw-multi-web-blank-mybatis3-archetype ^
                       -DarchetypeVersion=5.0.1.RELEASE

追加項目

pom.xml

pom.xml に spring-session追加して、kvs とかでセッション管理。
kvsが使えないときは自前で拡張したDBセッションとかで管理

<dependency>
    <groupId>org.springframework.session</groupId>
    <artifactId>spring-session</artifactId>
    <version>1.0.2.RELEASE</version>
</dependency>

web.xml

session とか、listenerとかよしなに追加

<listener>
    <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
    <listener-class>org.terasoluna.gfw.web.logging.HttpSessionEventLoggingListener</listener-class>
    <listener-class>org.springframework.web.context.request.RequestContextListener</listener-class>
</listener>
<context-param>
    <param-name>contextConfigLocation</param-name>
    <!-- Root ApplicationContext -->
    <param-value>
        classpath*:META-INF/spring/applicationContext.xml
        classpath*:META-INF/spring/spring-security.xml
        classpath*:META-INF/spring/spring-session.xml
    </param-value>
</context-param>

<filter>
    <filter-name>requestContextFilter</filter-name>
    <filter-class>org.springframework.web.filter.RequestContextFilter</filter-class>
</filter>
<filter-mapping>
    <filter-name>requestContextFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

<filter>
    <filter-name>springSessionRepositoryFilter</filter-name>
    <filter-class>org.springframework.web.filter.DelegatingFilterProxy</filter-class>
</filter>
<filter-mapping>
    <filter-name>springSessionRepositoryFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

<filter>
    <filter-name>springSecurityFilterChain</filter-name>
    <filter-class>org.springframework.web.filter.DelegatingFilterProxy</filter-class>
</filter>

<filter-mapping>
    <filter-name>springSecurityFilterChain</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

あとは、特に考えなくても動いてくれる。

spring websocket による画像データ送信

概要

spring websocket でチャット中で画像送信しようとして、バイナリ送信はあきらめていろいろがんばったこと

client side

var file = document.querySelector('input[type="file"]').files[0];
var reader = new FileReader();
reader.onload = function(event){
    var loadedImageUri = event.target.result;
    stompClient.send("/app/room/" + varroomId, {}, JSON.stringify({'imgData': loadedImageUri}));
};
reader.readAsDataURL(file);

server side

下記でデータをbyteに変換して画像として保存する

String[] strs = message.getImgData().split(",");
byte[] binaryData = Base64.getDecoder().decode(strs[1]);

spring settings

websocket で connection を確立させた後なのでメッセージサイズなどは apache, tomcat をいじっても反映されないので
websocket:transport でサイズを指定する必要がある。
※要検討箇所

<websocket:message-broker application-destination-prefix="/app" >
    <websocket:transport message-size="2097152" send-buffer-size="2097152"></websocket:transport>
    <websocket:stomp-endpoint path="/endpoint" >
    </websocket:stomp-endpoint>
    <websocket:simple-broker prefix="/topic,/room" />
</websocket:message-broker>    

これでなんとか、データの送信はできた。
後は、クライアントに返す際に保存したパスを返却するかサイズが小さな画像のやりとしかないのなら
data:image/png;base64 など、Base64かけたもので返却するとよいかな