やったこと

webサービスを作るときに考えたことを垂れ流します

このブログについて

absgといいます。webサービスのこととかいろいろ書いてます。

最近作ったサイト
全国で発生した事件のデータベース「地域の事件簿」
みんなでなかよく政治の話!「なかよし討議!」
女子のつぶやきまとめ「Twiggy×Twiggy!」
もブログ
ツイッターバトラーズ!
ニコニコ人気ユーザーランキング


連絡先
何かご相談がある人はご連絡ください。
http://absgexp.net/prof/con.html

    (⌒)
  ∧__∧ (~)
 (。・ω・。)( )
 { ̄ ̄ ̄ ̄}
 {~ ̄お__}  ゴユックリ ドゾー
 {~ ̄茶__}
 {____}
  ┗━━┛

グーグルマップのウィンドウにFacebookのボタンを動的追加すると画面がずれる!

すっごい細かい問題に直面してしばらく悩んでしまいました…。

グーグルマップのマーカーをクリックしたときに開かれる「インフォ・ウィンドウ」ってありますよね…。

あのウィンドウが表示されたあと、その内側に「Facebookのシェアボタン」を動的に追加する処理を入れたんです(jQueryで追加です…)

そうすると、追加されたFacebookのシェアボタンの縦の長さが、一瞬だけとてつもなく長くなって、マップ画面が勝手に当てずっぽうの方向にスライドしてしまう…。

何を言っているのかよく分らないと思いますが、とくかくそういう現象に悩まされてしまいました…。

仕方がないので、Facebookのボタンがニュ~ンと伸びてもウィンドウのサイズに影響を与えないように、ボタンの周囲を囲むDIVに以下のようなcssを適用しましたよ…。

.facebook-btn {
  max-height: 20px;
  overflow: hidden;
}

これで縦に伸びるアホFacebookのボタンがウィンドウに及ぼす影響を殺すことができました…。

めでたしめでたし…。

【Javascript】マーカークラスタが「greedy」モードのときクリックが効かない!

さいきん大島てるさんのような、グーグルマップ上に情報を表示するサイトを作っているんですが、どうもマーカーのクラスタリング処理に不具合らしきものを見つけてしまいました・・。

クラスタリング処理とは、地図上にたくさんマーカーがあるときにまとめて「〇件」みたいに一括りにして表示してくれる機能です・・。

(この機能のことです)
マーカー クラスタリング  |  Google Maps JavaScript API  |  Google Developers

このひと固まりになったマーカーが、モバイル画面のときにクリックに反応しない・・。

具体的にいうと、マップを「gestureHandling: "greedy"」のモードにしたときに、マーカーをクリックしてもclickイベントが呼び出されなくなってしまうんです(greedyモードとは、指一本だけでグリグリとマップを動かせる簡易表示モードです・・)

英語で不具合の様子をググってみると、似たような現象について議論してるページがありました・・。

(議論はここ)
Clicking on cluster icon in Google Chrome not working · Issue #87 · googlemaps/js-marker-clusterer · GitHub

(コードはここ、「ClusterIcon.prototype.onAdd」処理の部分です)
https://github.com/googlemaps/js-marker-clusterer/blob/gh-pages/src/markerclusterer.js

でも上記のケースは、私の場合とは微妙に現象が違うみたいです・・。
私の場合は「isDragging 」フラグがどうこうという以前に、そこに書いてある「clickイベント」自体が呼び出されていない・・。

この修正をするのはなんだかとてもめんどくさそう・・。
なのでしょうがないので、マップはgreedyモードでなくて、cooperativeモードで使うことにしました・・。

誰かうまい修正方法を知ってる方いたら教えてだしあ・・。

以上です・・。

【PHP】ツイッターAPIから得たつぶやき時刻と現在時刻の差分をとる!

Twitter APIで取得したつぶやき時刻「created_at」と現在時刻の差分を計算してみます。
created_atの内容をいったんUNIX時間に変換してから、現在のUNIX時間と差分をとっています。
この結果を3600で割り算をすると、経過時間(時)を計算することができます。

  //created_atには以下のような時刻が入っている
  $created_at = "Mon Feb 12 03:57:12 +0000 2018";
  //いったんUNIX時間に変換
  $created_at_unix = strtotime($created_at);
  //現在のUNIX時間を取得
  $now_unix = time();
  //時間差をとって経過時間を計算
  $time_span = ($now_unix - $created_at_unix)/3600;
  echo $time_span;

以上です・・。

【PHP】TwitterのURLからアカウント名を正規表現で抜き出す!

ツイッターのURLの中にあるアカウント名の文字列を、PHP正規表現(preg_match)によって取得する方法です。

つまり、「https://twitter.com/hogege/status/1234567890」とか、「https://twitter.com/hogege/」というURLの中の「hogege」の部分を抜き出すということです。

以下のようなPHPコードを実行します。

$url = "https://twitter.com/hogege/status/123123123123123";
preg_match('/twitter.com\/([\w\-]+)/', $url, $match);
print_r($match);

matchの中に次のような値が格納されています。

Array
(
    [0] => twitter.com/hogege/
    [1] => hogege
)

すなわち「match[1]」の中に、お目当てのアカウント名が入っているというわけです。

以上

【PHP】DB操作ライブラリ「idiorm」で最大IDのレコードを取得する

データベースを操作するためのPHPライブラリ「idiorm」で一番IDが大きなレコードを取得するときの方法です。

コードは以下。

require_once("./idiorm.php");
ORM::configure('sqlite:データベースのパス');
ORM::configure('id_column', 'DBの主キーの名前');

//IDが一番大きなレコードを取得
$record = ORM::for_table('テーブル名')->order_by_desc('id')->find_one();
echo   $record->id;

idiormのもっと詳しい使い方は、私が以前書いた記事をご覧ください。

PHPのデータベース操作ライブラリ「Idiorm」でSQLiteが楽々使えた - やったこと

以上です。

ツイッターの開発者ページ・API用の各種鍵を確認。

ツイッターの開発者用のページでAPIの「consumerKey」「consumerSecret」「accessToken」「accessTokenSecret」などを確認したかったんですが、驚くべきことに検索しても全然URLが出てこない…。

ここで確認できるんですよ、ここ。

Twitter Application Management

以上。