javascriptでphpのincludeみたいな事をしてみる

システム部の鈴木です。
年度末で弊社も大忙しですが、小ネタを一つ。

phpとかですと共通のヘッダやフッタなどを共通化するというのは良くありますが、
それをJavaScriptでやってみたいと思います。

仕様

  • 共通ファイルのhtmlを作成、部品毎に<!–inc_****–><!–/inc_****–>で囲んでおく
  • ajaxで共通ファイルをロード
  • 読み取る側のhtmlでは、<!–inc_****–><!–/inc_****–> の **** 部分を指定して表示

共通ファイルのhtml

例えば幾つかのリストがあって、複数のページで使いまわしたいとします。
それを共通のファイルにぶちこんでおきます。

[html]
<!–inc_lsit1–>
<ul>
<li>てすと1</li>
<li>てすと1</li>
</ul>
<!–/inc_lsit1–>
<!–inc_lsit2–>
<ul>
<li>てすと2</li>
<li>てすと2</li>
</ul>
<!–/inc_lsit2–>
[/html]

javascript

include.js とかで保存しときます
共通ファイルのURLは今回は決め打ちですが、共通ファイルが多様でない想定のものなので決め打ちで。
[javascript]
$(function(){
var tmp = $.ajax({
url: ‘/path/to/include.html’,
cache: false,
async: false
}).responseText;

var target = $(‘[id^=inc_]’);

jQuery.each(target, function() {
var include = $(this).attr(‘id’);
var reg = new RegExp(‘<\!–‘+include+’–>([\n\r]|.)*<\!–\/’+include+’–>’);
var html = tmp.match(reg);
$(this).html(html[0].replace(reg, ”));
});
});
[/javascript]

読み取る側のhtml

include.js をロードし、読み取りたい部分をidで指定します
以下の例では共通ファイルから<!–inc_list1–><!–/inc_list1–>の範囲だけを抜き出して表示させます
[html]
<script src="include.js"></script>
<div id="list1"></div>
[/html]

以上です。

今回のように特定のタグ~特定のタグのような範囲を抜く場合は最短マッチを使います。
さらに今回は複数行にマッチさせています。
加えてマッチさせる条件に変数を使いたいので RegExp オブジェクトでパターンを作成してます。
該当部分はここですね。

[javascript]
var reg = new RegExp(‘<\!–‘+include+’–>([\n\r]|.)*<\!–\/’+include+’–>’);
var html = tmp.match(reg);
[/javascript]

また読み込む側のページで何箇所か抜き出したい、今回の例ならlist1もlist2も表示させたい場合もあると思うので
そのために $(‘[id^=inc_]’) でページ内の表示させたい部分をまとめて拾って、jQuery.each() で順に処理させてます。

いわゆる共通化が目的ならphpが使えればもちろんその方が簡単なのですが、
staticページで作っててmod_rewriteも使えないなど制約があるときにはこんな方法もあります、という小ネタでした。

またはちょっとしたスクレイピングをささっとやりたい場合に使えるかもしれないですね。

特別なソフトがなくたって「ペイント」で画像加工ができルンです。


こんにちは。

Webデザイン会社にいながら、ディレクターでもデザイナーでもコーダーでもましてエンジニアとかでもない、

ただのOL(事務)の木元です。素人目線でお送りします。

 

さて、画像加工と言えばフォトショップが王道。

ですが、デザイン関係等々の仕事をしている人じゃないとなかなか触る機会もないソフトですよね。

でもでも画像加工はしたい!

 

近頃は無料ソフトも多く出回っていますが、

「ど、どのソフトを選べばいいのか分からない。」
「い、インストールって何?」っていう方だって結構いらっしゃると思うんです。(私も含む)


そんなときは!!

moji

(Windows7です)


Windowsにはデフォルトで入っているお絵かきソフト、それがペイントです。
(Macユーザーさんごめんなさい。)

一般の方にはじゅうぶんな画像加工ができます。↑上の文字もペイントで作成。

 

たとえば、

「画像のサイズ(容量)を小さくしたーい!」

画像をネットオークションやブログなどにアップしたり、フリーメールに画像を添付するとき、1枚あたり〇MBまでと制限があったりしますよね。
最近のカメラは高画質なのでそのままだと容量オーバーになってしまうことも多いです。


これが「サイズ」いじるだけでぺろっとできます。

size

画像を開きます。(弊社のお犬様くるみさんです。)

size2

そしたら、サイズをいじるだけ!

size3

小さくなりました!これを保存すれば容量をおさえられます。

 

 

はたまた・・・

「合成って、してみたいよね。。」

これも意外と簡単にできます。

gousei

まずは、切り取りたい部分を、色ペンでかこって、、

(※注意 !!  背景を塗りつぶす色は、対象には含まれない色にしてくださいね。)

gousei2

背景を全部ぬりつぶします!そして画像全体を選択してコピーします。

gousei3

次に、合成したい背景の画像を開きます。

gousei4

そこにさっきコピーした画像を貼りつけましょう。

貼りつけたら「色2」を塗りつぶした色(ここでは水色)にして、

「選択」の▼から「透明の選択」をクリック!

kansei

できましたー!!

ちょっとガタガタなのはペイントが悪いんじゃなくて私が不器用なだけなのでご安心を!

フォトショがなくても色々できます!お試しあれ~

webフォントとアイコンフォントを使ってみました。

更新などを担当しています、岩井です。

 話題(ちょっとおそい?webフォント・アイコンフォントを使ってみました!

検索してみるとwebフォントもアイコンフォントも無料で提供されているサイトがいくつかありました。 今回はこちらを使ってみようと思います。

 

webフォント http://mplus.font-face.jp/

アイコンフォント http://fontello.com/

 

Continue reading