ねこG日記

PHPの勉強中

Wed, 12 Sep 2012 15:00:05 +0900

WordPressを自分好みにカスタマイズしたい！ってことで
そのための基礎としてPHPの勉強を始めました。

Web for beginner ホームページ作成支援さんの
PHP入門が分かりやすくていい感じの教材になっています。

PHPはJavaScriptと同様に、HTMLに組み込んで使う言語なんですね。

今までBASIC、VB、COBOL、Perl、C、Linux・FreeBSD（言語ではない）、
AutoLISP、JavaScript、他をいろいろかじってきて
インタープリタなスクリプト言語（意味はちゃんと分かってないかもｗ）なら
なんとなく追えるようになったつもりの自分としては、
割ととっつきやすそうな言語だという印象を受けました。
（VBは面倒くさくて途中で挫折、CとAutoLISPとCOBOLは無理･･･）

とりあえず２日かけて初歩的な関数とその使い方、
独自関数の作り方などは一応マスターしました。
あとはサンプルコードさえあれば、
必要に応じて関数リファレンスを見ながらなんとかできそうです。

早速明日からはWordPressに取り掛かります。

写真を簡単に修整する

Tue, 11 Sep 2012 15:00:00 +0900

今日は写真をキレイに修整する方法についてお話したいと思います。

ネットで「肌荒れ　画像」で検索したら川澄奈穂美さんの写真が出てきました＾＾；

この写真をベースに修整をしていきたいと思います。

今回はソフトは使いません。

ホームページの修正サービスを利用していきます。

まずはPicTreat さん。

右上にIDやパスワードを入れるところがありますが、使いません。

というより、ユーザー登録しようとしてもエラーで登録失敗するので使えません。

MySpaceのアカウントでも入れるようなことが書いてありますが、

こちらもPicTreat側の設定ミスで失敗するので入れません。

ではどうやって入るのか？

画面中央に黒い吹き出しがありますね。これをクリックすれば入れますｗｗ

最初に表示されるのがこの写真送信画面です。

参照ボタンをクリックするとあなたのPCのどの写真を送るのか選べます。
選んだらUploadをクリックしてください。

確認窓が出てきます。

赤目（目が赤くなってしまっている）なら上の□にチェックしてください。

それ以外は下の□にチェックされている初期状態で大丈夫です。

OKをクリック。

はい、修正完了です。

右側のSave Your Computerをクリックすれば保存できます。

左が修正後の写真、右が修整前の写真です。

そばかすが多少減って肌の感じが少しきれいになりました。

今回はプロの写真がベースなので劇的な変化はありませんでしたが、

携帯で自分撮りした写真でやるとびっくりするほど変わることもあります。

ぜひ自分の写真で試してみてくださいｗ

次は写真加工.com さんです。

左側のアップロードというところにさっきと同じ要領で写真をアップロードします。

あとは上のメニューでいろんな効果を乗せて行けます。

いくつか試したところ「美肌」を適用したものが一番きれいになりました。

左が修正後の写真、右が修整前の写真です。

これくらい変わると「この化粧品で肌がこんなにキレイになりました！」なんて

広告写真としても使えますねｗｗ

他にもネット上にはこういった自動修正サービスがたくさんあります。

履歴書用の写真とか、従業員紹介ページの写真とかを

手軽にキレイにしたいときは利用してみてください。

オマケ）本記事へリンクしやすくする改造

Mon, 10 Sep 2012 14:31:11 +0900

ホームページへのブログの読み込みは完成したので、

今度はこれを少し改造してみようと思います。

今は↓画像のうち、ブログタイトルをクリックした時だけ元のブログ記事に飛べます。

これをもうちょっとクリックしやすくします。

yomikomi.css を開いてください。

.rss_entry の｛｝の中身に以下の１行を追加します。

display :block;

これでエントリーのボックスがブロック要素になります。

１回分のエントリ全部が１つの要素として扱えるようになります。

＜JavaScriptファイル変更＞

次に yomikomi.js を開いてください。

青字部分が追加や変更箇所になります。

google.load("feeds", "1");

function initialize() {
var feedurl = "ブログのRSSから広告除去したURL";
var feed = new google.feeds.Feed(feedurl);
feed.setNumEntries(5);

feed.load(dispfeed);

function dispfeed(result){

if (!result.error){
var container = document.getElementById("feed");
var htmlstr = "";

for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];

htmlstr +='';
htmlstr +='

';
htmlstr +='
' + entry.title + '
';

htmlstr +='

var imgCheck = entry.content.match(/(src=\"http:)[\S]+((\.jpg)|(\.gif)|(\.png))\"/);

if(imgCheck){
htmlstr += '

';
}

htmlstr +='

';
htmlstr += '

' + entry.contentSnippet.substring(0, 150) + '

var strdate = createDateString(entry.publishedDate);
htmlstr += '

' + strdate + '

';
htmlstr +='

}

container.innerHTML = htmlstr;
}else{
alert(result.error.code + ":" + result.error.message);
}
};
}

function createDateString(publishedDate){
var pdate = new Date(publishedDate);

var pday = pdate.getDate();
var pmonth = pdate.getMonth()+1;
var pyear = pdate.getYear();
if(pyear < 2000){pyear = pyear+1900} ;

var strdate = pyear + "年" + pmonth + "月" + pday + "日";
return strdate;
}

google.setOnLoadCallback(initialize);

これでタイトルから日付まで、空白部分を含めて

エントリのどこをクリックしても該当ブログのページに飛べるようになりました。

JavaScriptソース解説（自分用）

Sun, 09 Sep 2012 15:42:24 +0900

簡単にソースの意味を書いておきます。
数日で慌てて覚えたのであちこち怪しいですｗ

・・・って、Amebaでこういう１行置きにフォント指定する文を書くと

書いてある行の順番が勝手に入れ替わりますね。

のタグがちゃんと閉じてなくてになってたり・・・。

エディタのバグかな？一度きちんと書いた後、保存するとぐちゃぐちゃになります。

で、エディタ上で修正しても保存したらまたぐちゃぐちゃに。

なんだかんだでソースを直すのに苦労しました＞＜

（最終的には、秀丸にコピーしてゼロから自分で記述しました）

<●scriptファイル(yomikomi.js)●>

google.load("feeds", "1");
　Googleでブログ読み込みAPIをロードしなさい

function initialize() {
　initializeという関数を定義する

var feedurl = "ブログのRSSから広告除去したURL";
　変数：feedurlにブログRSSのURLをセット

var feed = new google.feeds.Feed(feedurl);
　変数：feedを新規で作成し、feedurlのデータをセットしなさい

feed.setNumEntries(5);
　書き込み５回分を読み込む

feed.load(dispfeed);
　変数：feedからfispfeedを読み込みなさい？

function dispfeed(result){
　関数：dispfeedを変数：resultで定義する？

if (!result.error){
　もし変数：resultにエラーがなければ（！＝なければ）

var container = document.getElementById("feed");
　変数：containerにfeedの中身をID別にセットしなさい

var htmlstr = "";
　変数：htmlstrを定義する

for (var i = 0; i < result.feed.entries.length; i++) {
　iの初期値を0として、ここから｝までの命令を繰り返すこと
　ここを通過するたびにiを+だけカウントアップしなさい
　iがエントリの最大数以上になったらループを終わって｝の先に進みなさい

var entry = result.feed.entries[i];
　変数：entryに変数：result.feedの[ｉ番目]の中身をセットしなさい

htmlstr +='

';
　変数：htmlstrに

を追加しなさい

htmlstr +='

' + entry.title + '

';
　変数：htmlstrに

entry.title'

を追加しなさい

htmlstr +='

';
　変数：htmlstrに

を追加しなさい

var imgCheck = entry.content.match(/(src="http:)[S]+((.jpg)|(.gif)|(.png))"/);
　変数：imgCheckに「src="」で始まり「.jpg"」「.gif"」「.png"」のどれかで終わる、
　連続した文字列のうち最初に見つけたものをセットしなさい

if(imgCheck){
　もしimgCheckの中身があるなら

htmlstr += '

}
　変数：htmlstrに

を追加しなさい。
　なければなにもしません。

htmlstr +='

';
　変数：htmlstrに

を追加しなさい

htmlstr += '

' + entry.contentSnippet.substring(0, 150) + '

';
　変数：htmlstrに

エントリ概要150文字

を追加しなさい

var strdate = createDateString(entry.publishedDate);
　変数：strdateにentry.publishedDateを関数：createDateStringで加工したデータをセットしなさい

htmlstr += '

' + strdate + '

';
　変数：htmlstrに

strdate

を追加しなさい

htmlstr +='

';
　変数：htmlstrに

を追加しなさい

htmlstr +='

';
　変数：htmlstrに

を追加しなさい

}
　ループ折り返し場所なのでforに戻りなさい

container.innerHTML = htmlstr;
　containner.innerHTMLにhtmlstrの中身をセットしなさい

}else{
　もし変数：resultにエラーがあるなら

alert(result.error.code + ":" + result.error.message);
　エラー表示窓でエラーコード：エラーメッセージを表示しなさい

}

};

}

function createDateString(publishedDate){
　関数：createDateStringにpublishedDateをセットしなさい

var pdate = new Date(publishedDate);
　変数：pdateを作成し、publishedDateの日付をセットしなさい

var pday = pdate.getDate();
　変数：pdayを作成し、pdateから抜き出した日をセットしなさい

var pmonth = pdate.getMonth()+1;
　変数：pmonthを作成し、pdateから抜き出した月に１を足したものをセットしなさい
　（publishedDateの仕様で１年は0月から始まるため）

var pyear = pdate.getYear();
　変数：pyearを作成し、pdateから抜き出した年をセットしなさい

if(pyear < 2000){pyear = pyear+1900} ;
　もしpyearが2000未満なら、pyearに1900を追加しなさい
　2000を超えているならなにもしません

var strdate = pyear + "年" + pmonth + "月" + pday + "日";
　変数：strdateに「pyear年pmonth月pday日」をセットしなさい

return strdate;
　strdateを再構成しなさい

}
　関数：createDateStringを終了します

google.setOnLoadCallback(initialize);
　関数：initializeを読み込んで実行しなさい

またCSSを書き換えてみました。

今回はrss_contentの回り込み設定を外して、画像に回り込むようにしてみました。
画像なしの日は文字が画像の部分に回りこむのでこの方がいいかもしれませんね。

基本形完成

Sun, 09 Sep 2012 15:03:25 +0900

基本ソースが出来上がったので、

ボックスの色分けをやめてノーマルな感じにしてみました。

こういった見た目の設定変更はCSSファイルをいじるだけですぐにできます。

一応完成した↑の設定のソースをまとめておきます。

<●HTMLファイル●>
との間に以下の２行。

との間で、ブログを表示させたいところに以下の１行。

<●scriptファイル(yomikomi.js)●>

google.load("feeds", "1");

function initialize() {
var feedurl = "ブログのRSSから広告除去したURL";
var feed = new google.feeds.Feed(feedurl);
feed.setNumEntries(5);

feed.load(dispfeed);
function dispfeed(result){

if (!result.error){
var container = document.getElementById("feed");
var htmlstr = "";

for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];

htmlstr +='

';
htmlstr +='
' + entry.title + '
';
htmlstr +='

var imgCheck = entry.content.match(/(src=\"http:)[\S]+((\.jpg)|(\.gif)|(\.png))\"/);

if(imgCheck){
htmlstr += '

';
}

htmlstr +='

';
htmlstr += '
' + entry.contentSnippet.substring(0, 150) + '
';
var strdate = createDateString(entry.publishedDate);
htmlstr += '
' + strdate + '

';
htmlstr +='
';
htmlstr +='

}

container.innerHTML = htmlstr;
}else{
alert(result.error.code + ":" + result.error.message);
}
};
}

function createDateString(publishedDate){
var pdate = new Date(publishedDate);

var pday = pdate.getDate();
var pmonth = pdate.getMonth()+1;
var pyear = pdate.getYear();
if(pyear < 2000){pyear = pyear+1900} ;

var strdate = pyear + "年" + pmonth + "月" + pday + "日";
return strdate;
}

google.setOnLoadCallback(initialize);

<●CSSファイル（yomikomi.css）●>

.feed{
border :1px solid #000;
}

.rss_entry{
width :450px;
margin :10px;
}

.rss_title{
width :99%;
background-color :#33f;
padding :2px 0 0 2px;
margin :0 0 5px 0;
}

.rss_title a{
color :#ff0;
font-size :14px;
}

.rss_main{
width :100%;
}

.rss_img{
margin :4px 0 0 0;
float :left;
display :table-cell;
vertical-align :middle;
overflow :visible;
}

.rss_content{
width :310px;
margin :0 0 0 10px;
float :right;
}

JavaScriptの各ソースの働きを次のエントリで残しておきます（自分用）

CSSで整形する（JavaScriptに組み込み）

Sat, 08 Sep 2012 14:04:12 +0900

昨日の続きです。

現在完成しているソースに昨日のHTMLを組み込んでいきます。

まずはHTMLで書かれている部分を抽出してみましょう。

htmlstrで始まる行がHTMLソースをあらわしています。

for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];

htmlstr += '

' + entry.title + '

var imgCheck = entry.content.match(/(src=\"http:)[\S]+((\.jpg)|(\.gif)|(\.png))\"/);

if(imgCheck){
htmlstr += '';
}

htmlstr += '

' + entry.contentSnippet.substring(0, 150) + '

';
var strdate = createDateString(entry.publishedDate);
htmlstr +='' + strdate + '
';

}

意外にHTML部分は少ないのが判ります。
抜き出してみましょう。

entry.titleの中身

entry.contentSnippet.substring(0,150)

strdate

ここに昨日のソースを追加します。

entry.titleの中身

entry.contentSnippet.substring(0,150)

strdate

CSSでホームページを作っておられる方なら難しくはないですね^^

これを元のソースに戻します。

google.load("feeds", "1");

function initialize() {
var feedurl = "ブログのRSSから広告除去したURL";
var feed = new google.feeds.Feed(feedurl);
feed.setNumEntries(5);

feed.load(function (result){

if (!result.error){
var container = document.getElementById("feed");
var htmlstr = "";

for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];

htmlstr +='

htmlstr +='

' + entry.title + '

htmlstr +='

var imgCheck = entry.content.match(/(src=\"http:)[\S]+((\.jpg)|(\.gif)|(\.png))\"/);

if(imgCheck){
htmlstr += '

';
}

htmlstr +='

htmlstr += '

' + entry.contentSnippet.substring(0, 150) + '

';
var strdate = createDateString(entry.publishedDate);
htmlstr += '

' + strdate + '

htmlstr +='

}

container.innerHTML = htmlstr;
}else{
alert(result.error.code + ":" + result.error.message);
}
});
}

function createDateString(publishedDate){
var pdate = new Date(publishedDate);

var pday = pdate.getDate();
var pmonth = pdate.getMonth()+1;
var pyear = pdate.getYear();
if(pyear < 2000){pyear = pyear+1900} ;

var strdate = pyear + "年" + pmonth + "月" + pday + "日";
return strdate;
}

google.setOnLoadCallback(initialize);

画像があってもなくても同じように表示されるようになりました。

CSSで整形する（準備段階）

Fri, 07 Sep 2012 14:43:08 +0900

ここまでで一通り形になってきたので、CSSを取り込んでみようと思います。

設定状態が目で確認しやすいように

各エントリを下記画像のように色分けしながらレイアウトしていくことにします。

黄色部分に記事タイトル(rss_title)、下の２つを入れるボックス(rss_main)を作り、

水色部分に画像(rss_img)、白色部分(rss_content)に本文抜粋と日付が入ります。

記事１つごとに黒いボックス(rss_entry)として表示されるイメージです。

まずはJavaScriptなしでソースだけ作っていきます。

とりあえず、まだどこにも入れません。

←黒い箱を作る

←黄色い箱

←水色と白色の箱の入れ物を作る

←水色の箱

←白色の箱

←回り込み解除

←水色と白色の箱の入れ物を閉じる

←黒い箱を閉じる

yomikomi.css というテキストファイルを作成します。

.feed{
width :470px;
border :1px solid #000;
}

.rss_entry{
width :450px;
background-color :#000;
margin :10px;
padding :5px;
}

.rss_title{
width :100%;
background-color :#0ff;
}

.rss_main{
width :100%;
background-color :#f00;
margin :5px 0 0 0;
}

.rss_img{
width :130px;
height :130px;
background-color :#55f;
float :left;
overflow :visible;
}

.rss_content{
width :300px;
background-color :#fff;
margin :0 0 0 10px;
float :right;
}

これを保存してHTMLファイルと同じフォルダに入れます。

CSSには最低限要りそうなものを入れてみました。
足りないものは作りながら追加していきましょう。

これでブログ表示にCSSを組み込む準備ができました。

記事内の画像を読み込む

Thu, 06 Sep 2012 14:51:18 +0900

ブログの表示がだんだんそれらしくなってきました。

今日はここにブログ内の画像をサムネイルで表示してみたいと思います。

今回はshiromaru しろまるさんの

Google AJAX Feed APIでブログの概要と画像を表示

を参考にさせていただいています。

ここでは他にブログ概略で表示する文字数を変更する方法も紹介されてますね^^

ずっと見てると日毎にコードが増えていますｗ

yomikomi.js を開きます。

htmlstr += '

' + entry.title + '

';
という部分の後ろに以下のソースを追加します。

var imgCheck = entry.content.match(/(src=\"http:)[\S]+((\.jpg)|(\.gif)|(\.png))\"/);
if(imgCheck){
htmlstr += '';
}

今回は画像の幅を120pxに指定しています。サイズはお好みで調整してください。

また探す画像の種類がオリジナルではJPEGのみになっていたのを

JPEG、GIF、PNGのどれかを探すように書き換えてあります。

上書き保存したらサーバーにアップしてみましょう。

これで画像が表示されるようになりました。

ちなみにeしずおかブログのRSS2.0のデータには画像が入っていないようです。

RSS1.0のデータ（index.rdf）を指定してやると画像が出ます。

Amebaブログの方は最初は画像が出てたんですが、なぜかしばらく経つと消えました。

画像サイズは取得できるようなので、入っているのは確かなようなのですが・・・困ったもんです。

現在の　yomikomi.js のソースはこのようになります。

google.load("feeds", "1");

function initialize() {
var feedurl = "ブログのRSSから広告除去したURL";
var feed = new google.feeds.Feed(feedurl);
feed.setNumEntries(5);

feed.load(function (result){

if (!result.error){
var container = document.getElementById("feed");
var htmlstr = "";

for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];

htmlstr += '

' + entry.title + '

var imgCheck = entry.content.match(/(src=\"http:)[\S]+((\.jpg)|(\.gif)|(\.png))\"/);

if(imgCheck){
htmlstr += '';
}

htmlstr += '

' + entry.contentSnippet.substring(0, 150) + '

';
var strdate = createDateString(entry.publishedDate);
htmlstr += '

' + strdate + '

}

container.innerHTML = htmlstr;
}else{
alert(result.error.code + ":" + result.error.message);
}
});
}

function createDateString(publishedDate){
var pdate = new Date(publishedDate);

var pday = pdate.getDate();
var pmonth = pdate.getMonth()+1;
var pyear = pdate.getYear();
if(pyear < 2000){pyear = pyear+1900} ;

var strdate = pyear + "年" + pmonth + "月" + pday + "日";
return strdate;
}

google.setOnLoadCallback(initialize);

西暦112年？！

Wed, 05 Sep 2012 14:42:13 +0900

昨日の日付の書式設定をした方の中には

表示日付がおかしくなってしまった方がいるはずです。

実は昨日のソースをInternetExplorerで見ると2012年なのですが、

それ以外のブラウザで表示すると112年と表示されてしまいます。

これはブラウザによって日付データの扱いが違うために起こるバグのようなものです。

ブラウザ作成のルールとしては112年と表示されるのが正しいのですが、

InternetExplorerだけが独自ルールでブラウザを作ったために起こっています。

これを直すために年に1900を足すようにすると、

今度はInternetExplorerで見たときに3912年になってしまいます。

それも困りますね。

ということで、年の数値が2000より少ない時にだけ1900追加する設定にしてしまいましょう。

今回は IT勉強するコタツネコさんのサイトを参考にさせていただきました。

リンク先では、年の修正以外にも曜日を漢字で出す方法も解説されてます。

方法は簡単。

yomikomi.js を開いて、年月日の設定をしている前の部分に

if(pyear < 2000){pyear = pyear+1900} ;
を書き足すだけです。

これでどのブラウザで見ても2012年の表示になりました。

現在の　yomikomi.js のソースはこのようになります。

google.load("feeds", "1");

function initialize() {
var feedurl = "ブログのRSSから広告除去したURL ";
var feed = new google.feeds.Feed(feedurl);
feed.load(function (result){
if (!result.error){
var container = document.getElementById("feed");
var htmlstr = "";
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];

htmlstr += '

' + entry.title + '

';
htmlstr += '

' + entry.contentSnippet + '

var strdate = createDateString(entry.publishedDate);

function createDateString(publishedDate){
var pdate = new Date(publishedDate);

var pday = pdate.getDate();
var pmonth = pdate.getMonth()+1;
var pyear = pdate.getYear();
if(pyear < 2000){pyear = pyear+1900} ;

var strdate = pyear + "年" + pmonth + "月" + pday + "日";
return strdate;
}

if(strdate){
htmlstr += '

' + strdate + '

';
}else{
htmlstr += '

' + entry.publishedDate + '

';
}
}

container.innerHTML = htmlstr;
}else{
alert(result.error.code + ":" + result.error.message);
}
});
}

google.setOnLoadCallback(initialize);

日付の表示書式を変える

Tue, 04 Sep 2012 15:05:52 +0900

さて、今日は日付の表示方法を変更したいと思います。

今の初期状態では　Wed,29 Aug 2012 23:35:40 -0700 のような書式で

日時が表示されています。

確かに間違いではないのですが、日本語ではないので見づらいですし

素のブログと違って投稿時刻や標準時との時差表示は必要なさそうです。

これをシンプルに見やすくしてしまいましょう。

今回はれんこんと大根さんの

Google AJAX Feed API を使ってブログの抜粋と画像を読み込んでみた
の一番下の部分を参考にさせていただいています。

yomikomi.js を開きます。

htmlstr += '

日付 :' + entry.publishedDate + '

';　という行を探してください。

　　　　　　　　　　　↓

//htmlstr += '

日付 :' + entry.publishedDate + '

先頭に//を付けてコメントアウト（読み飛ばし）します。

その後ろに以下のソースを追加してください。

var strdate = createDateString(entry.publishedDate);

function createDateString(publishedDate){
var pdate = new Date(publishedDate);

var pday = pdate.getDate();
var pmonth = pdate.getMonth()+1;
var pyear = pdate.getYear();
var strdate = pyear + "年" + pmonth + "月" + pday + "日";
return strdate;
}

if(strdate){
htmlstr += '

' + strdate + '

';
}else{
htmlstr += '

' + entry.publishedDate + '

';
}

上書き保存したらサーバーにアップしてみましょう。

2012年8月30日のような表示に変わっているはずです^^

現在の　yomikomi.js のソースはこのようになります。

google.load("feeds", "1");

htmlstr += '

' + entry.title + '

';
htmlstr += '

' + entry.contentSnippet + '

';
//htmlstr += '

日付 :' + entry.publishedDate + '

var strdate = createDateString(entry.publishedDate);

function createDateString(publishedDate){
var pdate = new Date(publishedDate);

var pday = pdate.getDate();
var pmonth = pdate.getMonth()+1;
var pyear = pdate.getYear();

var strdate = pyear + "年" + pmonth + "月" + pday + "日";
return strdate;
}

htmlstr += '

' + strdate + '

}

container.innerHTML = htmlstr;
}else{
alert(result.error.code + ":" + result.error.message);
}
});
}

google.setOnLoadCallback(initialize);