2013年5月31日

Fukuoka.php Vol.7 参加報告

mawatari 勉強会・交流会 Fukuoka.php, PHP 0 Comments

イベント情報

タイトル	Fukuoka.php Vol.7
日時	2013年5月29日（水）19時30分〜21時00分
定員	17人
会場	株式会社Fusic 福岡本社
住所	福岡県福岡市中央区大名2-4-22 新日本ビル9F
告知サイト	Zusaar – Fukuoka.php Vol.7
関連サイト	Fukuoka.php
ハッシュタグ	#fukuokaphp
概要	挨拶・自己紹介とか – @akase244 PHPBrewを使って、簡単にPHPのバージョンを切り替える方法 – @akase244 5分で出来る、簡単にPHPから電話をかけるTwilio連携 – @cakephper phpでredis / proc_ope4n:phpでマルチコア（仮題） – @kensei_kick Vagrant / Chef-soloについて（仮題） – @tkengo XSSのお話 – @y_maehira LT、質問とかわいわいな感じみんなで

リポート

出張が直前でキャンセルになったので、急遽、参加登録をしました。補欠が10名程度いらっしゃったので、USTREAMで遠隔参加。主にライブツイートをしていました。詳しくは、以下のツイートまとめから。
懇親会は人数制限がなかったので、参加してきました。舞鶴のガストロパブエールズで美味しいビールを。

2013年5月30日

iOSでウェブサイトをフルスクリーン表示させる

mawatari 日記 iOS 2 Comments

iOSでウェブサイトをフルスクリーン表示させる方法をメモしておきます。言葉で説明するより、画面を見てもらうのが早いと思います。

iPhoneのSafariで、ウェブサイトを閲覧すると、通常は、上図左のような画面になりますが、上図右のような画面表示にするための方法です。Safariのアドレスバーや、ナビゲーションバーが表示されませんので、使える場面は限られますが、以下のような使い方ができるのではないでしょうか。

Google Maps等のFull JavaScriptのWebアプリを広いスクリーンで表示する
いわゆるハイブリッドアプリ（ネイティブアプリ中身がHTML）を作る過程での簡易確認
制御ボタンもHTMLで作って、Webアプリだけど、ネイティブアプリっぽく見せる

1. と 3. は、ほぼ同義ですね。既に存在しているWebアプリを広い画面で使うか、自分で作るかの違いです。
Google Mapsをフルスクリーン表示させるのは、iPhone5が発売されて、Google Mapsのアプリが削除されたときに流行ったりしました。現在は、Google Mapsのネイティブアプリが存在していますが、当時はなかったので、重宝した方もいらっしゃるのではないでしょうか。
リンク：iOS6でGoogleMapsをフルスクリーン表示にしてみました – W&R : Jazzと読書の日々

そんな少し古いネタを今更取り上げるのは、2. 3. あたりを、最近、頻繁に作っていたからです。

iOSでウェブサイトをフルスクリーン表示させる

では、早速見ていきましょう。続きを読む

2013年5月17日

スマートフォン・タブレットでもEmbedをキレイに見せる

mawatari 日記 CSS 0 Comments

SlideShare, Speaker Deck等にアップされているスライドをブログに埋め込む（embed）際、訪問者が読みやすいよう表示サイズを大きめにしています。閲覧者のデバイスがPCであれば、特に問題ないのですが、スマートフォンやタブレットであった場合、記事の表示領域によっては、横スクロールがでてしまい、不格好になってしまいます。

<iframe src="http://www.slideshare.net/slideshow/embed_code/13751707" width="597" height="486" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen webkitallowfullscreen mozallowfullscreen> </iframe> <div style="margin-bottom:5px"> <strong> <a href="http://www.slideshare.net/mawatarin/fuelphp-fukuokaphpvol2" title="最近、僕がハマったFuelPHPの紹介" target="_blank">最近、僕がハマったFuelPHPの紹介</a> </strong> from <strong><a href="http://www.slideshare.net/mawatarin" target="_blank">Naoto Mawatari</a></strong> </div>

例えば、僕の環境（WordPress, Themify Basic theme）では、以下のような感じで書いておけば、閲覧者のデバイスが、スマートフォンやタブレットであっても、不要な横スクロールは表示されません。

/* iPhone */
@media only screen and (max-device-width: 480px) {
  iframe {
    width: 300px;
    height: 226px;
  }
}
/* iPad */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  iframe {
    width: 480px;
    height: 361px;
  }
}

/* iPhone */

@media only screen and (max-device-width: 480px) {

iframe {

width: 300px;

height: 226px;

}

/* iPad */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {

iframe {

width: 480px;

height: 361px;

}

iframeを作らないタイプのembedであれば、IDセレクタや、classセレクタを指定すればよいと思います。

2013年5月9日

PHP Matsuri 2013に福岡から参加する人の為のまとめ

mawatari 日記 PHP, PHPMatsuri 4 Comments

ぼちぼちPHP Matsuri 2013の2ヶ月前ですね。もう間もなくしたら、航空券の発売が開始される時期となりました。皆さま、予定は立てているでしょうか？少しでも費用を抑えるには、早くに航空券を取得することが大切です。簡単ではありますが、福岡から参加予定の方の為に、情報をまとめてみました。以下の点に注意した上で、参考程度にご覧ください。

網羅したつもりですが、漏れがある可能性はあります
飛行機の出発時刻等に変更はないと思いますが、料金は5月9日時点の7月6日（土）のもの（復路は7日（日））です
7月13（土）〜15日（月）は、3連休なので、料金は、もう少し高いでしょうし、チケットは、すぐに売り切れてしまうと思われます
LCCを中心に、航空会社によっては、チケットの販売が開始されているところもあります

PHP Matsuri 2013 基本情報

日程	2013年7月14日(日)10時30分〜7月15日(月)16時00分
場所	札幌全日空ホテル
住所	北海道札幌市中央区北3条西1丁目2-9
公式サイト	PHP Matsuri 2013 in Sapporo

昨年の様子は、こちらから。
PHPMatsuri 2012に参加してきた

2013年5月13日追記
PHP Matsuri公式アカウントから情報が出ましたので追記しました。
7/14(日) 13:00開会、7/15(月) 16時閉会。チケットは、8000円ぐらいで、5月末から販売開始予定。

#phpmatsuri 2013 札幌のスケジュールは、 7/14(日) 13:00開会、7/15(月) 16時閉会の予定です。 7/14は10:30から会場を開けておくので、自由ハック時間や他の参加者との交流時間としてお使いください。ホテル、飛行機の予約はお早めに。
— PHP Matsuriさん (@phpmatsuri) 2013年5月13日

#phpmatsuri 今年のチケットも去年と同様にホテル代を含めません。宿泊の手配は各自でお願いします。３連休ですのでお早めに。キャンセル料がかからない期間だと思うので、まずは宿と飛行機の手配だけしておくのが良いと思います
— PHP Matsuriさん (@phpmatsuri) 2013年5月13日

#phpmatsuri 今年のチケットは、去年と同じく8000円ぐらいの予定です。チケットは今月末から販売開始予定です。
— PHP Matsuriさん (@phpmatsuri) 2013年5月13日

2013年5月7日

バグ対応：Firefoxのコンテキストメニューの表示がおかしくなる

mawatari 日記 Firebug, Firefox 1 Comment

今から1ヶ月前くらいの話になりますが、Firefoxを20にアップグレードしたら、コンテキストメニュー（右クリックメニュー）の表示がおかしくなり、さらに機能しなくなるという症状に悩まされました。今後も同様のことが起こるかは分かりませんが、対応方法をメモしておきます。

環境

環境は以下の通りです。追加検証したところ、Windowsでも同様でした。

ソフトウェア	バージョン
MacOS	10.8.3
Firefox	20.0

症状の確認と対応

症状の確認

Firefox 20にアップグレードしたら、上図のようにコンテキストメニューに、たくさんの項目が表示されるようになりました。目的の項目を探すのが面倒になったなー等と思いながらクリックするも、無反応。どうやらたくさんの項目が表示されるようになっただけでなく、機能しなくなったようです。これは明らかにおかしいので、バグの線を疑って検索してみると、以下のサイトにたどり着きました。斜め読みしたところ、Firebugが原因のようです。
参考リンク：Firefox20にアップグレードしたらコンテキストメニューにありとあらゆる項目が表示される不具合が – にししふぁくとりー

対応

試しに、Firebugをいったんオフにし、Firefoxを再起動。見事に元に戻りました。

ただこれでは、Firebugが使えないので困ります。困ったときは、再インストールです。念のため、インストールバージョンを記録。1.10.2でした。Firebugを再インストールし、Firefoxを再起動しました。

元に戻りました！
何が悪かったのかなーと、ぽちぽちいじっていたら、Firebugのインストールバージョンが、再インストール前後で違うことに気付きました。Firebugは、自動アップデートされていたと思っていたのですが、そうではなくなったんですかね？

状況	ソフトウェア	バージョン
アップデート前	Firebug	1.10.2
アップデート後	Firebug	1.11.2

そういえば、Firefox 20にしたタイミングで、はてなツールバーもおかしくなったことを思い出しました。ブックマークの追加とかコメントの表示ができなくなったと記憶しています。それも再インストールで元に戻りました。20のタイミングで色々変更があったんですかね。

追加検証

VMに、Windows7, Firefox 20.0, Firebug 1.10.2という環境があったので、追加検証してみました。

ソフトウェア	バージョン
Windows	Windows 7 Professional SP1
Firefox	20.0
Firebug	1.10.2

やはり右クリックで大量のメニューが表示されます。

ちょうど、Firefox 21.0がリリースされたタイミングだったので、Firefoxをアップデートすれば、右クリックのバグは解消されるのかという検証を先にしてみましたが、結果は変わらずでした。その後、Firebugをアップデートすることで右クリックのバグは解消されました。ただ、この記事への流入元の一つであるYahoo!知恵袋では、Firefoxをアップデートしただけで解消されたという報告もあるようですね。Firebugが入ってない環境なんですかね？
FireFox20にバージョンアップしたところ、右クリックのメニューがとんでもなく多く… – Yahoo!知恵袋

«‹ 10 11 12 13 ›»