Font Awesomeを使ってツイッターのアイコンを作る！
いろんなWebアイコンフォントが無料で使える便利なライブラリ「Font Awesome」を使って、ツイッターの青い鳥のアイコンを作ってみましょう。
①ライブラリの読み込み！
まずはFont Awesomeのcssのライブラリを読み込みます。下記ページのCDNで提供されているものを利用してしまいましょう。
Quick Start · BootstrapCDN by StackPath
HTMLにこんな風に記述してcssを読み込みます。
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
②アイコン設置！
そしてアイコンを設置します。文章中にこんな風に記述すると、ツイッターの青い鳥の文字アイコンが表示されます。
<i class="fa fa-twitter" aria-hidden="true" style="color: #00aced;"></i>
簡単にできましたね、以上です！
【PHP】AWSでhtmlをphpとして実行したいんだけどできない！
この前借りたAWSサーバーで「index.html」というページを「index.php」として実行したかったんですが、なかなか設定がうまくいきませんでした・・。
（ちなみにPHPのバージョンは5.6です・・）
これをやるときの典型的な方法は「.htaccess」に以下のような設定を追加するというもの。
AddType application/x-httpd-php .html
しかし、これを追加しても全然PHPが実行されません・・。
仕方がないので、「httpd.conf」（/etc/httpd/confのディレクトリにあります）に、上記の設定を直接書き込むことにしました。
そして設定追加後「sudo service httpd restart」を打ってhttpdを再起動。
これでhtmlがphpとして動作するようになりました。
AWSのサーバーは「.htaccess」に直接書き込む方法は、禁止されているんですかね。
まあとりあえず動いたので、これでよしとします・・。
【CakePHP3】APIを作ろうとしてエラーが出て混乱の極み…。
CakePHP3でAPIを作ろうと思ってちょっと苦労をしてしまいました・・。
クライアンからajaxでリクエストを送ると、なにかデータを返してくれるという簡単なものを作ろうとしたんですが、
CakePHPのエラーログに「Controller action can only return an instance of Response」と出てきて、どうしても処理に失敗していまいます・・。
↓公式ページの例文どうりに作ってるはずなんですが、どうもエラーの原因が分かりません・・。
https://book.cakephp.org/3.0/ja/views/json-and-xml-views.html
散々悩んだ挙句にとてもくだらない理由が判明しました・・。
以下のコードの「$array[$i]」の箇所ですが、$iが存在しない配列を参照していたためでした・・。
class HogegeController extends AppController
{
public function api()
{
・・・
$hoge_id = $array[$i];
//結果を返却
$result['status'] = "ok";
$result['id"] = $hoge_id;
$this->set(compact('result'));
$this->set('_serialize', ['result']);
}なんだかすごいエラーログが出てきて「データビューの使い方を間違っているのか？」などと混乱してしまったんですが、結局その手前でしくじっていたということなんですね・・。
あ～くだらな。
グーグルマップのウィンドウに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;
以上です・・。
