menu


2017年6月21日水曜日

☕コーヒーブレイク 新しいアプリ作成に挑戦!

新しいアプリ作成に挑戦!
現在サイトの更新が忙しく、時間があまりありません。
しかし、新しくアプリの作成に挑戦してみたいと思っています。
作成環境は、アンドロイド携帯!
作成対象アプリは、アンドロイド用アプリ!
中断していたアンドロイドアプリの作成です。
少し前に友人からサイトのPINGについて相談されました。
ブログをしている友人からPING送信の相談をされ、私のサイトを紹介しました。
携帯に環境を作れば、携帯で送信できるんだよな!なんて思いながら!
…でも?
素人には、それは敷居がたかいのかな?
もし、携帯アプリでPING送信できたら、需要があるかな?って事で、アンドロイドアプリの作成に挑戦します。
自分で言うのも何ですが、アンドロイドアプリの作成の基本知識は、勉強しました。
携帯での作成ではありませんが、アプリで電卓を作った事があります。
今回は、携帯上で作成します。
課金すれば、便利機能がたくさんあるらしいですが、私は無料での作成を進める予定です。
ただし、最終的なアプリの登録にはお金がかかります。(T T)/
しかし、アフェリエイトと同じく、アプリ開発を考えていたので、良い機会と考えて、まずは作成を開始します。
代1回目としては、大変簡単なアプリ作成です。(PING送信アプリ)
作成内容は、以下を考えています。
1.送信情報登録
・送信サイト登録画面
・送信サイト登録処理
・送信先登録画面
・送信先登録処理
2.送信情報修正
・送信サイト修正画面
・送信サイト修正処理
・送信先修正画面
・送信先修正処理
3.送信処理
・送信対象サイト選択
・送信処理

作成に必要な知識は、画面作成・ボタン・TEXT入力・チェックボックスくらいかな?
あと、アプリ環境のネット接続設定なんかも必要ですね?
確か電卓作成の時にネットからレートを取得してドル変換するときに必要だった!
今回もネットに送信するので必要でしょう?
これを覚えると、オリジナル自分専用とんでもツールが作れそうです。

今考えているのは、rssファイル自動作成アプリとか?
サイトのURLを入力すると設定してRSSファイルが自動で生成できるアプリなんて良くないですか?

他には、ホームページ作成アプリ!

私個人用として、DMM広告情報自動取得。登録アプリですね!

アンドロイドには、ブラウザ機能があるから、アプリでサイトを見ながらこれ!って設定すればどんどん保存できる!

などなど、まずは基本から頑張りましょう!

一緒に勉強したい人は、アプリをアンドロイド携帯かアンドロイドPADに入れてまっていてね!
使うアプリはAIDE前に紹介したので、そちらを見てください。
ネットでAIDEでのアプリ作成を検索して見ましたが、役立つ記事は、あまり発見できませんでした。
結局のところ、ある程度アンドロイドアプリの作成が解る人が、ネットのPC用の作成記事を見て、AIDE用にして作成する必要があります。
現在PC用のアンドロイド開発環境も数種類存在するので、調査応用が大変ですが、頑張ります。
準備ができたら記事投稿を開始します。
先ほど改めて携帯にアプリをインストールしました!
では、次回から携帯アプリ作成に入ります。

外部サーバーの画像をPHP経由で表示する

外部サーバー(PHPサーバー)にある画像をPHP経由で表示する方法
以下のソースのファイルを外部の画像のあるPHPサーバーに置く!
<img src="http://URL/img.php&fname=画像ファイル名">
で画像が表示されます。

<?php
if(isset($_REQUEST['fname'])){
$finfo = new finfo(FILEINFO_MIME_TYPE);
$mimi_type = $finfo->file($_REQUEST['fname']);
header('Content-Type:'.$mimi_type);
reader($_REQUEST['fname']);
}
?>


この使い道は、他のブログやサイトから自分のサイトの画像を描画したい時などの使います。この方法だと、サイトにアクセス規制があっても描画が可能になります。
独自のフォルダ構成で画像のあるフォルダを隠したい時などにも有効です。(PHP内でフォルダを記載すれば、読み元にはファイル名しかわからない)
また、このimgタグでPHPが実行できるって事は、大変重要な意味があります。
通常は、HTMLから同一サーバー内のPHPは実行できます、しかし、外部サーバーのPHPは、実行できません。しかし、imgタグを使うと外部サーバーのPHPが実行できるんです。
予想ですが、FC2のアクセス解析などがこれを利用してそうです。
起動時に小さい画像が表示されます!
試していませんが、スタイルで非表示にして実行するとか、透明のPNGファイルを表示するとかすると、サイト画面には何も出力されずに実行できそうです。
サイトのアクセス解析など使い方しだいで面白い使い方ができそうです。

2017年6月13日火曜日

☕ブレイク ブログについて!

一般ブログ使ってますか?
私は、複数使っています。
ここみたいに記事を書いて使う物とサイトを紹介する為の広告ブログを使っています。
広告ブログは、サイトの記事をブログ用に、過去して投稿しています。
ブログ複数にいちいち記事を書いていられません。
ブログには、それぞれ特長があり、やり方しだいで、ボタンクリックだけで、投稿できます。
現在確認しているブログでは、有効なブログは2つ!
FC2ブログとライブドアブログです。
このブログは、メール投稿で記事の投稿が可能です。
ただし、html に癖があるので、何回もテストして、有効なhtml を書かないといけません!
私の場合は、サイトに記事作成機能を付けて記事を自動作成し、メール投稿するか、記事をコピペします。
コピペも、ブログに合わせたhtml をコピペしないと、ブログで表示できません!
私が現在ターゲットにしているブログは、以下です。
アメーバブログ
ライブドアブログ
FC2ブログ
楽天ブログ
シーザーブログ
どれも、html が使えます。
ただし、各ブログには、特長があり、ブログに合わせたhtml を作る必要があり、ブログには、表示可能な文字数制限があります。
ここみたいに、ほとんど無制限で大概のhtml に対応しているブログは、珍しいんです。
良くあるのが、javascriptは使えない!
ホーム系タグ(ボタンやインプット)は使えないなどです!
その特長を踏まえてブログ用html を作成します。
スタイルシートは、使えないブログが多いので、なるべく使わない作りにします。
インラインスタイルは、可能ですので、問題は、それに伴う文字数です。
ブログは、文字数制限があるので、制限を気にして作成します。
インラインスタイルを使うと、記事の文字数が肥大しますので、気を付けて作成します。
html も、ブログにより、html 中の改行も、そのまま改行として表示されるブログがあります。
ブログ用html は、改行無しで作成する方が、ブログを複数対応しやすいです。
ブログ投稿で私が気を付けているのは、ボタンと画像です。
スタイルシートが使えるブログなら、a タグをスタイルシートでボタン化して表示しますが、不可能なら、インラインでボタンみたい見せて使用します。
画像ですが、自分のサイトの画像を使用して、表示します。
これも、直接表示(img タグ)しても、表示できませんでした!
サーバーの設定による制限だと思いますが、img タグによる直接リンクはできませんでした!
記事投稿のたびに画像登録なんてしてられますん!
そこで、php を使いました。
私のサイトは、php なので、画像データを返すphp をサイトに置き、img タグでサイトのphp をリンクすると、サイトの画像がブログで表示できるんです!
簡単ですので、今度公開します。

2017年5月10日水曜日

☕コーヒーブレイク新サイト公開

まだできかけですが、公開してみました。
検索機能がまだ未作成ですが、基本と数件のサンプルは、見られるかな?
ここまで公開した作成ノウハウは、このサイトの作成途上に作成したものです。
各ページは、今度書く予定の自動作成によるページ作成で、自動作成しています。
基本データを登録ページで作成して、自動作成プログラムを実行すると、自動で、html のページとして作成されます。
まだできかけで、データも数件ですし、表示情報も、全てでは、ありません。
各コミック情報や文庫情報も、表示予定ですが、ASP 登録後できないと表示できませんので、サイト登録中です。
表示するのにID が、必要ですし、表示してると、サイト登録できないので、今は、表示してません。
これから表示処理を作成します。
何回目の作成だっけ?
今回は、メインなので、少し大きめ?
アニメの時は、3個表示だった!
今回は、1個かな?
表示処理も、公開しますね!

RSSファイルを作成する

rssファイルは、サイト情報(どんなサイトなのか)とサイト更新(更新内容)を記載して、サイト内容をネットに公開するためのファイルです。
直接サイトを閲覧しなくても、rssファイルを閲覧するだけでサイト内容や更新内容を閲覧できるファイルと言えます。
ランキングサイトなどに登録すると、更新情報としてping等で送信したりします。
ファイル形式は、xmlでrssの記載ルールに基づく記載方法で記載された物を示します。
記載形式として、RSS1.0とRSS2.0がありますが、細かい違い等を詳しく知りたい方は、ネットでお調べください。
今回は、簡単に作っていきます。
書き方としては、HTMLもXMLも同じと考えます。
順番として以下になります。
①RSS記載内容定義
②サイト情報記載
③新着サイトページ情報記載
④新着サイトページ情報記載
    :
⑤終了記載
詳細
①RSS記載内容定義
以下を記載します。おまじないと思って書いてます。
意味としては、xml1.0形式で文字コードにUTF-8を使い、RSS2.0で記載するって感じの内容となります。

<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:sy="http://purl.org/rss/1.0/modules/syndication/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xml:lang="ja">

②サイト情報記載
以下は、私の今作成中サイトの記載です。

<channel>
<title>コミックフロンティア</title>
<link>http://comicfrt.webcrow.jp/</link>
<description>コミックまとめサイト</description>;
<language>ja</language>
<copyright>Copyright (c) 2017, [まりね]</copyright>
<lastBuildDate>Sun, 07 May 2017 16:49:01 +0300</lastBuildDate>

・開始の記載<channel>
・サイトのタイトル<title>コミックフロンティア</title>
・サイトURL<link>http://comicfrt.webcrow.jp/</link>
・サイト内容<description>コミックまとめサイト</description>;
・日本語表記設定<language>ja</language>
・サイトの権利者記載<copyright>Copyright (c) 2017, [まりね]</copyright>
・RSSの最終更新日時<lastBuildDate>Sun, 07 May 2017 16:49:01 +0300</lastBuildDate>

③新着サイトページ情報記載
以下内容を記載します。
<item>
<title>ページ(記事)タイトル</title>
<link>ページURL</link>
<description><![CDATA[概要を記載]]></description>
<pubDate>Sun, 07 May 2017 12:26:30 +0300</pubDate>
<content:encoded><![CDATA[詳細内容記載]]></content:encoded>
</item>

④③を必要ページ数(記事数)記載します。
(私の場合概要も詳細も同じ内容を記載してます。)

⑤終了記載
</channel>
</rss>

どうですか?
本当は、もっと細かい記載や画像なども記載できるのですが、そこまで凝って作成する必要を感じなかったので、最低限の記載で作成してみました。
ニュースサイト等なら画像等も有効かもしれません。
情報の展開と考えて、最低限でまとめたら、こんなレベルになりました。
私のサイトでは、この出力パターンをphpで自動出力し、rss20.xmlとしてファイルに自動出力します。
以下は、そのソースです。私のサイト専用ですので、そのまま使用する事は、できませんが、現在日時取得と日時文字列変換やファイル日時取得など、参考になる処理もあるかもしれません。参考まで!

これで、pingと合わせてブログランキング更新情報送信が、可能になります。

2017年5月8日月曜日

☕コーヒーブレイク登録サイト修正

ここ何日か、登録サイトの修正してました。
著者とコミックだけの予定が、保存パラメーターの追加やらなんやらしてたら、文庫まで登録するようになってしまいました。
アニメとの併用サイトなので、原作を見ると、コミックだけではなく文庫が多いんです。
コミックも、原作が文庫だったりするのもありますしね!
あ!原作の入力パラメーターを追加しなくっちゃ!
て感じです。
なかなかデータ作成が進みません!
まだ数件しか入れられてません!
パラメーターが増えるたびにデータを直接修正する作業が必要なので、大量に入力すると、作業が大変なので、入力を控えながら進めてます。
本日は、rss ファイルを作りました。
まだ仮になのですが、現在作成されたデータファイルを検索して、必要な情報を抽出し、ファイル日付と時間を取得し、rss ファイルとして、ファイル出力します。もちろん自動です。
更新のたびに手作りしてられませんかりね!
rss ファイルは、サイト作成には、絶対に必要です。
ネット検索されることや、ランキング登録した際のping送信などの必要ファイルです。
ネットに自動作成サイトとかもありますが、サイトの形式とかにより、全然役にたたないとかありますので、自分で作るのが、一番安心です。
簡単ですしね!
基本的な記載方法は、html とそんなにかわりません。
形式名としては、xml ですが、html と同じ感じで作成できます。
基本的な記載とサイト説明部分と更新ページ記載を書くだけ!
私のようにデータをベースにサイトを作成していれば、自動精製も可能です。
次回は、rss ファイル作成を書きましょう!
私の場合は、rss 作成時に、一覧ファイルを作成してます。
これを利用して、起動トップ画面の更新リストを表示します。
データの追加日付が、ページ更新日付となり表示されます。
現在トップ画面作成中!
では、次回は、rss ファイル作成で!

2017年5月4日木曜日

html(javascript) からphp関数を使う!(php スクリプト作成)

言語には、それぞれ利点があります。サイト表示中には、javascript しか使えません。
ファイルに出力させたり、ファイル検索やフォルダー検索させたかったり、php しかできない処理をさせたい!って思った事ありませんか?
私もあります。
実は、簡単にできます。
たとえphpで作ったサイトであっても、表示後は、html です。内部のphp 関数を呼ぶ事も実行する事も、できません!
そこで、外部にphp 関数ファイルを作成して、外部で実行します。
1ファイルに1処理しか作れませんが、結構使えます。
こんなphpのファイルを作りました。
<?php
$dir=$_REQUEST['path' ];
$files = scandir($dir);
foreach($files as $file){
print $file."\n";
}
?>
これを実行すると、指定フォルダーのファイルとフォルダー名が、全て表示されます。
以下で直接実行できます。

http://サイトの場所/作成ファイル名.php?dir=フォルダー名/ 

これを、javascript で実行します。実行の仕方は、ファイル読み込み処理と同じです。
var data = new XMLHttpRequest();
data.open("GET","作成ファイル名.php?dir=フォルダー名/", false);
data.send(null);
で実行できます。
画面に表示されてた内容は、以下で取得できます。
data.responseText
私の作ったjavascript のcsv読み込み処理のファイル名に同じ指定をすると、結果が配列に入れられて返ってきます。
前にも書いた事がありますが、php は、外部から読み込み処理を実行すると、実行した結果を返します。
この使い方を覚えると、html から使えるphp スクリプトが作成できます。

2017年5月3日水曜日

サイトをデザインする

デザインするなんて書きましたが、私には、デザインのセンスは、ありません。
しなし、ありきたりのサイトから、ちょっとアップさせるくらいは、できます。
簡単な方法として、画像を付けるとかですね。
でも、サイトに合う画像と合う大きさ(拡大縮小は、可能)が、なかなかありません。なるべく著作権フリーの画像を使いましょう!
後は、グラデーションですね!
サイトの背景にグラデーションを付ける方法などがあります。
これは、とても難しいのですが、簡単にできます。
あるサイト(私のこのサイトのその他ツールにリンクがあります)で、簡単な操作で、スタイルシートデータを出してくれるので、スタイルシートにいれて、付けたい所に定義するだけ!
実際のイメージも見れるから、大変便利です。
後は、ボタンイメージです。
画像を使いボタンイメージを変更する方法と、グラデーションボタンを使え方法があります。
これも、グラデーションボタン作成サイトがあるので、その他ツールからご覧ください。
これの便利な所は、input のボタンでも、<a> でもボタンで表示されるので、大変便利です。
それらを使った私のサイトは、こんな感じです。
タイトル背景にグラデーションを使いボタンもグラデーションボタンにしてみまさた。
少しイメージが変わります。
コミックサイトですので、これ以上は、コミックのイメージがあるので、サイトは、凝らない方向で行きます。
参考になりましたか?

2017年5月2日火曜日

ping送信プログラム公開(携帯送信可能)

何回か、公開しましたが、現在の私の最新pingプログラムです。
これまでは、毎回サイトに合わせてプログラムを修正してサイト専用にメンテナンスが必要でした。
今回は、アニメフロンティア別館用に作成した際に、もう少し楽にしたいと思い、少し修正しました。
基本は、一緒です。
送信サイト名とサイトRSS URL と送信先URLを別ファイルにしました。
ping.csvをping送信プログラムの場所に入れて送信するだけ!
ping.csvは、以下の内容で作成します。
サイト名
サイトRSS URL
送信先URL
送信先URL
送信先URL
  :
転送先は、何件でも書いただけ送信します。
pingは、サイトから送信する必要が無いので、今まで送信できなくて、外部サイトを登録して送信してた方でも、携帯にphp 環境を入れれば携帯からでも送信できます。
私も、最初は、携帯から送信してました。
今は、サイトの更新をサイトでやるので、その際に一緒にやってます。
以下ソース

私が、サイトを始めたころは、サイトのpingが送信できなくて、毎回ランキングでping操作してました。外部のpingサイトも無料だと、送信件数がすくなかったり!
はっきり言ってぼったくりです!
そこで、勉強して、自分で送信できるサイトもつくりました!
そこは、無料で制限なし!
でも、基本は、このソースです!
あのサイトは、私のphp とDBの勉強用のサイトです。メールの送信も勉強しました。
メールは、ブログ投稿に使えます。
いろいろ勉強すれば、いろいろ役にたちます。
では、また!(^_^)ノ





2017年5月1日月曜日

サイトを簡単に作る

私の作り方は、特殊かもしれません。
index.html が形になりました。
これを切り分けて分解します。
切り分け方は、固定部分と可変部分です。
毎回同じになる部分と毎回変わる部分に分けるのは、分けたパーツを組み合わせて、他のページを作る為です。
ページ数の多いサイトは、一カ所修正したのを何ページも修正するのは大変です。
私のアニメサイトは、1700ページ以上あります。
共通部分の修正を全てに加えるのを手作業でやるなんて考えられません。
そこで、サイトのページをプログラムで全て自動更新するシステムを用意します。
私の場合は、データ管理をし、閲覧できるサイトなので、今回は、コミックサイトを予定してますので、トップ画面は、新規追加したコミック情報一覧にし、各ページは、著者毎のページとコミック毎のページを考えています。
予定ページ数は、2000ページ以上と考えています。
アニメですら、3000タイトル以上あり、私は、まだ1700を超えた状態です。
そんなページをいちいち作れません!
そこで、自分用のデータ管理ページを作り、データを作成して、コミックサイトを自動(半分手動)で更新します。
現在の私のアニメサイトは、アニメフロンティアは、データ作成機能付きの管理サイトで、アニメフロンティア別館がデータを利用した自動作成サイトです。
管理サイトは、全てphp で作成されていて、サイトのページとしては、1ページしかありません。最新情報の更新は、早いですが、表示が遅いのが欠点です。
html で作られたページは、表示が早いのが利点ですが、ページ作成が、普通は大変です。
そこで、私は、html ページを自動作成を考えました。
基本は、手作りなのですが、複製加工は自動化します。
私と同じようにするには、サイトをデータ化する必要があります。
サンプルとしてコミック管理サイトを紹介しました。
なんでcsvファイルで保存するかわかりますか?
データ管理するなら、DB(データベース) でもできます。しかし、DB で作ったデータは、html サイトで使うには、データを抽出したりする加工を必要とします。csvなら簡単な修正ならテキストエディタで直ぐ直せます。
いちいちsql のプログラム組んだり大変ですしね!
携帯にも保存して置けるし、便利です。
しばらくサイト作成の為のデータ作成をします。
その間に別のノウハウをポロポロと紹介します。

サイトを簡単に作る⑤イメージを実現する。

これまでに基本の構成とサイトアイコン等を用意しました。
あとは、イメージを実現するだけです。
メニューや広告!メイン画面などです。
私は、こんなのを作ってみました!
基本的にはアニメフロンティアと一緒です。
枠線のイメージ等を変えて、中身は、応用してます。
最初にあった枠線は、無しに設定しました。
各項目の青色の角丸枠は、スタイルシートに記載して、使い回しています。
個々に違ったスタイルは、タグにstyle="" で指定します。
共通で使うスタイルは、スタイルシートに記載します。
.スタイル名{
スタイル;
}
タグには、class="スタイル名"でつかえます。
ここまでのソースは、以下になります。

スタイルシートは、以下を追加しました。
        .div_waku {
        border: solid 1px #0000f0;
        border-radius: 10px;
        padding: 5px;
        margin: 0 0 3px 0;
        }
青色の枠を出すスタイルです。
後は、コミックデータがある程度揃ったら作成できます。
後は、個々のページを、同じように作成する事で、複数ページにして、サイトとして完成させるのが、普通のやり方です。
しかし、私は、そんな事しません。
普通なら、コピーして中身を修正して作成を繰り返してやるのかな?
次は、手抜きな作成方法を教えます。

2017年4月30日日曜日

サイトを簡単に作る④ファビコンとサイトアイコンを作る

これは、サイトをブラウザーで見た時にサイト名の横に表示されたり、リンクを保存した時に表示される画像です。
作るのは、簡単!
ネットでイメージ画像を探して正方形にカットします。
そして、ネットでファビコンで検索すれば、作成してくれるサイトがみつかります。
私が、さっき使ってみたのは、以下のサイトです。
https://ao-system.net/favicongenerator/
こんなのを作ってみました!
複数のサイズのpng 画像を作成してくれて、その中にfavicon.icoが入っています。
サイトのリンク時の画像に適当なpng ファイルを利用し、ブラウザーに表示されるアイコンにfavicon.icoを使います。
png ファイルは、サイトに指定します。
私のindex.html の以下の記載かそうです。

<link rel="apple-touch-icon" href="http://comicfrt.webcrow.jp/img/comicfrt.png" />

このまま使うと、私のサイトの画像が表示されます。
favicon.icoは、名前も変えずにそのままindex.html のある場所に入れて下さい。
それだけで、サイトアイコンとして表示されます。

サイトを簡単につくるには!③トップ画面を作る

「サイトを簡単に作るには」で、画面構成は、決まったと思います。
トップ画面を作りましょう!
①のイメージで、私の作った画面です。

サブメニューもメインも何も無いのでヘッダーとフッターが目立っています。表の枠も今は、ライン表示していますが、最終的には、消すつもりです。ベースイメージは、アニメフロンティア別館です。
ソースも、公開します。

簡単な物です。
ついでに、今回使っているスタイルシートとjavascript も公開します。
スタイルシートは、基本の設定しかしてません。
javascript は、まだ使っていませんが、私のcsv ファイルの読み込み処理と、引数取得処理を入れてあります。
今後どこかで使うでしょう!
スタイルシート(page_styles.css)



javascript ファイル(script.js)

一応現在の物は、以下でみられます。
コミックフロンティア
最終的なサイト公開予定場所です。




サイトを簡単につくるには!②フォルダー構成を決める

サイトの画面構成は、決まりましたか?
私は、結局①でいこうかと思います。
では、作りはじめる前にフォルダー構成を決めてしまいます。
私のは、よくあるパターンですませます。
img(サイト固有の画像保存するフォルダー)
rss(rssファイル[サイト情報ファイル] )
css(スタイルシートファイルフォルダー)
js(javascriptフォルダー)
こんな感じでフォルダー構成を決めます。
後は、サイトを作りながら、data とかcsv とか、用途に合わせて作ります。
次は、サイトの中心となるindex.htmlを作ります。
これは、サイトに訪れた方が、最初に見るページで、トップ画面となります。
実は、私も新規サイトの立ち上げ中なので、これから作る予定です。
まだサイトタイトルしか決めていません。
作りながら、アップします!

サイトを簡単につくるには!

サイトを簡単に作るにはどうしたら良いでしょうか?
それは、レイアウトを決めて作るのが、一番簡単です。
まずは、どんなレイアウトで、画面を配置するかです。
基本パターンは、以下の4パターンですかね!

ヘッダー


サイド
メニュー



サイトメイン


フッター


ヘッダー


サイド
メニュー



サイトメイン




サイド
メニュー
フッター


ヘッダー
メニュー


サイド
メニュー



サイトメイン


フッター


ヘッダー
メニュー


サイド
メニュー



サイトメイン




サイド
メニュー
フッター
私がよく使う のが①です。
どのように作るかわかりますか?
普通にhtml の本とか読むと大変難しいです。
そこで、画面を表に見立てて大きな表を作ります。後は各表の枠の中に書きたい事や付けたい物を並べるだけです。
私の場合は、ヘッダーとフッターは<div></div> で作ります。
表は、枠線を付けるか付けないかでイメージを変えられますし、基本は、枠線無しでサイドメニューの中に<div></div>を入れて枠線を付けるか、枠線ありの表を入れてしまう方法をとります。
サイトメインの中も、画面によって表で区切って表現したりします。
サイトメインの横に縦長の広告がでてる時などが、そうです。
この画面は、メインが広すぎるなって画面の時などに使います。
私のサイトは、情報が多いので、普通に表現すると、画面がすごくスクロールしてしまいます。それだと、せっかくの広告が流れてしまいます。そこで、メインの中にスクロールエリアを作成して全体のスクロールエリアを制限します。
私のアニメサイトのストーリーの枠と同じ方法で、<div></div> で縦のサイズを設定して、オートスクロール指定すれば、実現できます。縦の表示量が指定サイズ以上になるとスクロールします。
例)
<div style='height: 110px;border:1px solid #555;overflow: auto;' align='left'>
ここに書く内容がスクロールします
</div>
説明
height: 110px;
縦サイズ110ピクセル

border:1px solid #555;
境界線1ピクセル色#555 

overflow: auto;'
表示オーバー時はオートスクロール

align='left'
表示左詰め

こんな感じで作成していきます。

2017年4月29日土曜日

ftp 転送プログラム

以下のソースは、転送先にコピーして実行させるファイル情報取得プログラムです。

このプログラムは、サイトのindex.php のある場所にGetFileList.php の名前で保存して下さい。

以下のソースは、自由な名前で携帯環境直下に適当なフォルダーを作り保存して下さい。

以下の修正が必要です。

 $contents = file_get_contents("http://サイトアドレス/GetFileList.php?dir=".$dir);
これは、あなたのサイト直下のGetFileList.php を読み込め!って命令です。
php プログラムを読み込む事を指示すると、php は、実行した結果をよみこませようとします。
結果として、php を実行します。
この関数は、制限されていないphp 環境でないと実行されません。携帯php 環境では、問題ありません!
レンタルサーバー等で実行される場合は、DMM コミック広告取得で使用した処理を使用してください。

以下は、ftp 接続情報の定義です。契約サイトで確認して、設定して下さい。
 $ftp_server = "サーバー名";
 $ftp_user   = "ユーザー名";
 $ftp_pass   = "パスワード";

以下にコピーしたいフォルダーを設定して下さい。
全てコピーする場合""
個々をコピーする場合"ホルダー名/"
を設定してください。
FtpUpdate("コピーしたいホルダー名");

ftp の基本処理は以下になります。

 $ftp_server = "サーバー名";
 $ftp_user = "ユーザー名";
 $ftp_pass = "パスワード"; 
$connect_id = ftp_connect( $ftp_server );サーバーに接続する
 if( ftp_login( $connect_id , $ftp_user , $ftp_pass ) ) {ログインする
  echo 'FTPログイン成功<br>';
 }
 else {
  echo 'FTPログイン失敗<br>';
  ftp_close( $connect_id );接続を終了する
  exit;プログラムを終わらせる
 }

ここにftp の処理をプログラムする

 ftp_close( $connect_id );接続を終了する

こんな感じです。

☕コーヒーブレイクftp

ftp は、簡単なんです!
php のftp の各関数を呼ぶだけ!
問題なのは、使い方ではなく考え方なんです!
普通にphp のftp でファイル転送しただけでは、ツールで全てコピーするより遅いのです。
そこで、私は考えました。
ファイル名と日付と時間とファイルサイズを比較して、条件に一致したファイルだけ転送します。比較条件をftp を経由して確認すると、これも時間がかかります。そこで、転送先も、php サーバーとした場合、転送先で独自に取得した方が早い事がわかりました。
プログラムを2つにします。
転送先用ファイル情報取得プログラムと携帯でのコピープログラムです。
転送プログラムを実行すると、コピー先のサーバーのファイル情報取得プログラムを実行させます。
転送先サーバーでは、コピー先の全フォルダーとファイルの日付とサイズを取得し、ファイルに保存します。
転送元では、処理終了を待ち、終了後の一覧のファイルを取得(コピー)して読み込みます。
そして、コピー元でもコピーするフォルダーやファイルの情報を取得します。
2つの情報から、コピー対象を抽出し、条件に合ったファイルのみコピーします。
ftp 処理には、よく実行中にエラーが発生します。ネット接続が切れたりアクセス遅延などです。
処理中に切断したりすると、コピーしきれていないゴミファイルができたりします。
そこで、ファイルサイズが一致してないファイルは、ゴミとしてコピーし直します。
そのためのサイズ比較です。
比較条件は、存在するかしないか?
日付時間は元より新しいか?
サイズは元と同じか?
以上です。
ftp 処理は、時間がかかります。php サーバーでは、デフォルトで、処理が30秒以上かかると、エラーで止まります。そこで、プログラムで3分に設定して実行します。
次回にソースを公開します。
今は、コミック情報登録処理ができたので、コミックサイトのデザインを考えています。
基本は、上部にタイトルで左右に情報ですよね!
これってアニメサイトと同じなんですよね!
なんか良いデザインないかな?
下手に携帯対応入れるとメディアによって出力しなくなったりするからどうするか考えています。
しばらく検討中となります。
よろしくね!(^_^)ノ

DMM コミック広告取得処理

これは、詳しい説明は、しません。
内容自分で解析するかして理解して下さい。
わからない方は、そういうもんだと考えてお使い下さい。
この中の処理は、実際にコミックページのhtml を解析し、必要な情報を取得するのに必要なキーワードを見つけ、必要情報を取得してデータを作成する処理です。
それを説明するのは、サイトに失礼ですし、やるべきでは無いと考えます。
サイトの各ページの癖を解析し、記載ルールを調査して作成しました。
以下にソースをのせます。

いかがでしょうか?
結構大きいプログラムとなってます。
取得される情報は、タイトルや画像URL 立ち読み先リンクURL コミックページURLコミック内容 などです。実際にサイトで使用する時は自分のDMM アフィリエイトID を加えて使用する必要があります。
getFileMain
この処理は、file_get_contents関数を作り直した処理です。結果は同じになります。
file_get_contents関数は、制限があり、携帯php では使えますが、レンタルサーバーでは、制限に引っかかって使えない事が多いので、ネットで調べて作成しました。
この処理は、他のサーバーのファイル情報をテキストに全て読み込みます。
この処理によりDMM サイトのコミックページの内容を全て読み込み解析し、広告に必要な情報を抽出してファイルに保存します。
この処理は、実行すると、test.html ファイルを保存します。
これは、実際に読み込みしたDMM サイトの情報を保存した物です。
取得エラーが出た時の確認用です。デバッグに使用します。
次は、ftp のファイルアップを公開しますね!



コミック情報編集ページ作成

これは、すでに、入力されたコミック情報の編集ページへ行くためのページです。
編集ページと言っても、前回の新規作成ページを編集フォルダー名とmode を設定して実行するだけです。同じようなページなら使い回す!
それだけの為の設定ページです。
以下にソースをのせます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />

<title>コミック編集</title>
</head>
<body>
<?php
function getkazu($str,$c){
$b=explode($c,$str);
return count($b)-1;
}

function getcsv($handle){
$str="" ;
do{
$str = $str.fgets($handle);
$cun = getkazu($str,"\"") ;
}while( ($cun%2)!=0 );
$str = str_replace("\"", '', $str);
return explode(",",$str) ;
}

function ReadCsv($fname){
$records = array() ;
$fname = str_replace(array("\r\n", "\r", "\n"), '', $fname);
if (($handle = fopen($fname, "r")) !== false) {
while (!feof($handle)){
$line = getcsv($handle) ;
if( count($line) == 1 && $line[0] == "" ){
}
else {
       $records[] = $line;
}
 } 
 fclose($handle); 

return $records ;
}

function list_dir($dir){
$list = array();
$files = scandir($dir);
$cunt = 0 ;
foreach($files as $file){
if($file == '.' || $file == '..'){
    continue;
} else if (is_dir($dir . $file)){
if( is_file($dir.$file."/comicInfo.csv")){
$tb = ReadCsv($dir.$file."/comicInfo.csv");
if( count($tb[0]) >1 ){
$list[$cunt][0] = $file;
if( $tb[0][0] != "" ){
$list[$cunt][1] = $tb[0][0] ;
}
else {
$list[$cunt][1] = $file ;
}
$cunt++;
}
}
else{
$list[$cunt][0] = $file;
$list[$cunt++][1] = $file;
}
}
}
return $list;
}

$result = list_dir("../csv/");
print "<div>コミック編集</div><br>";
print "<input type=\"button\" onclick=\"window.location.href='./index.php';\" value=\"メニューに帰る\" /><br><br>";
print "<form method=\"POST\" action=\"newcomic.php\" name=\"main_form\">";
print "<div>";
print "<input id=\"mode\" type=\"hidden\" name=\"mode\" value=\"3\" />";

print "コミック選択<select id='comic_dir' name='comic_dir' >";
for($mi=0;$mi<count($result);$mi++ ){
print "<option value=\"".$result[$mi][0]."\">".$result[$mi][1]."</option>";
}
print "</select><br>";
print "<input id=\"edit\" type=\"submit\" name=\"edit\" value= \"編集\" />";

print "</div>";
print "</form>";
?>
</body>
</html>
編集したいコミック情報のフォルダーを選択してボタンを押して作成ページを呼ぶだけです。
フォルダー名の取得に少し細工をしてます。
すでにコミック情報があれば、表示されるのは、フォルダー名では、なくコミック情報のコミック名になります。
次回は、DMM コミック広告取得処理を上げます。


コミック情報入力ページ作成

実は、ここが結構大変でした。
まっさらな新規作成なら問題なかったんですが、私の場合は、アニメデータとかぶったフォルダーになり、すでに、タイトルフォルダーが作成されていて、コミック情報ファイルが無い状態で、エラーが続出しました!
コミック情報は、ホルダー名が各コミック名を示し、フォルダー内にcomicInfo.csvファイルにコミック情報を出力します。
ちなみにDMM.com のコミック情報は、comic.csv に保存されます。
この構造は、私のアニメサイトに合わせてあり、このフォルダーに関連アニメ情報が一緒に管理されていて、アニメリストの表示の際にcomic.csv があれば、自動でコミック一覧を出力します。
ちなみにbook.csv があれば、文庫一覧を出力するなどの機能もあります。
これで、私のサイトは、ファイルの追加をするだけで表示情報が増える作りです。
以下にソースを載せます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script>
function setMode(mode){
document.getElementById("mode").value = mode;
}
function setComic(){
document.getElementById("tgt").value ="../csv/"+document.getElementById("comic_dir").value;
}
</script>

<title>作者編集</title>
</head>
<body>
<?php;
function getkazu($str,$c){
$b=explode($c,$str);
return count($b)-1;
}

function getcsv($handle){
$str="" ;
do{
$str = $str.fgets($handle);
$cun = getkazu($str,"\"") ;
}while( ($cun%2)!=0 );
$str = str_replace("\"", '', $str);
return explode(",",$str) ;
}

function ReadCsv($fname){
$records = array() ;
$fname = str_replace(array("\r\n", "\r", "\n"), '', $fname);
if (($handle = fopen($fname, "r")) !== false) {
while (!feof($handle)){
$line = getcsv($handle) ;
if( count($line) == 1 && $line[0] == "" ){
}
else {
       $records[] = $line;
}
 } 
 fclose($handle); 

return $records ;
}

function list_files($dir){
$list = array();
$files = scandir($dir);
$cunt = 0 ;
foreach($files as $file){
        if($file == '.' || $file == '..'){
            continue;
        } else if (is_file($dir.$file)){
            $list[$cunt][0] = $file;
            $tb = ReadCsv($dir.$file);
            $list[$cunt++][1] = $tb[0][0];
        }
    }
    return $list;
}

function writeComic($comic_dir,$comic_title,$comic_yomi,$path_dir,$Publishing_company,$Journal_title,$Comment){
if( !is_dir("../csv/".$comic_dir) ){
mkdir("../csv/".$comic_dir,0777);
}
$file = fopen("../csv/".$comic_dir."/comicInfo.csv","w");
fwrite($file,$comic_title.",".$comic_yomi.",".$path_dir.",".$Publishing_company.",".$Journal_title.",\"".$Comment."\"");
fclose($file);
}

$result = list_files("../autho/");
print "<div>コミック新規登録</div><br>";
print "<input type=\"button\" onclick=\"window.location.href='./index.php';\" value=\"メニューに帰る\" /><br><br>";
print "<div style=\"margin: 5px;\" >";
print "<form method=\"POST\" action=\"newcomic.php\" name=\"main_form\">";
$comic_dir = "";
if( isset($_POST["comic_dir"])){
$comic_dir = $_POST["comic_dir"];
}
if( isset($_POST["path_dir"])){
$path_dir = $_POST["path_dir"];
}
$comic_title = "";
if( isset($_POST["comic_title"])){
$comic_title = $_POST["comic_title"];
}
$comic_yomi = "";
if( isset($_POST["comic_yomi"])){
$comic_yomi = $_POST["comic_yomi"];
}
$Publishing_company = "";
if( isset($_POST["Publishing_company"])){
$Publishing_company = $_POST["Publishing_company"];
}
$Journal_title = "";
if( isset($_POST["Journal_title"])){
$Journal_title = $_POST["Journal_title"];
}
$Comment = "";
if( isset($_POST["Comment"])){
$Comment = $_POST["Comment"];
}

$mode = 1;
$err = 0 ;
if( isset($_POST["mode"])){
if( $_POST["mode"] == 1 ){
if( $comic_dir == "" ){
$err = 1 ;
}
else {
if( is_file("../csv/".$comic_dir."/comicInfo.csv") ){
$mode = 2 ;
}
else {
writeComic($comic_dir,$comic_title,$comic_yomi,$path_dir,$Publishing_company,$Journal_title,$Comment);
}
}
}
else if( $_POST["mode"] == 2 ){
writeComic($comic_dir,$comic_title,$comic_yomi,$path_dir,$Publishing_company,$Journal_title,$Comment);
}
else if( $_POST["mode"] == 3 ){
$mode = 1 ;
if( is_file("../csv/".$comic_dir."/comicInfo.csv") ){
$tb = ReadCsv("../csv/".$comic_dir."/comicInfo.csv");
$comic_title = $tb[0][0] ;
$comic_yomi = $tb[0][1] ;
$path_dir = $tb[0][2] ;
$Publishing_company = $tb[0][3] ;
$Journal_title = $tb[0][4] ;
$Comment = $tb[0][5] ;
}
}
}


print "<input id=\"mode\" type=\"hidden\" name=\"mode\" value=\"".$mode."\" />";
print "登録コミックフォルダ名<br><input id=\"comic_dir\" type=\"text\" name=\"comic_dir\" size=\"50\" value=\"".$comic_dir."\" />";
if( $mode == 2 ){
print "<font color=\"#ff0000\">すでにファイルが存在します。強制保存で上書き保存するか、フォルダ名を変更して通常保存してください!</font>";
}
else {
if( $err == 1 ){
print "<font color=\"#ff0000\">フォルダ名を入力してください!</font>";
}
}
print "<br>";
print "コミックタイトル<br><input id=\"comic_title\" type=\"text\" name=\"comic_title\" size=\"50\" value=\"".$comic_title."\" />";
print "<br>";
print "ひらがな読み<br><input id=\"comic_yomi\" type=\"text\" name=\"comic_yomi\" size=\"50\" value=\"".$comic_yomi."\" />";
print "<br>";
print "著者選択<select id='path_dir' name='path_dir' >";
for($mi=0;$mi<count($result);$mi++ ){
$op="";
if( $result[$mi][0] == $path_dir ){
$op = "selected";
}
print "<option value=\"".$result[$mi][0]."\" ".$op." >".$result[$mi][1]."</option>";
}
print "</select><br>";
print "出版社<input id=\"Publishing_company\" type=\"text\" name=\"Publishing_company\" size=\"50\" value=\"".$Publishing_company."\" /><br>";
print "雑誌名<input id=\"Journal_title\" type=\"text\" name=\"Journal_title\" size=\"50\" value=\"".$Journal_title."\" /><br>";
print "コメント<br>";
print "<textarea id=\"Comment\" name=\"Comment\" rows=\"8\" cols=\"60\">".$Comment."</textarea><br><br>";
if( $mode == 1 ){
print "<input id=\"save\" type=\"submit\" name=\"save\" value= \"保存\" />";
}
else if( $mode == 2 ){
print "<input id=\"save\" type=\"submit\" name=\"save\" value= \"強制保存実行\" />";
print " <input id=\"save\" type=\"submit\" name=\"save\" onclick=\"setMode(1);\" value= \"通常保存実行\" />";
}
print "</form>";

print "</div>";
print "<div style=\"margin: 5px;\" ><br><br>";
print "<form method=\"POST\" action=\"comic.php\" name=\"main_form\">";
print "<input id=\"tgt\" type=\"hidden\" name=\"tgt\" />";
print "<input id=\"type\" type=\"hidden\" name=\"type\" value=\"コミック\" />";
print "<input id=\"comic_input\" type=\"submit\" name=\"comic_input\" onclick=\"setComic();\" value= \"DMMコミック入力\" />";
print "</form>";
print "</div>";
?>
</body>
</html>
基本は、全て今までのソースと同じ作りです。新しい処理は、setComicくらいです。これは、すでに、作成されているDMM.com のコミック情報取得ページの実行の為の引数設定をしてます。
引数type にコミックを入れてtgt に保存するフォルダーを設定して実行すると、その場所にコミック広告情報をcomic.csv に出力します。便利でしょ!
次回は、コミック情報編集を載せます。

作者データ修正ページ作成

いたって簡単に作ります。
前回作成したページのノウハウを集めて作者データ一覧を作り修正する作者を選択し、前回作成したページを呼びます。あのページの再読み込み処理は、修正処理としてそのまま使えます。
以下にソースを載せます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />

<title>作者編集</title>
</head>
<body>
<?php
function getkazu($str,$c){
$b=explode($c,$str);
return count($b)-1;
}

function getcsv($handle){
$str="" ;
do{
$str = $str.fgets($handle);
$cun = getkazu($str,"\"") ;
}while( ($cun%2)!=0 );
$str = str_replace("\"", '', $str);
return explode(",",$str) ;
}

function ReadCsv($fname){
$records = array() ;
$fname = str_replace(array("\r\n", "\r", "\n"), '', $fname);
if (($handle = fopen($fname, "r")) !== false) {
while (!feof($handle)){
$line = getcsv($handle) ;
if( count($line) == 1 && $line[0] == "" ){
}
else {
       $records[] = $line;
}
 } 
 fclose($handle); 

return $records ;
}

function list_files($dir){
$list = array();
$files = scandir($dir);
$cunt = 0 ;
foreach($files as $file){
        if($file == '.' || $file == '..'){
            continue;
        } else if (is_file($dir . $file)){
            $list[$cunt][0] = $file;
            $tb = ReadCsv($dir.$file);
            $list[$cunt++][1] = $tb[0][0];
        }
    }
    return $list;
}

$result = list_files("../autho/");
print "<div>作者編集</div><br>";
print "<input type=\"button\" onclick=\"window.location.href='./index.php';\" value=\"メニューに帰る\" /><br><br>";
print "<form method=\"POST\" action=\"newautho.php\" name=\"main_form\">";
print "<div>";
print "<input id=\"mode\" type=\"hidden\" name=\"mode\" value=\"2\" />";

print "作者選択<select id='path_dir' name='path_dir' >";
for($mi=0;$mi<count($result);$mi++ ){
print "<option value=\"".$result[$mi][0]."\">".$result[$mi][1]."</option>";
}
print "</select><br>";
print "<input id=\"edit\" type=\"submit\" name=\"edit\" value= \"編集\" />";

print "</div>";
print "</form>";
?>
</body>
</html>
今まで順番に見た方なら解ると思いますが、基本は、全て一緒です。
前回ディレクトリだった所がファイルに変更され、結果が二次元配列にし、表示されるのが、作成ファイル内の作者名にしてあります。ファイル名では、作者が誰だかわからないかもしれないので、ファイル内の作者名を出すように変更しました。
mode は、3固定で、再読み込みにしてあります。これで、前回のページを呼ぶ事により、編集処理となります。
次回は、コミック情報入力処理です。