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

村上 著者:村上

【HTML5】入力値の形式を正規表現で指定できる「pattern」属性

今まで、正規表現って PHP で行っていたのですが、HTML5 なら HTML 側で入力値をチェックできるとのこと。
使う機会がなかったので、今まで知りませんでしたが、これは便利そう。
ただ、「送信」などのボタンを押した後に、入力値のチェックを行うので、入力自体は出来てしまうんですよね。

 

使い方は、下記の通りです。

<form>
    <input type="text" name="userid" pattern="^[0-9A-Za-z]+$">
    <input type="submit" value="送信">
</form>

input タグに pattern 属性があるので、ここに正規表現を記述するだけです。
なお、正規表現で記述した文字列のパターンに一致しない場合は、下記のようにエラーメッセージが表示されます。

わざわざエラー文を表示する手間が省けて、これ良いですね!
見た目が買えられないのが難点かなとも思いますが、シンプルでわかりやすいので、このデザインでも問題なさそう。

と、いうことでHTMLで入力チェックをする方法でした。
…正規表現、覚えよう…。

 

最後に、よく使うのにすぐ忘れる、メールアドレスを判断するための正規表現をメモ。

// メールアドレス
^[0-9a-z_./?-]+@([0-9a-z-]+\.)+[0-9a-z-]+$
  • この記事いいね! (0)
村上 著者:村上

【CSS】CSSで変数が使えるという「カスタムプロパティ」が便利そう

今日、偶然に見つけて便利そうだったので、簡単にではありますがまとめてみました。
CSS変数」「カスタムプロパティ」「CSS Variables」と呼ばれているもので、CSSで変数が使える、というものでした。

なお、偶然見つけたサイトはこちら。

CSSで変数(カスタムプロパティ)を使ってみよう
https://www.webcreatorbox.com/tech/css-variables

 

で、気になる使い方ですが、まず変数の定義は下記のように行います。

:root {
    --item-padding : 10px;
}

:root」の中で定義すると、グローバル変数のように使用できるとのこと。
変数の宣言は「」から始め、任意の名前を付けます。
それを「:」で区切り、変数の値を定義します。
上記では「–item-padding」という名前のグローバル変数に「10px」の値が定義されている、という意味になります。
なお、値は数値だけでなく、「center」などの文字列や、「#F00」という色コードもOKとのこと。
また、変数名は、大文字と小文字が区別されるため、「BackColor」と「backColor」は、別の変数として判断されます。

使用するときは、下記のように指定します。
.item {
padding : var(–item-padding);
/* padding : 10px と同義 */
}
var()」の中に、定義した変数名を指定すると、その変数の値を使用できます。
ちなみに、以前紹介した calc() との併用も可能で、下記のように書くこともできます。

:root {
    --item-padding : 10px;
}

.content{
    padding : calc(var(--item-margin) * 2);

 

また、変数の中で変数を呼ぶこともできるそうで、下記のようにして、背景をグラデーションにすることもできるとのこと。

:root {
  --main-color: #7117ea;
  --sub-color: #ea6060;
  --bg-gradation: linear-gradient(135deg, var(--main-color) 0%, var(--sub-color) 100%) fixed;
}

body {
  background: var(--bg-gradation);
}

body で書かれている、背景色を設定している部分の記述がとてもシンプルですね!
ただ慣れていないと、上の :root の中で、何を書いているのかが分からなくなりそう…。

さらに、CSSで記述した変数を、JavaScriptで利用する、という方法もあるそうですが…まだ使いこなせそうにないので、いったんこちらは置いておきます。
気になる方は、ブログ冒頭で紹介した記事をご覧ください。

そして、肝心の対応ブラウザですが、Chrome, Firefox, Safari, Edgeなどに対応しているとのこと。
IEは…乞うご期待!というところでしょうか。
メジャーなブラウザにはほぼ対応しているみたいなので、試しに使ってみるのもよさそうですね。

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

【CSS】要素を非表示にする「display:none」と「visibility:hidden」の違い

CSSで要素を非表示にするときに使われる、「display:none」と「visibility:hidden」の違いについて。
最初のころはよく間違えたので、戒めも込めてまとめ。
というか、いまだに visibility が空で書けない。

 

まずは、それぞれの違いについて

■ display:none

display:noneは、このプロパティを指定した要素そのものが消えます。
単に非表示というよりも、削除された感じに近いですね。
なお、要素そのものが消えるので、後ろに配置された要素はその分詰めて表示されます。
再度表示させる場合は、「display:inline」か「display:block」を指定すればOKです。
 

■ visibility:hidden

visibility:hiddenは、display:none とは違い、要素を見えなくするだけです。
要素自体が消えるわけではないので、要素があった範囲は詰められることなく、そのまま残ります。
そこだけぽっかりと空間ができてしまうので、レイアウトが崩れることはないのですが、場合によっては少し不格好になって今う可能性もありそうです。
再表示する場合は、「visibility:visible」を指定します。

 

ということで、「display:none」と「visibility:hidden」の違いについてでした。
要素の非表示という機能はほぼ同じなので、混同しないようにしたいですね。
覚え方としては「none = なし」か「hidden = 隠す」という風に覚えると、理解しやすいかなと思います。
最初のころは、「display:hidden」とか書き間違えていたので、皆様はご注意ください!

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

【PHP】empty()関数で空と判断される値

そう言えば、ちゃんと調べたことがなかったのでまとめ。

変数に値が格納されているかのチェックをするために用いる empty() 関数ですが、「空の変数」だと判断される値は下記の8つです。

  • “” (空の文字列)
  • 0 (整数 の 0)
  • 0.0 (浮動小数点数の 0)
  • “0” (文字列 の 0)
  • NULL
  • FALSE
  • array() (空の配列)
  • 変数は宣言されているが、値が指定されていない変数

PHPマニュアルを参考にさせていただきました。

PHP: empty – Manual
http://php.net/manual/ja/function.empty.php

調べるまでもなく、大体把握していた通りでしたが…文字列の「0」も「空」だと判定されるのは実際にやったことがないので知りませんでした。
なお、指定した変数が存在していなくてもエラーにはならないとのこと。

また、似ている関数に isset() 関数があります。
こちらは、変数が宣言されており、かつ値がNULLでなければ true を返します。
…が、こちらはあまり使わないかな?

 

ということで、empty()関数についてでした。
意外と今までの経験から「多分こんな感じ」で把握しているだけだったので、こうして改めて調べるのも大事ですね。

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

【JavaScript】配列←→JSON文字列に変換する方法

今回はJSONの取扱いについて。
JSONから配列へ、もしくはその逆をやることがあるので、まとめてみます。

 

■ JSON → 配列

JSON文字列を配列にするときには、JSON.parse() を使います。
使用例は下記のとおりです。

var json_text = '{ "a" : 100, "b" : 200, "c" : 300 }';
var arr = JSON.parse(json_text);

 

■ 配列 → JSON

先程とは逆に、配列をJSON文字列に変換したいときは JSON.stringify() を使います。

var arr = ["a","b","c"];
var json_text = JSON.stringify(json_text);

 

パッと見ただけでは、何かが変わったようには見えないのですが、確かに配列←→JSON文字列に変換できていました。
JavaScriptでは、Ajaxの処理をするときに、渡すデータが JSON だったり、もしくは結果が JSON で返ってきたりするというシチュエーションが多いかな?
意外と使用頻度は高そうですが、特にスペルミスで、再検索したりするので、この機会に備忘録を兼ねてまとめてみました。
私は特に stringify のつづりを間違えます…。iが抜けるとか。

もしJSONを扱うときがあったら、ご活用いただければと思います。

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

【JavaScript】テキストボックスに当てられたフォーカスを外す方法

今回はタイトル通り、Webサイトなどでテキストボックスに当てられたフォーカスを解除する方法です。
パソコンでは特に問題ないのですが、スマートフォン、特にAndroidでフォーカスが外れなかったために、ソフトフェアキーボードが消えず、ちょっと面倒な目にあったんですよね…。

で、肝心の方法ですが、フォーカスを外したいタイミングで下の3行を実行するだけ。

// 現在アクティブな要素を取得する
var active_element = document.activeElement;
// フォーカスを外す
if(active_element){
  active_element.blur();
}

いたってシンプル&簡単です!

 

ただ、この処理は要素からフォーカスを外すだけなので、逆に指定した要素にフォーカスを当てたい場合は下記のように記述します。

var element = document.getElementById("フォーカスを当てたい要素のID"); 
element.focus(); // カーソルを合わせる

 

ということで、要素からフォーカスを外す方法でした。
そこまで使用頻度は高くなさそうですが、覚えておけば便利かも?
もし、使う場面があれば、是非ご活用ください。

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

【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)