Monacaを利用したアプリ開発 step.1

Monacaを利用したアプリ開発 step.1

★Monaca とは?

ハイブリッドアプリ開発のためのフレームワーク「Cordova」をベースにした日本製の開発プラットフォーム(クラウド型 IDE)です。
Monacaを使えば、iOS・Android共通の簡単なスマホアプリを、HTML・CSS・JavaScriptの知識のみでも開発することができます。
(限界はありますが・・・)

paiza.ioを試用。。。

ちょっと時間があったので、CODEPEN のように簡単にコードを書いてブログなど貼り付けられる、PHP等のプログラミングにも対応したフロントエンド開発環境サイトを探していくつか発見。

printf()やsprintf()と指示子

プログラミングで何かを出力するには、
print()関数や(PHPでは)echoを使ったりするけれど、
printf()やsprintf() を使うこともよくあって、これがまた便利。
しかし、その扱い方をよく忘れてしまうのでメモっときます。

printf() : フォーマット済みの文字列を出力する関数
sprintf() : フォーマットされた文字列に値を返す関数

【参考サイト】
●printf() 
 http://php.net/manual/ja/function.printf.php
●sprintf()
 http://php.net/manual/ja/function.sprintf.php

この printf関数や sprintf関数を説明するときに、まず耳にするのが
「フォーマット済み(フォーマットされた)の文字列って何?」という質問。

まずはこの「フォーマット・・・」ってヤツから。
例えば、問い合わせフォームを利用すると、自動で問い合わせ内容の確認メールが届くことがよくありますよね。

(例)●●様 いつも▲▲をご利用いただき有難うございます。

これは予め決まった返信文を用意しておいて、その文中の特定位置(●●や▲▲のとこ)に自動で文字を差込んで送るプログラムになってます。
このような特定の位置に自動で文字を差し込むようになっている文書のことを「フォーマットされた文字列」と言います。

上記(例)のように、特定の位置へ文字を差し込む場合は、

(PHP記述例)
 $format = “%s様 いつも%sをご利用いただき有難うございます。”;

という風に「フォーマットされた文字列」を用意します。
この時、差込位置を指定している「%s」をディレクティブ(指示子)と言い、PHPでは指示子の始めに必ず「%」をつけて、差込む値の型式によって「d」とか「s」とかを指定します。

※指示子の種類は下記の表を参照

%d 10進数(数値)
%u 符号無し10進数
%o 符号無し8進数
%x 符号無し16進数
%X 符号無し16進数(大文字表記)
%e 指数形式の浮動小数点
%E %eと同じ(大文字表記)
%f 固定小数点形式の浮動小数点
%g %eまたは%fと同じ
%G %eまたは%fと同じ(大文字表記)
%b 符号無し2進数
%c 指定した文字コードに対応した文字
%s 文字列
%p 値のポインタ
%n 文字数を指定した変数に格納
%% %の文字そのもの、「\(エスケープシーケンス)」と同じ扱い)

そして、出力指定でprintf()やsprintf()を使う。

(printfを使ったPHP記述例)
 printf($format, “鈴木”, “仮想ショップ”);

(sprintfを使ったPHP記述例)
 echo sprintf($format, “鈴木”, “仮想ショップ”);

(実行結果)
 鈴木様 いつも仮想ショップをご利用いただき有難うございます。

上記例の出力結果はどちらも同じ。

printf()だとそのまま出力されるけど、
sprintf()では差込みしか行われないので、出力するにはechoなどの出力指定を付け加える。
sprintf()はデータベース等への書き出しを行う場合に使うのが基本なので、出力するならprintf()を使うのが一般的。

$format = "%s様 いつも%sをご利用いただき有難うございます。";
printf($format, "鈴木", "仮想ショップ");

実行サンプルはこちら

私の中では、いつまで経っても憶えられない関数の代表格ですね・・・これが。

Google Feeds API 廃止

2016年12月よりGoogle Feeds APIは完全に廃止となったようです。
いろんなサイトでjQuery等を使った代替策が掲載されていますが、他サイト(クロスドメイン)のRSSを読み込むにはPHPと連携させる必要があるようなので、PHPのみで処理したほうが簡単そうですね。

PHPでのフィード読込はこちらの参考サイト等をどうぞ。

HTML5+CSS3の時代だからSVGを

SVG形式ならビットマップ画像じゃなく
パスの状態でWEBにアップできるから
拡大しても劣化しない?

かなり昔からイラレのファイル形式にあったSVG形式。
WEBにアップして拡大してもキレイに見えるってことで、一度、挑戦してみたことがあるのですが、ほとんどのブラウザが対応していなっかたのであきらめてました。

しかし、HTML5+CSS3の時代がやってきた今では実用しているサイトを見かけるようになったので、ちょっとサンプルを作ってみました。

作ってみるとかなり奥が深く、メリットもデメリットも多々あります。

まだまだ私も勉強が必要なのですが、参考までにぜひどうぞ。

Syntax Highlighter

記載したソースコードを見やすくしてくれるやつです。
プログラムなどの解説サイトなどでよく使われているますね。

こんな感じの。

<p id="code">
   表示したいHTMLソース
</p>
p#code:before {
   content:"表示したいCSSソース";
}
var msg = '表示したいJavaScriptソース';
document.getElementById("code").innerHTML = msg;

一般のサイトではあまり使わないと思いますが参考までに。

通常のHTMLページに「Syntax Highlighter」を導入する方法はこちらのサイトなどを参考にしてください。

通常(HTML)版のサンプルはこちら。

URL(URI)パラメータの文字列デコード

GETパラメータでエンコードされた文字列をデコードする方法(javascript)

var str = decodeURI("エンコードされた文字列");
document.write(str);