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

村上 著者:村上

【CSS】floatで指定した要素の回り込みを解除する方法

要素を右側、もしくは左側に寄せるとき良く使われる「float」ですが、今回はこれの解除の方法について。
CSSを勉強したての頃は、回り込みをしたい要素の下の要素に影響して表示が崩れ、悩まされたことがありました…。
今回参考にしたサイトはこちら。

基礎39. 回り込みの解除(floatの解除)
http://web-manabu.com/html-css39/

方法だけでなく、デメリットも記載されており、とても参考になります。

 

まずは、回り込みの記述についてはこちら。

/* 左側への回り込み */
div {
    float: left;
}

この記述があると、指定された要素(今回はdiv)が左寄せになります。
なお、あとに続く要素はその反対側に回り込みます。

で、これを解除する方法は、まず単純に「clear:both」を指定する方法。

■ clear:both;

<div class="left">
    左寄せ
</div>
<div class="clear">
    左寄せ 解除
</div>

.left{
    float: left;
}
.clear{
    clear: both;
}

こんな感じで、左寄せ、もしくは右寄せした要素の後ろで指定します。
これは一番わかりやすいかな?
ただし、要素を追加する必要があるため、少し使いにくい場面がありそうです。

そのため、私が今回使ったのがこちら。

■ overflow:hidden;

子要素に float が指定してある場合、親要素にこの「overflow:hidden;」を指定する方法です。
これを指定することで、親要素が高さを持つので、回り込みを回避できるとのことですが…原理はいまいちわかっていません。
ただ、clear: both; と違って、要素を追加せずに済むため、これが一番使いやすいのではないかと思いますね。

あと、使ってみたいのがこちら。

■ clearfix(クリアフィックス)

親要素にこのclearfixを指定すると、最後に子要素をCSSで擬似的に作り出し、それにclear: both;を指定してfloatを解除しているのだとか。

<div class="parent">
    <div class="child">要素1</div>
    <div class="child">要素2</div>
    <div class="child">要素3</div>
</div>
.parent:after {
    clear:both
}
.child {
    float: left;
}

 

以上、回り込みの解除方法でした。
個人的なおすすめは overflow:hidden; ですね。

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

【PHP】TwitterOAuthライブラリを使って登録したメールアドレスを取得する方法

タイトル通り、TwitterAPIを使ってTwitterからメールアドレスを含むユーザー情報を取得する方法についてです。
ちょっとだけ面倒だったので、備忘録としてまとめ。

使用するのは、TwitterOAuthというPHPのライブラリです。
下記の公式サイトから、インストールから導入方法まで記載されています。

TwitterOAuth PHP library for the Twitter REST API
https://twitteroauth.com/

 
Twitter Application Management 側の設定は割愛します。
が、アプリを作成時、パーミッションの項目で「Request email addresses from users」にチェックを入れるのだけは忘れずに。
Twitter Application Managementには下記からアクセスできます。

Twitter Application Management
https://apps.twitter.com/

 

さて本題のメールアドレス取得ですが、コードは下記のとおりです。

$connection = new TwitterOAuth(CONSUMER_KEY, CONSUMER_SECRET, $access_token, $access_token_secret);
$content = $connection->get("account/verify_credentials",array('include_entities'=> 'false', 'include_email'=> 'true'));

CONSUMER_KEYCONSUMER_SECRETは、Twitter Application Management でアプリを作成すると自動で生成されるので、そちらを使用します。
$access_token と $access_token_secret は、Twitterのアカウント連携が許可されたときに取得できました。
私の場合、こちらの連携処理は、CordovaのTwitter-connect-plugin を使用して取得したトークンを使っています。

TwitterOAuthを新しく定義した後、getメソッドに「account/verify_credentials」と指定します。
が、このままではメールアドレスは取得できないため、オプションのパラメーターとして「array(‘include_entities’=> ‘false’, ‘include_email’=> ‘true’)」を指定します。
include_email = true」という指定がメールアドレス取得に関係していて、これで無事にメールアドレスを含むユーザー情報を取得できます。

なお、取得したデータはオブジェクトのため、そのままで扱いずらい場合は、配列にします。
この時、下記のように 一度JSON形式にした後、さらに JSONを配列にすれば、扱いやすい形になります。

// オブジェクト→JSON→配列に
$user = (json_decode(json_encode($content), true));

以上、Twitterアカウントのメールアドレスを取得する方法でした。
ただ個人的には、TwitterOAuthの使い方と同じくらい、オブジェクト→配列の処理が便利だと感じましたね。
皆様も是非ご活用ください。

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

【CSS】CSSのみで画像を簡単にトリミングできる「object-fit」プロパティが便利

画像を扱う際に、任意の大きさでトリミングしたい場合があるかと思います。
その時に便利なプロパティが「object-fit」です。
これを使えば、画像のトリミングがたった一行でできて、凄く便利!

なお、今回参考にしたサイトはこちら。

1行追加でOK!CSSだけで画像をトリミングできる「object-fit」プロパティー
https://www.webcreatorbox.com/tech/object-fit

 

具体的な記述の仕方はこちら。

img {
    width: 100px;
    height: 100px;
    // トリミング
    object-fit: cover;
}

imgタグに対して、縦横100px、そして「object-fit: cover;」を指定しています。
こうすることにより、画像の縦横比を維持したまま、画像を100px × 100pxのサイズいっぱいに表示することができます。

また、object-position というプロパティを指定することで、表示する画像の位置を指定することもできます。
例えば下記のように指定した場合、

img {
    width: 100px;
    height: 100px;
    // トリミング
    object-fit: cover;
    object-position: 100% 100%;
}

表示している画像が横長の場合は、右端の位置でトリミングしてくれます。
通常のトリミングでしたら、object-position を指定せず中央位置でトリミングで問題なさそうですが、どうしても画像の左側や上を見せたい!というときに使えますね。
ちなみに、object-position: [横の位置] [縦の位置]; という順番で指定します。

 

position とかいろいろ使わなくて済むので、コードもすっきりしておすすめです。
画像トリミングしたいときは、是非こちらを使いましょう。

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

【Cordova】cordova-plugin-facebook4でFacebookログインのパーミッションを複数指定する方法

CordovaアプリでFacebookログインをする時に利用するプラグイン「cordova-plugin-facebook4」でちょっとハマったので備忘録もかねてまとめ。
「cordova-plugin-facebook4」の導入については、下記をご確認ください。

GitHub – jeduan/cordova-plugin-facebook4
https://github.com/jeduan/cordova-plugin-facebook4

今回やりたいのは、ログイン時に、利用者に公開プロフィールの一部とメールアドレスへのアクセスを許可するかを確認し、名前とメールアドレスを取得する、です。
ログイン機能自体はプラグインがすでに用意されているのでこちらを利用します。
ただ、public_profile を指定して取得できる公開プロフィールの中にメールアドレスは含まれていないため、emailについても指定する必要がありました。
が、何故か挙動がおかしい、と若干ハマりました。

 

先に、正常に動作したコードをお見せすると、下記のように記述しました。

facebookConnectPlugin.login(["public_profile","email"],
    function(result) {
        // ログイン成功時の処理
    },
    function(error) {
        // ログイン失敗時の処理
    }
);

ログイン処理を行う、facebookConnectPlugin.login() という関数の第一引数にパーミッションを配列で記述すると、その指定したパーミッションを許可するか、ログイン時に利用者に確認してくれます。

で、何が間違っていたかというと、一緒に指定するパーミッションのようでした。
現在開発中のこのアプリは、アプリからFacebookへの投稿も行う機能もあるため、publish_actions というアプリの利用者の代わりに、投稿ができるパーミッションを許可するかも確認しているのですが、この publish_actions と一緒に email を記述していたのが問題のようでした。
そのため、public_profile と email を一緒に確認し、そのあとで publish_actions を確認する、という流れにすると問題なく動作しました。
読み込みのみのパーミッションと、読み込み&書き込みのパーミッションは、混合して記述してはいけない、という事みたいですね。

Facebookログインのパーミッションについて、詳しくは下記のFacebookのリファレンスを確認してください。

アクセス許可のリファレンス – Facebookログイン
https://developers.facebook.com/docs/facebook-login/permissions

なお、基本的なアクセス許可(公開プロフィールの一部取得、メールアドレス取得、友達のリストにアクセス)では、Facebookの審査は必要ありませんが、その他のパーミッション(アプリからFacebookに投稿など)は審査が必要です。

 

些細な指定ミスでしたが、記述の形式自体は合っていたために、修正に手間取りました。
皆様、もFacebookログインを利用する際は、十分お気を付けください。

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

【CSS】スタイルシート内で計算式が使えるcalc()が便利

Webページを作成している中で、この要素の横幅は画面サイズから20pxを引いたサイズにしたい!など、計算が必要となる場面があると思います。
その場合は、Javascript もしくは jQueryで処理をすることが多いかと思いますが、CSSの calc() という関数でも同じ処理を行えるというので試してみました。

 

まず、jQueryで要素のリサイズをする処理は下記のように記述していました。
なお、今回サイズを指定したい要素は、IDに「content」という名前が指定された要素にしています。

// 要素の横幅指定
var width = $(window).width() - 20;
$("#content").width(width);

で、同じ処理をCSSでは下記のように指定します。

#content {
    width: calc(100vw - 20px);
    width: -webkit-calc(100vw - 20px); /* iOS対応 */
}

ちなみに、vw とは、ビューポートの幅を 1/100 した単位のことです。
ビューポートの幅とは画面の横幅のことを指すので、100vw は 画面の横幅のサイズになります。
なお、画面の高さを取得したい場合は、100vh と記述してください。

個人的な感覚かもしれませんが、コードがすっきりしたように感じます。
見た目にも、何をしているのかが分かりやすいですし、私はこちらの方が好みですね。
もちろん、実行後の画面は jQueryでもCSSでも全く一緒なので、お好みの方を使えば良いかと思います。

私のように、Javascript側で要素のリサイズ処理をしたくない派の方は、是非こちらを使用してはいかがでしょうか。

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

【アプリ】Cordovaで開発したアプリを高速化するポイント

現在開発中のアプリがようやく完成間近の形になってきたので、機能以外の改善も行い始めました。
それがアプリの速度改善!
特にAndroidで動作させると遅いので、調べながらではありますが、手を付け始めています。

今回参考にしたサイトはこちら。

PhoneGapアプリのパフォーマンスを改善する10のポイント -Adobe MAX 2013
https://news.mynavi.jp/article/20130520-am2013pg/

成功するPhoneGapアプリを開発するための高速化&UXテクニック
http://blog.asial.co.jp/1142

どちらも2013年の記事なのでやや古めですが、参考になりそうな内容です。

 

で、まずは手っ取り早く試せそうなものを一つずつ試してみました。

1.ハードウェアアクセラレーションを意識してCSS Transitionsを利用する

具体的には、CSSに下記のスタイルを適応することです。

transform: translate3d(0, 0, 0);

このスタイルを追加することで、HTML DOMの描画にGPUが用いられるようになるとのこと。
そうすると、滑らかな描画を実現でき、さらにアプリの速度が大きく向上することもあるそうです。
ただし、あまり多くのHTML DOM要素の描画にGPUを用いると、GPU上の利用可能メモリーが埋まってしまう可能性があり、そうすると突然アプリがクラッシュする危険性もあるとのこと。
特に、深くネストされたDOM要素にこのスタイルを適応すると、上記のようにアプリがクラッシュすることがあるため、安易に追加するのは控えるべきですね。

2.Clickイベントは使用しない

スマートフォンのClickイベントは、画面がタッチされてから発生するまでに300msほどの遅延があるため、Clickイベントの仕様は、動作が遅くなる原因になります。
そのため、代わりにTouchStartを使用するか、FastclickなどのスマホでのClickイベントの応答速度を早くするライブラリを利用するのが良いとのこと。
ちなみに、開発中のアプリには、このFastclickを導入しています。

Fastclick の導入については、こちらを参考にしました。

スマホのクリック応答速度を劇的に速くしてくれる 『FastClick』 の使い方
http://phiary.me/fastclick-usage/

 

3.コンテンツのリフローを控える

リフローとは、要素の位置や大きさなどの再計算を行うことを指します。
リフローの計算は負担が大きいので、必要最小限に抑えるべきとのこと。

…これやってる…。
でも、この処理はどうしてもやらなければならないので、どうにかならないか確認しなければですね。
あとは、下記も効果的とのこと。

  • DOM要素の数を減らす
  • 深くネストされたHTML DOM構造を避ける

…これもやっちゃってるなぁ…。
これについては、コードを確認して、削れそうなところは削らねば。
 

4.テストする

最後のポイントとしては、実際のデバイス、実際のデータを使い、実際の環境でテストする、とのこと。
特に、少し古めのスペックが低めの端末でテストするのがよさそうですね。
私は、私用の端末はそこそこ良いものを買ってしまったので、案外サクサクと動いてしまい、あまり参考にならない…。
会社にあるテスト用端末をお借りしなければですね。

 

他にもまだ改善点はありますが、とりあえず私が試せたもの、確認したものは以上です。
とりあえず、リフローを改善しよう…!

私と同じくCordovaのアプリを開発している方は、是非参考にしてみてください。

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

【PHP】リンク先のURLが有効かどうかを確認する方法

画像のURLを扱うときに、もしそのURLがリンク切れだったら代わりの画像を表示させる、という処理を行いたかったので、その方法についてまとめ。

なお、今回はこちらのサイトを参考にさせていただきました

【php】 URLが存在するかどうか確認する at softelメモ
https://www.softel.co.jp/blogs/tech/archives/4766

 

チェック方法としては、下記のように file_get_contents 関数を利用して、URL先のサイトの内容を文字列に読み込み、結果が返ってくればリンク先が存在している、という判断をしています。

$url = 'チェックしたいリンク先のURL';
$response = @file_get_contents($url, NULL, NULL, 0, 1);
if ($response !== false) {
    // リンク先が存在するときの処理
} else {
    // リンク先が存在しない時の処理
}

が、すべての内容を取得すると処理が重くなってしまうため、先頭の1文字だけを取得しています。
また、file_get_contentsは、リクエスト先がないときに warning が発生してしまうので、@をつけてエラーメッセージを表示させないようにしています。

 

他にも fopen 関数や get_header 関数を使用する方法も載っていましたが、これが一番処理が早く、また分かりやすいかなと思います。
URLチェックをしたい場合は、是非参考にしてください。

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

PHPでお手軽にセッションハイジャック対策をする方法

皆さんはセッションというのをご存知でしょうか。
各クライアント(ブラウザ)に対して、サーバーからセッションIDという一意の識別番号を発行してクライアントに保存することで、個々のクライアントを識別できるようにする仕組みです。

Webサービス上では、ログイン状態の管理や、ユーザー情報の一時保存などによく使われます。

このセッションIDですが、実態はブラウザ側にCookieとして保持されているため、もし何らかの方法で不正に抜き取られてしまうと、場合によってはアカウント乗っ取りなどをされてしまう可能性があります。
このような攻撃を一般的に”セッションハイジャック”と呼びます。

対策としてセッションIDを定期的に変更することで、こういった不正ログインを簡単に防ぐことができます。

具体的には、
“session_regenerate_id()”
関数を実行することで、セッションを維持したままセッションIDを更新することが可能です。

session_regenerate_id() – PHP.net Documentation

例えばこの関数をログインチェック時や、特定、あるいはすべてのページにアクセスされたときに実行されるようにしておけば、万が一セッションIDを盗み出されても、不正ログインされる確率が低くなります。

また、

“session_regenerate_id(true)”

とすると、セッションを切ったうえでセッションIDを再発行できるので、ログイン状態はリセット(ログアウト)されてしまいますが、よりセキュアな状態にすることも可能です。

年々、Webサービスへの攻撃手法が高度化してきていている一方で、アプリの設計などにより基本的な脆弱性が発生してしまうこともまだまだあるようです。
高度な攻撃への対策は高度な知識とテクニックが必要になることもありますが、基本的な対策は知っていればだれでも対策できることも多いので、是非押さえておきたいですね。

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

【jQuery】スマートフォンでのタッチイベントについて

本日の記事は、何だか久しぶりな気がするjQueryについての技術ネタ!

スマートフォンサイトで、地図とマップピンを表示させることがあったのですが、その際に、「ドラッグではピンの位置はそのままで、地図をタップした時のみマップピンを移動させる」という処理をさせたい、ということがありました。
上記のように、ドラッグとタップで処理を変えるときなどに、タッチイベントを活用したので、自分の覚え書きとしてまとめます。

タッチイベントの種類は下記の通り。

  • touchstart
  • touchend
  • touchmove

他にも、touchcancel というのがあるらしいですが、なかなか使う機会が分からなかったので、今回は割愛します。

 

まずは、それぞれのイベントについて簡単にまとめ。
最初は、touchstart について。
こちらは、タッチされたときに実行されるイベントです。

$("#main").on('touchstart', function(){
    // 画面がタッチされた時に実行したい処理
});

id に main が指定された要素に対して touchstart イベントを指定しているので、main がタッチされた瞬間に発火します。
こちらは click とほぼ同じイメージで動作するので、分かりやすく使いやすいです。

次は、touchend について。
こちらは 画面から指が離れたタイミングで発火します。

$("#main").on('touchend', function(){
    // 画面をタップして指が離れた時に実行したい処理
});

ただし、touchend では、event.changedTouches[0].pageX や event.changedTouches[0].pageY で、X座標・Y座標の位置を取得できないので注意が必要とのこと。
私は 地図の表示に Mapbox を利用しているので、問題なかったのですが、jQueryでX座標・Y座標を取得したい場合は、touchstart を使うか、touchmove を併用して変数に格納するのが良いとのこと。
このあたりはお好みで使い分けてもいいと思います。

最後は、touchmove について。

$("#main").on('touchmove', function(){
    // 画面がドラッグしている時に実行したい処理
});

こちらはドラッグをしている間に呼ばれるイベントです。
繰り返し呼ばれるので、座標の位置情報を変数に格納するなど、簡単な処理を書くだけにとどめたほうが良いとのこと。
また、指を移動させないと、touchmove が発火しないことがあるとのことでしたので、このあたりも注意したほうがよさそうです。

 

で、最後に私が実際に書いたコードがこちら。

var isDrag = false;  // ドラッグ中かの判定
// マップがドラッグされたときに実行される<span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span>
$("#map").on('touchmove', function (e) {
    if(!isDrag){
        // ドラッグ中なので、値を true に変更
        isDrag = true;
    }
});
// マップをタップし指を離したときに実行される
$("#map").on('touchend', function (e) {
    if(!isDrag){
        // 画面から指を離した際に実行したい処理
        // 例:マップピンを移動する など
    }
    isDrag = false;
});

もしかしたらもっといい方法があるのかもしれませんが…意図していた通り、「ドラッグ中は地図のドラッグだけを行い、タップした時のみマップピンが移動する」という処理ができたので、これでOKということにします。

 

touchstart、touchend、touchmove の3つをご紹介しましたが、単なるタッチイベントなら、一番最初の touchstart だけ覚えておけば正直問題なさそうな気もしますね。

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

【PHP】PHPExcelでグラフを一から作る方法

昨日もPHPExcelについての記事を書きましたが、本日も引き続き同じネタについてまとめ。
当初はグラフ入りテンプレートを使ってグラフを描写する予定でしたが、思っていた以上に「複雑なグラフ」のボーダーラインが低く、どうしても作りたいグラフが消されてしまうので、プログラムでグラフ作成をすることにしました。

 

ライブラリ導入から、現在のシート選択の部分は割愛します。
やっていることは意外と単純で、まず、グラフの表示範囲や参照先のセルを指定します。

//グラフ描画設定
$options = [
    'title' => 'グラフタイトル',
    'topPos' => 'A3',   //描画するグラフの左上の位置
    'bottomPos' => 'I24',   //描画するグラフの右下の位置
    'labelPos1' => $sheet.'!$B$2',  //グラフのデータラベル
    'xAxisRange' => $sheet.'!$A$3:$A$12',   //グラフのx軸の値の範囲
    'dataValueRange1' => $sheet.'!$B$3:$B$12'  //実際のデータ範囲
];
なお、$sheet は、現在アクティブなエクセルのシートを指定します。

実際にグラフを書いているのは下記のコード。

// グラフのデータラベル設定
$dataSeriesLabels = [
    new PHPExcel_Chart_DataSeriesValues('String', $options['labelPos1'], null, 1)
];

// グラフのX軸項目設定
$xAxisTickValues = [
    new PHPExcel_Chart_DataSeriesValues('String', $options['xAxisRange'], null, 10)
];

// グラフの系列設定
$dataSeriesValues = [
    new PHPExcel_Chart_DataSeriesValues('Number', $options['dataValueRange1'], null, 10)
];

//  グラフ描画設定
$series1 = new PHPExcel_Chart_DataSeries(
    PHPExcel_Chart_DataSeries::TYPE_BARCHART,               // 横棒グラフ
    PHPExcel_Chart_DataSeries::GROUPING_CLUSTERED,          // plotGrouping
    range(0, count($dataSeriesValues)-1),                  // plotOrder
    $dataSeriesLabels,                                     // plotLabel
    $xAxisTickValues,                                      // plotCategory
    $dataSeriesValues                                      // plotValues
);
$series1->setPlotDirection(PHPExcel_Chart_DataSeries::DIRECTION_BAR);

//  プロットエリアの設定
$plotarea1 = new PHPExcel_Chart_PlotArea(null, [$series1]);
//  グラフ内での凡例のポジション設定
$legend1 = new PHPExcel_Chart_Legend(PHPExcel_Chart_Legend::POSITION_BOTTOM, null, false);
//  y軸のラベル設定
$yAxisLabel1 = new PHPExcel_Chart_Title('');
//  タイトルがある場合、タイトルの設定
$title1 = new PHPExcel_Chart_Title($options['title']);

//  グラフ作成
$chart1 = new PHPExcel_Chart('chart1',       // グラフの名前
                             $title1,        // グラフタイトル
                             $legend1,       // 凡例
                             $plotarea1,     // グラフのプロットエリア
                             false,           // 表示されているセルだけをプロット
                             0,              // 空白セルをどうするか
                             null,           // x軸のラベル
                             null            // y軸のラベル
);

//  グラフがワークシートのどこに描画されるかの設定
$chart1->setTopLeftPosition($options['topPos']);
$chart1->setBottomRightPosition($options['bottomPos']);

//ワークシートにグラフの追加
$objWorksheet->addChart($chart1);

こちらのコードでは横棒グラフを作成しています。
表示位置やタイトルを任意で決められるので、なかなか自由度は高めですね。

 

作成できるグラフの種類も豊富で、棒グラフ以外にも、折れ線グラフやレーダーチャート、あとは設定名的に察するに、バブルチャートなんかも使えそうでした。
…が、よく使うのは棒グラフ・折れ線グラフ・円グラフぐらいかな。

便利&簡単なPHPExcelですが、若干ハマっている箇所もあり、どうしても縦軸の項目名とグラフの凡例が正しく表示されません…。
データ自体は指定してあるので、設定が間違っているのだと思っています。
もし、この不具合がわかる方いらっしゃいましたら、どうぞコメントでご指摘をお願い致します。

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