カテゴリーアーカイブ 言語

takahashi 著者:takahashi

PHPからSlack/Discordに、Webhookで簡単に通知を送る。

SlackやDiscordを使っていると何かと便利なのがWebhook通知。

専用のチャンネルを用意し、何かイベントが発生したときの通知などに、メールの代わりにこのWebhookで通知を飛ばしてやることで取りこぼしなく通知を確認できます。

このWebhook、既存のサービスやシステム以外で通知を飛ばしたいときに”どうやってやればいいんだろう?”と思ってしまう方もいらっしゃるかと思います。
調べるとcurlとかめんどくさいパラメータアレコレとか指定するものが多く出てくるのでつい面倒な印象を持ってしまいがちですが、いろいろ調べていたところ、PHPで超簡単にできる方法を見つけました!

PHP から Slack の Incoming webHooks を叩く – Qiita

<?php

//処理内容を定義
function send_to_slack($message) {
  $webhook_url = 'Webhook受付URL';
  $options = array(
    'http' => array(
      'method' => 'POST',
      'header' => 'Content-Type: application/json',
      'content' => json_encode($message),
    )
  );
  $response = file_get_contents($webhook_url, false, stream_context_create($options)); //要求を$webhook_urlのURLに投げて結果を受け取る
  return $response === 'ok'; //$responseの値がokならtrueを返す
}

//メッセージの内容を定義
$message = array(
  'username' => '送付元として表示するユーザー名', 
  'text' => 'メッセージ内容', //Slackの場合
  //'content' => 'メッセージ内容', //Discordの場合
);

send_to_slack($message); //処理を実行
?>

これだけで行けちゃうそうです。
要するに、送付先とデータ形式とメソッド(POST・GETなど)さえ合っていれば、どんな方法でも大丈夫なようです。

ちなみにコードをそのままDiscordに転用する場合は、$messageに入れている要素名’text’を’content’に書き換える必要があります。
‘text’のまま実行してしまうと400エラーが返ってきてしまい、Webhookの内容が送信されません。

上記の内容をテキストエディタなどで書き、
hoge.php
のような適当なファイル名で保存してください

あとはコマンドライン上で

php ./hoge.php

のようにしてやればWebhookが実行され、入力した内容がSlack/Discordに届くはずです。

内容さえ書き換えてやればいくらでも応用ができるので、例えばリモートでサーバーを再起動したときの起動通知とか、システムで障害が発生したときのエラー通知なんかにも使うことができます。

メール通知の場合だと、メールサーバーが落ちて送付できなかったり、通知メールが遅延してしまうことがあったりもするので、Webhook経由でも通知が送れると便利ですね。

  • この記事いいね! (0)
村上 著者:村上

【JavaScript】Mapboxを使ってルート検索を行う方法

Mapboxでルート検索を行いたかったので調べてみたところ、プラグインがあったので試してみました。
導入もとても簡単で、しかも無料とのこと!

なお、今回参考にさせていただいたサイトはこちらから。

Mapbox でルート検索を試してみた – マルティスープ株式会社
https://maps.multisoup.co.jp/blog/2818/

なお、GitHubはこちらから。

GitHub – mapbox/mapbox-gl-directions: Directions plugin for mapbox-gl-js using Mapbox Directions API.
https://github.com/mapbox/mapbox-gl-directions

 

さて、ルート検索プラグインの導入方法ですが、まずMapboxのアカウントを作成し、画面上に地図を表示させるところから行ってください。
こちらの方法については、下記の公式サイトをご確認ください。

Welcome to Mapbox | Mapbox
https://www.mapbox.com/install/

上記の方法で地図が表示出来たら、下記のコードを追加します。

まずは、プラグインを使用するためのJavaScriptファイル及びCSSファイルの読み込みです。

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D'https%3A%2F%2Fapi.mapbox.com%2Fmapbox-gl-js%2Fplugins%2Fmapbox-gl-directions%2Fv3.1.1%2Fmapbox-gl-directions.js'%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v3.1.1/mapbox-gl-directions.css' type='text/css' />

次に下記のJavaScriptコードを追加します。

// アクセストークン設定
mapboxgl.accessToken='xxxxxxxxxxxxxxxxxxxxx';
// 地図生成
var map = new mapboxgl.Map({
    container: 'map',
    center: [地図の中心座標],
    zoom: 10,
    styles: 'mapbox://styles/mapbox/streets-v10'
});

// ここから下のコードを追加
map.addControl(
    new MapboxDirections({
        accessToken: mapboxgl.accessToken
    }), 'top-left');

なお、地図生成のコードは既に追加されているはずなので、12行目以降のコードを追加してください。

そうすれば、下記のようにルート検索用のメニューが表示されるはずです。

ルート検索を行いたい場合は、地図上で出発地点と到着地点をクリックすればOKです。
ルート検索後は、車や徒歩、自転車から移動手段を選択できます。
また、ルートも3候補くらい出してくれます。

ただ、Googleマップのように建物名や住所では検索できないのが少し難点ですね。

 

以上、Mapboxでルート検索をする方法でした。
検索機能は少し限定的ですが、導入は簡単だし、何よりも無料なので、簡単なルート検索機能の導入でしたら是非お試しになってはいかがでしょうか。

  • この記事いいね! (0)
著者:杉浦

javascriptにおける型変換による計算のさわり

 javascriptは型変換を行うことによって記述から予想される実行結果と実際の実行結果が異なることが起きやすい語です。それぐらい大きく変化の起きる型変換を用いた小ネタです。

+[]

 これの実行結果が
 
 です。javascriptは正負の様な数式符号がついた対象を数字として扱う動作があります。大体、空っぽい対象は0、trueっぽい対象は1として評価されます。そのためこの様な結果になります。これを利用すると次の様なこともできます。

 この手の型変換をこれでもかと利用した方法に記号プログラミングというものがあります。例えば、Aを表すコードは次になります。

(([][($+[])[-~-~-~[]]+(({})+[])[-~[]]+([][![]]+[])[-~[]]+(![]+[])[-~-~-~[]]+(!![]+[])[+[]]+(!![]+[])[-~[]]+($+[])[-~[]]+($+[])[-~-~-~[]]+(!![]+[])[+[]]+(({})+[])[-~[]]+(!![]+[])[-~[]]])+[])[-~-~-~[]*-~-~-~[]]
  • この記事いいね! (0)
村上 著者:村上

【JavaScript】部分一致のある複数のキーワードをそれぞれ置換する方法

JavaScriptで複数の文字列を置換するとき、置換したいキーワードの一部が他のキーワードと重複しているため、置換後の文字列が意図しない結果になるという状況に陥りました。
例えば、「#○○○」などのハッシュタグをタグで囲もうとしたとき、ハッシュタグに「#浜松」と「#浜松市中区」というキーワードが一部重複している箇所があるため、「#浜松」の部分が意図せずに2回も置換されてしまうという感じです。

今回は、それの対処法です。
もしかしたらもっといい方法があるのかもしれませんが…個人的に一番しっくり来たのでこの方法を採用しました。

 

対処法ですが、まず置換したい文字列(ここではハッシュタグ)をいったん別の文字に置き換えます。
この時、他のキーワードと一致しないように特殊な文字列にするようにしましょう。
例えば、%をキーワードの頭と末尾に2つずつつけてみるとか。
サンプルコードは下記のとおりです。

var text = '[ハッシュタグを含む置換したい文字列]';
var result = str.replace(/(#\S+)/g, '%%$1%%');

上記のコードを実行すると、ハッシュタグが2つの%で囲まれた特殊な文字列に置き換えられます。
なお、正規表現でグループ化を使うと、$1 に一致した文字列が代入されるので、これを利用して文字列を置換していきます。

あとは、この文字列を最終的に置き換えたい文字列の形になるように置換します。
ここでは、タグでハッシュタグを囲んでいます。
サンプルは下記に。

result = result.replace(/%%(#\S+)%%/g, '<a href="[リンク先]">$1</a>');

全部通しで書くと下記のようになります。

var text = '[ハッシュタグを含む置換したい文字列]';

// %%[ハッシュタグ]%% となるように置換
var result = str.replace(/(#\S+)/g, '%%$1%%');

// %%[ハッシュタグ]%% を <a href="[リンク先]">[ハッシュタグ]</a> に置換
result = result.replace(/%%(#\S+)%%/g, '<a href="[リンク先]">$1</a>');

作業は以上で完了です。

 

以上、部分一致のある複数のキーワードをそれぞれ置換する方法でした。
今回はJavaScriptで紹介しましたが、もちろんPHPなどでも使うことができます。
是非、ご活用ください。

  • この記事いいね! (0)
村上 著者:村上

【Cordova】アプリアイコンにバッヂを表示する方法【解決済み】

以前、アプリのアイコンにバッヂを表示するCordovaのプラグインをご紹介しました。
その時は、何故かバッヂが表示されず、解決方法についても調べきれていなかったのですが、先日対処法が判明しましたのでご紹介。

ちなみに、前回の記事はこちらから。

【Cordova】アプリアイコンにバッヂを追加するプラグイン「cordova-plugin-badge」
https://cpoint-lab.co.jp/article/201807/【cordova】アプリアイコンにバッヂを追加するプラグ/

 

さて、気になるその解決策ですが…単にAndroidとiOSのプラットフォームを一度削除し、再度追加するだけでした。
本当にそれだけでした!
何らかの原因で、プラグインがうまく各プラットフォームに追加できなかったのかな、と思われます。

ちなみに、こちらに気が付いたきっかけはブラウザで実行した時のエラー内容です。
実際のエラー文は保存し忘れてしまいましたが、「プラグインの関数が存在しない」という意味のエラーでした。
で、もしかして…と思い至り、プラグインの再インストールをしたところ、解決したという流れです。

 

以上、cordova-plugin-badge プラグインが動かない時の対処方法でした。
同じことでお悩みの方は、是非お試しください。

  • この記事いいね! (0)
asaba 著者:asaba

文字化け系エラーをつぶしてみよう

terapadとその周りを整理していたらたまたま文字化けtipsを見つけたので今回はその文字化けの修正方法と原因を投稿します。


public class sample{

private String str = "Hello";

public static void main(String... args){
sample s = new sample();
s.show(",world");
}

public void show(String str){
System.out.println(this.str + str);
}
}

terapadを開いて適当に上記のコードを書いてコンパイルをすると


?サソpublic class sample{

のっけから文字化けしてますね。プログラミングでterapad使っている人ってあまり見たことないですが一応載せておきます。

ウィンドゥー>オプションー>文字コードでSHIFT-JISをUTF-8Nに変更してください。これで治ります、絶対。

こいつはterapadをインストールした後に初期設定で何らかの節でSHIFT-JISにしてしまったときに出てくるので、設定したら使う前に一回閉じてから開いて使ってください。

あと、terapadで作ったファイルをcordwriterなどの他のエディタで開いても出てくるので極力他のエディタで開かないようにしてくださいね。

terapadでコーディングしている人、特に入門中の方はいきなりこんな分かりにくいエラーを見るとやる気が失せてしまいますので忘れずに上記の設定を済ませてしまいましょう。それでは!

 

  • この記事いいね! (0)
著者:杉浦

頻繁に変わる一部分を抽出することによる関数化

 プログラミングを行う時、何を関数やクラスにすると楽ができるか、のちに使いやすくなるか、という判断のために抽出による判断ができます。抽出という言葉は抽出とは – 難読語辞典 Weblio辞書では次の様に載っています

ちゅう しゅつちう- [0] 【抽出】

( 名 ) スル

全体の中から、ある物を抜き出すこと。 「リストから条件を満たす物を-する」
固体または液体混合物溶媒加え混合物中の特定の成分溶媒中へ分離する操作。この操作後に得られる溶媒部分を抽出液という。溶媒抽出



 何らかの大きな問題を解く時、頻繁にある一部分のみが変わる同じような小さな問題を解くことになりやすいです。例えば問題が”Weblio辞書で数字の1から10までの意味を調べる”なら”Weblio辞書で数字の1の意味を調べる”,”Weblio辞書で数字の2の意味を調べる”,…です。これを更にブラウザ上の操作に分解すると”Weblio辞書を開く。”、”Weblio辞書で数字の1を検索バーに入力する。”、”検索ボタンを押す。”、”意味を読む。”になります。”Weblio辞書を開く”は最初の一度のみですが他を繰り返すだけで書き下されたコードは大変なことになります。


"Weblio辞書を開く。"
"Weblio辞書で数字の1を検索バーに入力する。"
"検索ボタンを押す。"
"意味を読む。"
"Weblio辞書で数字の2を検索バーに入力する。"
"検索ボタンを押す。"
"意味を読む。"
"Weblio辞書で数字の3を検索バーに入力する。"
"検索ボタンを押す。"
"意味を読む。"
"Weblio辞書で数字の4を検索バーに入力する。"
"検索ボタンを押す。"
"意味を読む。"
"Weblio辞書で数字の5を検索バーに入力する。"
"検索ボタンを押す。"
"意味を読む。"
"Weblio辞書で数字の6を検索バーに入力する。"
"検索ボタンを押す。"
"意味を読む。"
"Weblio辞書で数字の7を検索バーに入力する。"
"検索ボタンを押す。"
"意味を読む。"
"Weblio辞書で数字の8を検索バーに入力する。"
"検索ボタンを押す。"
"意味を読む。"
"Weblio辞書で数字の9を検索バーに入力する。"
"検索ボタンを押す。"
"意味を読む。"
"Weblio辞書で数字の10を検索バーに入力する。"
"検索ボタンを押す。"
"意味を読む。"

 読み難いです。分解した小さな問題の頻繁に変わる1~10の部分のみを抽出して、”Weblio辞書で数字の$nの意味を調べる”という関数に適宜挿入するコードは次の様になります。

function look_up_number_in_weblio($n){
	"Weblio辞書で数字の$nを検索バーに入力する。"
	"検索ボタンを押す。"
	"意味を読む。"
}
"Weblio辞書を開く。"
look_up_number_in_weblio(1);
look_up_number_in_weblio(2);
look_up_number_in_weblio(3);
look_up_number_in_weblio(4);
look_up_number_in_weblio(5);
look_up_number_in_weblio(6);
look_up_number_in_weblio(7);
look_up_number_in_weblio(8);
look_up_number_in_weblio(9);
look_up_number_in_weblio(10);

 さっくり全部読めるようになりました。

  • この記事いいね! (0)
著者:杉浦

if文の様な正規表現である先読み、戻り読み

 正規表現の文法には先読み、戻り読みと呼ばれる記法があります。戻り読みは後読みとも呼ばれます。ここではサクラエディタのヘルプファイルに倣って戻り読みと記述します。

(?=式) 先読み
(?!式) 否定先読み
(?<=式) 戻り読み
(? 否定戻り読み

 この記法は英語ではlookahead,lookbihindと呼ばれます。正規表現の途中でこの記法が現れた時、正規表現エンジンは先読み後読みで括られた部分式が文字列のまだ読んでいない先の方やもう読み終わった戻った方にマッチするかしないかを判断します。このマッチング判断は読んでいる文字列の位置を変えません。(?=)(?!)(?<=)(?
 この正規表現はhogeを含まない文字列中のfugaにマッチする正規表現です。先読みはまだ読んでいない先の方を見るだけ、lookaheadするだけで文字列を消費しない記法です。そのため、以下の様なマッチもできます。

 ハイライト部分がマッチしている部分です。行頭から見て.*hogeが成り立たない行のfugaをマッチしているわけです。

  • この記事いいね! (0)
著者:杉浦

OnlinePHPFunctionsの紹介

 OnlinePHPFunctions – Test PHP functions onlineはPHPのオンライン実行環境です。要は自分でサーバを立てずともPHPを実行できる簡単な環境です。
 OnlinePHPFunctionsの主な機能はSandboxとPHP Functionsです。Sandboxでは下図の様な簡単なエディタでPHPを記述、実行できます。

 OnlinePHPFunctionsの特に好きな点は様々なverのPHPを容易に動かせる点です。4.4.9~7.2.4まで様々な環境があり、コードが使えるか使えないかを試せます。例えばPHPにおいて配列の定義構文としてarray()の代わりに[]が使えるようになったのはPHP5.4からです。そのため先ほどのコードの設定をRun on PHP version:5.3.0に変更すると次の様になります。

 使えない構文として文法エラーをもらうことなりました。PHP Functionsではこのサンドボックス機能を活かして実際に動くPHPの関数を見ることが出来ます。

  • この記事いいね! (0)
著者:杉浦

問題の細分化とソースコードの関数化

 よく関数にまとめることでソースコードが読みやすくなる、再利用しやすくなると言われますが、いきなりその様ことだけ知ってもすぐにできるものではありません。関数化の指針の一つに問題の細分化というものがあります。これは分割された小さな問題ごとに関数にしていくというやり方です。例えば次のコードがあります。

// 与えられた緯度経度に最も近い 'array' の要素を返す。
// 地球が完全な球体であることを前提としている。
var findClosestLocation = function (lat, lng, array) {
	var closest;
	var closest_dist = Number.MAX_VALUE;
	for (var i = 0; i < array.length; i += 1) {
		// 2 つの地点をラジアンに変換する。
		var lat_rad = radians(lat);
		var lng_rad = radians(lng);
		var lat2_rad = radians(array[i].latitude);
		var lng2_rad = radians(array[i].longitude);
		// 「球面三角法の第二余弦定理」の公式を使う。
		var dist = Math.acos(Math.sin(lat_rad) * Math.sin(lat2_rad) +
				Math.cos(lat_rad) * Math.cos(lat2_rad) *
				Math.cos(lng2_rad - lng_rad));
		if (dist < closest_dist) {
			closest = array[i];
			closest_dist = dist;
		}
	}
	return closest;
};
Dustin Boswell; Trevor Foucher. リーダブルコード (Kindle の位置No.1930-1939). 株式会社オライリー・ジャパン. Kindle 版. 

 これはコードの最上部のコメントにあるように、与えられた緯度経度に最も近い 'array' の要素を返す、ことが最終目的の関数です。この目的を達成するためにこのコードは、2地点間の距離を算出する、最小の距離になる'array'の要素を発見する、という二つの問題を解いています。前者の2地点間の距離を算出する、という問題は最終目的から分割して考えられます。分割するという考えに沿ってコードを改造すると次の様になります。

// 与えられた緯度経度に最も近い 'array' の要素を返す。
// 地球が完全な球体であることを前提としている。
var findClosestLocation = function (lat, lng, array) {
	var closest;
	var closest_dist = Number.MAX_VALUE;
	var dist = spherical_distance(lat, lng, array[i].latitude, array[i].longitude);
	for (var i = 0; i < array.length; i += 1) {
		if (dist < closest_dist) {
			closest = array[i];
			closest_dist = dist;
		}
	}
	return closest;
};
function spherical_distance(lat, lng, lat_2, lng_2){
	//地点(lat,lng)と地点(lat_2,lng_2)の球面距離を返す
	// 2 つの地点をラジアンに変換する。
	var lat_rad = radians(lat);
	var lng_rad = radians(lng);
	var lat2_rad = radians(lat_2);
	var lng2_rad = radians(lng_2);
	// 「球面三角法の第二余弦定理」の公式を使う。
	return Math.acos(Math.sin(lat_rad) * Math.sin(lat2_rad) +
		Math.cos(lat_rad) * Math.cos(lat2_rad) *
		Math.cos(lng2_rad - lng_rad));
}

 最初より簡単な関数であるfindClosestLocationとspherical_distanceの二つが出来ました。また、この関数化は再利用等のコードの変更を容易にします。例えば、findClosestLocation中のspherical_distance(lat, lng, array[i].latitude, array[i].longitude)という部分は呼び出す関数名の変更だけで同じような度単位の二地点の緯度経度を引数にする別の関数を用いることが出来ます。二地点間の球面距離の算出というのは多用します。
 問題の細分化の基準として意図と実装の乖離があります。あるコードを書いている時、そのコードに当初と別の目的が存在するならば、それは別の問題である、というものです。

  • この記事いいね! (0)