著者アーカイブ 村上

村上 著者:村上

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

村上 著者:村上

【イベント】2月2日に「第4回 浜松ICTシンポジウム」を開催致しました

以前もこのブログでご紹介しましたが、昨日2月2日(金)に、「第4回 浜松ICTシンポジウム」を開催致しました。
主催は、NPO法人浜松ソフト産業協会です。
今回の参加者は100名ほどでした。
昨年度よりは少し少ない参加者数でしたが、100名は超えたのでまあ良いのではないかな?

シンポジウムについて詳しくははこちら。

2018年2月2日、浜松ソフト産業協会主催「第4回 浜松ICTシンポジウム」を開催します。
https://hamamatsusoft.com/news/2017/00033/

 

講演のプログラムはこのような感じ。

今回は講師4人による講演と、結構盛り沢山な内容となっております。
で、今年も私は受付を担当していました。
受付だと、いろいろな方とご挨拶できて楽しかったです。

 

また、空いた時間を見計らって講演を聴くこともできました。
聴いたのはソフ協会員でもある、モアソンジャパンの森川社長の講演です。
身近なIoTのデバイスの紹介から始まり、実際で会社で行った事例の紹介、また他のソフ協会員の事業紹介など、興味深い内容でした。
個人的には、講演冒頭で自転車の写真が出てきて、そして自転車で使われているIoT機器の説明から入ったので、思わず「おっ!」となって内容に引き込まれましたね。
最近私も自転車を始めたので、興味のある分野を取っ掛かりにしていると、更に興味が湧きますね。

ということで、スタッフとして参加しつつも、今回は聴講もできたので、私としては結構楽しかったです。
忘れ物をするというミスも犯しましたが、大事にはならなかったので、良しとしていただきたい…。
…次回は気をつけます!

 

ちなみに、会場の写真がこちら。

プロジェクターが大きいので、後ろの席からでもよく見えました。
あと、毎回思いますが天井のシャンデリアが綺麗。

村上 著者:村上

【Webサイト】PDFファイルの回転・圧縮・分割・結合が簡単にできるサイト「Smallpdf」

最近、よくPDFファイルを扱うことがあるのですが、その際に便利なサイトが、こちらの「Smallpdf」。

smallpdf.com – 無料Pの変換はこちらでどうぞ!DF
https://smallpdf.com/jp

タイトルにあるように、PDFを回転させたり、圧縮したり、複数枚のデータのPDFを1枚ずつに分割できたり、逆に複数のPDFを結合できるサイトです。
それ以外にも、PDFを画像ファイルに変換したり、PDFをエクセルやワードに変換したりもできます。

 

「Smallpdf」のサイトはこちらのようなレイアウト。

トップページにボタンがずらりと並んでおり、ここからやりたいことを選びます。
アイコンもシンプルだし、下に何ができる丘も簡潔に書いてあって分かりやすいですね。

そのうちの一つを選択してみるとこんな感じ。
画像は「PDFを回転」を選択した画面です。

中央に大きく、ファイルを選択するエリアがあります。
ローカルファイルだけではなく、DropboxGoogle Drive から選ぶこともできます。
ファイルを選択した後は、右回転・左回転のボタンが表示されるので、任意の回転をかけた後「変更を保存する」ボタンを押します。
すると下の画像のようなファイルダウンロードページに移動するので、ここから PDFのダウンロードをします。

また、ダウンロード以外にも、Dropbox や Google Drive へ保存したり、もしくはさらにここからワードに変換したり、作成したPDFをパスワードで保護することもできます。
さらに変換したい場合、一度トップページに戻らなくて済むのは楽ですね!

 

ということで、ブックマークしておくと何かと便利な「Smallpdf」でした。
これよりさらに上のサービスをご希望の方は、「Smallpdf Pro」という有料サービスもあるようなので、こちらも検討してみてはいかがでしょう?
でも、数ファイルをちょこっと使う分には、無料版で十分ですね。

村上 著者:村上

【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を扱うときがあったら、ご活用いただければと思います。

村上 著者:村上

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

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

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

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

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

 

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

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

 

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

村上 著者:村上

【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; ですね。

村上 著者:村上

【サイト】マストドンのclient_idとclient_secretを取得できる「Access Token Generator for Mastodon API」

マストドンのAPIを使う機会があり、既に他の方が作成してくださってあったコードを改変中していたのですが、その時にclient_idclient_secret が必要だったので、その取得方法について。

といっても取得は簡単で、こちらのサイトを利用しました。

Access Token Generator for Mastodon API
https://takahashim.github.io/mastodon-access-token/

 

使い方は、まずサイト左のFrom欄に、マストドンのURL、クライアント名を入力します。

クライアント名は、承認画面で表示させるアプリケーション名を入力します。
サイト名とか、アプリ名でOKです。

あとは、「Scopes」から、読み込みのみなのか、読み込み書き込みも許可するのか、と言った、マストドンAPIで行いたいことの範囲を設定します。
私は書き込みと、念のため読み込みもできるように、「read write」を選択しました。

必要事項を入力したら、あとは「Publish Access Token」のボタンをクリックするだけ!
マストドンサービスのログイン画面に切り替わるので、自分のアカウントでログイン後、連携を許可するかを訊ねられるので、連携を承認します。
その後、ページ右の Result に、access_tokenclient_idclient_secretが表示されます。
あとは、この取得できた client_id と client_secret を使って、利用したいマストドンAPIを実行します。

 

こういうID取得って案外面倒くさかったり、または大体のサービスで最初に一度くらいしか使わないので、すぐ忘れてしまうんですよね。
きっと私もすぐ忘れるだろうという事で、まとめました。
是非、ご参考にしていただければと思います。

村上 著者:村上

【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の使い方と同じくらい、オブジェクト→配列の処理が便利だと感じましたね。
皆様も是非ご活用ください。

村上 著者:村上

【便利サイト】PNGやJPG画像を綺麗に圧縮してくれる「TinyPNG」

画像を圧縮したい、けど画質が粗くなるのはNG!というときにおすすめしたいサイトが、今回紹介する「TinyPNG」です。
Webサイトを作成する際、画像のサイズを小さくすることが重要になってきますが、このサイトを使えば、画像を圧縮しつつ、画質をほぼそのまま維持することができます。
ちなみに、私には圧縮前と圧縮後の写真の違いが全く分かりません。

TinyPNGへのリンクはこちら。

TinyPNG – Compress PNG images while preserving transparency
https://tinypng.com/

 

使い方はとっても簡単で、画面上部中央にある、「Drag your .png or .jpg file here!」と書かれた枠の中に、圧縮したい画像をドラッグするだけ!
もしくは、枠の中をクリックして、画像を選んでもOKです。
あとは、自動的に画像が圧縮されます。

圧縮後は画面が下記のように変わるため、「Download」をクリックして、圧縮した画像をダウンロードします。

今回の画像は、1.0MB から 246.2KB に圧縮できました。
実に 76% のサイズダウンです。

で、実際に圧縮した画像がこちら。
上がオリジナルで、下が圧縮後の写真です。

▼オリジナル

▼圧縮後

目が良い人にはわかるかもしれませんが、70% も圧縮したとは思えない画質です!
これならば、問題なくWebサイトにも利用できますね。

Webサイトの高速化にお悩みの方は、是非こちらのサイトで画像の圧縮をお試しになってはいかがでしょうか。

村上 著者:村上

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