備忘録 – 東京発、雲に乗って

2025年1月20日2025年1月20日

【GoogleマップAPI】fitBounds実行時に特定の方向だけパディングする

GoogleマップのJavaScript APIを使ったマップツールの修正依頼が来ました。

Googleマップで複数のマーカーを設置した際に、
すべてのマーカーが表示されるように自動で表示領域や縮尺をいい感じに調整してくれる

map.fitBounds(bounds, [option])

1	map.fitBounds(bounds, [option])

というメソッドがあります。

第一引数にマーカーの座標を入れてやるだけ（説明は割愛）なので
とても簡単で重宝するメソッドなのですが、

とあるシステムで、マップに重なる形で左側にスライド式の開閉メニューがあり、
普通にfitBoundsを実行すると一部のマーカーがメニューで隠れてしまうという問題がありました。

マーカーがメニューに隠れないようにしてほしいというのが今回の依頼なのですが、これは簡単に対応できます。
fitBoundsの第2引数でパディングを指定するだけです。

たとえば左メニューの幅が400pxだった場合は

map.fitBounds(bounds, {'left': 400})

1	map.fitBounds(bounds, {'left': 400})

とするだけで左に400pxパディングした形でfitBoundsが実行されるので
マーカーがメニューに隠れることがなくなります。

今回のシステムではメニュー幅は固定で、メニューの開閉状態だけ考慮すればよかったのでさらに簡単でした。

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年11月12日2024年11月12日

【phpSpreadsheet】PHPでExcelを読み込んだらグラフが消える

phpSpreadsheetを長らく使っていますが、
あるとき「読み込んだExcelのグラフをそのまま出力したい」
という要望がありました。

何も考えずにグラフも読み込めるだろうと
過去のシステムからphpSpreadsheet使用部分をコピペして持ってきたところ、
出力したExcelはグラフだけ消えてしまいました。

知っている人にとってはなんということはないのですが、
グラフ付きのExcelを読み込むときは、Readerに対して

setIncludeCharts(true)

1	setIncludeCharts(true)

という設定が必要だとわかりました。

また、出力時も同様に、Writerに対して

setIncludeCharts(true)

1	setIncludeCharts(true)

が必要でした。

この歳になってまたひとつ勉強になりました。

例）

// Reader
$excel_reader = new PhpOffice\PhpSpreadsheet\Reader\Xlsx();
$excel_reader->setIncludeCharts(true);
$book = $excel_reader->load('template.xlsx');

// ～Excel編集処理～

// Writer
$excel_writer = new PhpOffice\PhpSpreadsheet\Writer\Xlsx($book);
$excel_writer->setIncludeCharts(true);
$excel_writer->save('output.xlsx');

// Reader

$excel_reader = new PhpOffice\PhpSpreadsheet\Reader\Xlsx();

$excel_reader->setIncludeCharts(true);

$book = $excel_reader->load('template.xlsx');

// ～Excel編集処理～

// Writer

$excel_writer = new PhpOffice\PhpSpreadsheet\Writer\Xlsx($book);

$excel_writer->setIncludeCharts(true);

$excel_writer->save('output.xlsx');

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年7月9日

【jQuery】jquery.validate.jsで任意のclassに対して独自のバリデーションを設定する

例えば、validation-alphaというクラスが指定されたら半角英字のみ入力可能にしたいとき

JavaScript

$.validator.addMethod(
  "alpha",
  function (value, element) {
    return this.optional(element) || /^([a-zA-Z]+)$/.test(value);
  },
  "半角英字を入力してください"
);
$.validator.addClassRules(
  "validation-alpha", {
    alpha: true,
  }
);

$.validator.addMethod(

"alpha",

function (value, element) {

return this.optional(element) || /^([a-zA-Z]+)$/.test(value);

"半角英字を入力してください"

);

$.validator.addClassRules(

"validation-alpha", {

alpha: true,

}

);

HTML

<input type="text" class="validation-alpha" />

1	<input type="text" class="validation-alpha" />