JavaScript – 東京発、雲に乗って

2026年2月13日2026年4月13日

Googleマップで表示範囲の左上と右下の緯度経度を取得する

Googleマップで表示されている範囲内に存在する店舗を検索するシステムを作っています。
その過程で必要になった処理です。JavaScriptを使用します。

// マップオブジェクトをgoogle_mapとします

var bounds = google_map.getBounds();

var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();

// 左上（北西）の座標
var topLeftLat = northEast.lat();
var topLeftLng = southWest.lng();

// 右下（南東）の座標
var bottomRightLat = southWest.lat();
var bottomRightLng = northEast.lng();

console.log("左上: " + topLeftLat + ", " + topLeftLng);
console.log("右下: " + bottomRightLat + ", " + bottomRightLng);

// マップオブジェクトをgoogle_mapとします

var bounds = google_map.getBounds();

var southWest = bounds.getSouthWest();

var northEast = bounds.getNorthEast();

// 左上（北西）の座標

var topLeftLat = northEast.lat();

var topLeftLng = southWest.lng();

// 右下（南東）の座標

var bottomRightLat = southWest.lat();

var bottomRightLng = northEast.lng();

console.log("左上: " + topLeftLat + ", " + topLeftLng);

console.log("右下: " + bottomRightLat + ", " + bottomRightLng);

2024年12月5日2024年12月10日

TinyMCEをカスタマイズ

久しぶりにTinyMCEをカスタマイズする案件があり、以下のカスタマイズを行いました。

bタグがstrongに変換されないようにする

extended_valid_elements: 'b',
formats:{
  bold:[{inline:"b",remove:"all"}],
},

extended_valid_elements: 'b',

formats:{

bold:[{inline:"b",remove:"all"}],

見出しの選択肢をカスタマイズする

block_formats: "見出し1(h2)=h2;見出し2(h3)=h3;見出し3(h4)=h4",

1	block_formats: "見出し1(h2)=h2;見出し2(h3)=h3;見出し3(h4)=h4",

※見出しをツールバーに出すのは「formatselect」

下線をstyleではなくuで追加する

formats:{
  underline:[{inline:"u",remove:"all"}]
},

formats:{

underline:[{inline:"u",remove:"all"}]

Bとは別でstrongボタンを作る

setup: function(editor) {
  editor.addButton('strong', {
    text: 'STRONG', // 「強調」とかでもいい
    onclick: function() {
      let editor = tinymce.activeEditor;
      let html = editor.selection.getContent();
      editor.insertContent( '<strong>' + html + '</strong>' );
    }
  });
},

setup: function(editor) {

editor.addButton('strong', {

text: 'STRONG', // 「強調」とかでもいい

onclick: function() {

let editor = tinymce.activeEditor;

let html = editor.selection.getContent();

editor.insertContent( '<strong>' + html + '</strong>' );

}

});

（ツールバーに「strong」を追加）

設定はすべて

tinymce.init({});

1	tinymce.init({});

の中に書きます。

2024年10月28日

【JavaScript】TinyMCEを組み込んだフォームの値の取得と設定

TinyMCEを組み込んだフォームの値をJavaScriptで取得したり設定したりするには
TinyMCEのメソッドを使用する必要があります。

フォームの値を取得する

var data = tinymce.activeEditor.getContent();

1	var data = tinymce.activeEditor.getContent();

フォームに値をセットする

var data = 'あいうえお';
tinymce.activeEditor.setContent(data);

1 2	var data = 'あいうえお'; tinymce.activeEditor.setContent(data);

2024年1月12日2024年1月12日

【JavaScript】SortableJSで簡単に並べ替えUIを作る

JavaScriptのライブラリ「SortableJS」を使えば
ドラッグ＆ドロップでリストの並び順を変えたりウィンドウの配置を入れ替えたり
といったUIをとても簡単に作ることができます。

SortableJS

デモ：

１．りんご

２．いちご

３．バナナ

４．スイカ

５．佐藤太郎

コード：

<div id="sort_demo1">
<div style="background-color:#ffc0c0;">１．りんご</div>
<div style="background-color:#ffffc0;">２．いちご</div>
<div style="background-color:#c0ffc0;">３．バナナ</div>
<div style="background-color:#c0ffff;">４．スイカ</div>
<div style="background-color:#c0c0ff;">５．佐藤太郎</div>
</div>

<style>
#sort_demo1 div {
  cursor: pointer;
  margin: 2px;
}
</style>

<script src="//cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.0/Sortable.min.js"></script>
<script>
window.onload = function() {
  Sortable.create(sort_demo1, {
    sort: 1,
    group: {
      name: 'sort_demo1',
      pull: true,
      put: true
    },
    animation: 150,
    onEnd: function(evt) {
      // ここで並び変えた状態を変数に保持したり、サーバーに送信したりする
    }
  });
}
</script>

</div>

<style>

#sort_demo1 div {

cursor: pointer;

margin: 2px;

}

</style>

window.onload = function() {

Sortable.create(sort_demo1, {

sort: 1,

group: {

name: 'sort_demo1',

pull: true,

put: true

animation: 150,

onEnd: function(evt) {

// ここで並び変えた状態を変数に保持したり、サーバーに送信したりする

}

});

}

</script>

2020年9月7日2023年2月7日

【jQuery】フォームの入力値をトリム＆半角変換

数字を入力されたら即計算するようなフォームで使用

// トリム & 全角を半角に
$('input:text').each(function(key, val) {
  var str = $(this).val();

  str = str.trim();

  var str2 = str.replace(/[Ａ-Ｚａ-ｚ０-９]/g, function(s) {
    return String.fromCharCode(s.charCodeAt(0) - 65248);
  });
  $(this).val(str2);
});

// トリム & 全角を半角に

$('input:text').each(function(key, val) {

var str = $(this).val();

str = str.trim();

var str2 = str.replace(/[Ａ-Ｚａ-ｚ０-９]/g, function(s) {

return String.fromCharCode(s.charCodeAt(0) - 65248);

});

$(this).val(str2);

});