OCテックノート

さて、フリーソフトでWebサイトを編集するでhtmlファイルの作成・編集が終わったら、インターネットで他の人にも閲覧できるようにするには、Webサーバーにて公開をする必要があります。
そのために、Webサーバーにファイルを送る必要があります。この送る作業をアップロード、使う通信手段をFTPと言います。

ここでは、フリーソフトFFFTP（http://www2.biglobe.ne.jp/~sota/ffftp.html）を使ってアップロードをする方法を説明します。
まず、FFFTPを上記のサイトからダウンロードして、インストールします。

FFFTPを起動します。
左上の接続→接続をクリックします。
一番最初に、「ホストの設定」をする必要があります。これが、Webサーバーの設定です。
「新規ホスト」を選択して、プロバイダやレンタルサーバー業者から送られて来たWebサーバーのアカウントの情報をここで、入力します。
上記のFFFTPの操作については、http://ftp.hm/ffftp/manual.shtmlに詳しくあります。
設定が終われば、左側のウィンドウがローカル（自分のパソコン）です。上記で編集したhtmlファイルのある場所へフォルダの絵のアイコンを使って移動します。フォルダの開いた絵のアイコンをクリックして、次に…と書いてあるアイコンをクリックすると、画面で場所を選択できます。
右側は、Webサーバーです。いよいよ、編集したhtmlファイルをアップロードします。左側で編集したhtmlファイルを選択し、右側のウィンドウへ、ドラッグ＆ドロップします。
すでにあるページの場合は「ホストに同じ名前のファイルがあります」と出ますが、「上書き」を選択して続行してください。
これでWeb上へのアップロードが終了です。インターネットへ接続して、見栄えを確認してください。

2018年6月22日

Webサイトの内容をコピーして画像のリンクを絶対リンクに修正する

PHP

Webサイトの内容をコピーして画像のリンクを絶対リンクに修正する

Webサイト作成の現場では、よく既存のWebサイトから、CMSにコピーして移行したり、違うデザインに移行したり、違う構造に移行したいということがあると思います。

大量のコンテンツがある場合、手でコピーして移行するのはなかなか難しいですよね。

しかも、画像ファイルが相対リンクだったりすると、手作業でやるのは泣きそうになります。
というわけで、今回PHPを利用した、移行用のスクリプトを作ってみました。
あまりうまく書けているわけではありませんが、また利用するときのために、書いておきます。適当に自分の環境に合う形に変えてください。

移行するサイトのページURLを、あらかじめテキストファイルに一行ずつ書きだしておき、url.txtとして保存します。
今回は、データベースへインポートする目的があって、一サイトずつCSVファイルに一行ずつ書き込みます。output.csvというファイルに書き出します。（書き込み権限があれば作っておかなくてもOKです。）
相対リンクで記載している画像を絶対リンクに書き換えます。今回のサイトは、3階層以上ないという前提です。（この辺りは環境に合わせて、適当に書き換えてください。）
ちなみにWebサイトのコンテンツをコピーすることをスクレイピングと言います。人さまが作った大量のサイトも一瞬でコピーできますが、悪い目的で使うのは絶対にやめましょう！
～の間を抜きます。

 <?php
 
 $fh=fopen('url.txt','r');
 $fi=fopen('output.csv','w');
 for($line=fgets($fh); ! feof($fh); $line=fgets($fh)){
 	
 	$line=trim($line);
 	
        //URLの内容をスクレイピング
 	$contents= file_get_contents($line);
 
 	
 	//3階層上までのURLを整形しておきます 画像のパスを絶対リンクに変更するために利用します
  	$current_dir=strripos($line, '/');
  	$url_current_dir=substr($line, 0, $current_dir);
 	
 	$one_above=strripos($url_current_dir, '/');
 	$url_one_above_dir=substr($url_current_dir, 0, $one_above);
 
 	$two_above=strripos($url_one_above_dir, '/');
 	$url_two_above_dir=substr($url_one_above_dir, 0, $two_above);
 	
 
 	//画像のパスだけ抜き取る
 	$pattern = "/src=[\"']?([^\"']?.*(png|jpg|gif))[\"']?/i";
 	
        //画像のパスを相対URLを絶対URLに書き換えます。
 	if(preg_match_all($pattern, $contents, $matches)){
 		foreach($matches[1] as $match){
 			if(preg_match('/\.\.\/\.\.\//',$match)){
 				
 				$replaced_src=preg_replace('/\.\.\//',$url_two_above_dir.'/',$match);
 				$contents = str_replace($match,$replaced_src,$contents);
 			
 			}elseif(preg_match('/\.\.\//',$match)){
 
 				$replaced_src=preg_replace('/\.\.\//',$url_one_above_dir.'/',$match);
 				$contents = str_replace($match,$replaced_src,$contents);
 			
 			}elseif($match){
 				
 				$replaced_src = $url_current_dir.'/'.$match;
 				$contents = str_replace($match,$replaced_src,$contents);
 				
 			}
 		}
 		
 	}
  	$start=strpos($contents, '<BODY>');
 	$end=strpos($contents, '</BODY>');
 
        //ブラウザで確認できます。
  	print $output = substr($contents, $start+6, $end-$start);
 	$output = str_replace("\n","",$output);
 	fwrite($fi, "$output\n");
 }
 fclose($fh);
 ?>

CMS移行時に大量コンテンツのコピーでお悩みですか？ご相談ください。

2018年6月22日

Webサイトのヘッダーメニューをさくっとスマートフォンに対応させる

Android
iPhone

Webサイトのヘッダーメニューをさくっとスマートフォンに対応させる

今やスマホ対応はWebサイトに取って必須ですが、めんどうっちゃ面倒ですよね。
cssが導入してあるサイトであれば、メディアクエリなどを利用すれば、とりあえずの見た目は簡単に変更できると思います。

ただ、ヘッダーメニューはプルダウンメニューなどにしていたり、多階層になっていたりなどでスマートフォン対応が難しくなってしまう部分の一つ…。
そこで、ヘッダーメニューをさくっとスマホ対応させてくれるJavascriptライブラリの紹介です。

Slimmenu.js
http://adnantopal.github.io/slimmenu/

PC版だとこういう見た目のヘッダーメニューが

スマホでこうなります。

実装もとーっても簡単!

上記のslimmenuのサイトから、Zipなどをダウンロードしてきて、読み込みたいhtmlの中で、slimmenu.cssとjquery.slimmenu.min.jsを読み込みます。

そして、ヘッダーメニューを下記のように書きます。

 <ul id="navigation" class="slimmenu">...</ul>

最後にslimmenuを実行するように、下記を内に記述し、Javascriptを実行します。

 <script>
 $('#navigation').slimmenu(
 {
    resizeWidth: '800', //画面幅がこのピクセル以下になったらスマホ対応メニューにするという設定
    collapserTitle: 'Main Menu', //スマホ表示になった時のヘッダーメニュータイトルの名前
    animSpeed: 'medium',
    easingEffect: null,
    indentChildren: false,
    childrenIndenter: '&nbsp;'
 });
 </script>

ちなみに、最初は
Bootstrap
http://getbootstrap.com/2.3.2/
でやろうと思ってたんですが、ちょっと機能が多すぎて、既存のサイトにすぐ使うには重いなー、というのが印象でした。

最初からサイトを作る時には、Bootstrapがいいのかと思われます。

2018年6月22日