月: 2011年6月

CMSで作ったサイトをまるごと静的にバックアップする方法

投稿者:isc_blog

CMS(WordPress)で作ったサイト(このブログ)を静的HTMLでバックアップしようとして
WebBoxなどのツールを使ったんですがなんだか取得しきれていなかったのでいろいろ調べました。

で、ツールを使って取得する方法を調べたら
FireFoxでアドインツールを使って出来るらしい・・・
参考サイト:firefoxのプラグインScrapBookを使ってブログサイトなどをまるごと保存する|ろばのみみ
ここで使用しているFireFoxのプラグインがこちら → ScrapBook ADD-ON

おぉ!どんどん取れました!
ただし、ディレクトリ構成などが平たくなってしまい
ちょっとこのままでは・・・という感じだったので他の方法をさがすことに・・・

で、次の方法がLinuxのwgetコマンドを使用剃る方法・・・

参考サイト:CMSのサイトを静的ファイルにバックアップする方法
参考サイト:stn8:wgetで動的ページを静的ページに変換してダウンロード

こちらに載っていた方法でコマンドを叩いてみる・・・
※Windows環境でCygwinにてコマンド叩きました。(Cygwinにはあらかじめwgetをインストールしておきました。)

[html]

wget –mirror –convert-links –restrict-file-names=windows –html-extension http://blog.iscw.jp

[/html]
うーん、なんだかindex.htmlで止まっちゃう・・・

[html]

wget –mirror –convert-links –backup-converted –restrict-file-names=windows –html-extension http://blog.iscw.jp

[/html]
こちらも・・・・index.htmlから動かず・・・

最終的にWindows環境でCygwinを使用して出来た・・・のがこの方法でした。
参考サイト:サイトリッパーの提案?

[html]

wget -erobots=off –no-parent –wait=3 –limit-rate=20K -r -p -U "Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1)" -A htm,html,css,js,json,gif,jpeg,jpg,bmp http://blog.iscw.jp

[/html]

-U オプションが効いたのか、こちらのユーザーエージェントを示すことでどんどん取得できちゃいました!

この方法使えそうだな~

ただし、取得したファイルの中身の「http://blog.iscw.jp」というURLの記述部分は移設する場合など時によっては文字列置換しないといけません。

まぁ、まるごと取得出来ただけヨシとしましょう!

2011年6月14日

AndroidのWebViewにてBASIC認証を行う

投稿者:isc_blog

【AndroidのWebViewにてBASIC認証を行う方法】
Androidの開発でWebViewにてBASIC認証を行いたくなり調べたので覚え書きとして掲載します。
下記参考文献よりコピーし変数等をリテラルにしてしまった上でのソースになっています。

参考文献:
ダメ男のブログ | androidでWEB接続 その1

※onCreateメソッドのみ抜粋
[java]
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

// WebView インスタンス生成
WebView webview = (WebView) findViewById(R.id.webview);

// JavaScript有効
webview.getSettings().setJavaScriptEnabled(true);

// Basic認証行う
WebViewDatabase.getInstance(this).clearHttpAuthUsernamePassword();
// "MembersOnly"の部分の引数はBasic認証で表示される文言がそのままでないと行けないみたいです。
// 「~ホスト~」の部分は 「www.test.com」のように記述
webview.setHttpAuthUsernamePassword("~ホスト~", "MembersOnly", "~名前~", "~パスワード~");
webview.setWebViewClient(
new WebViewClient() {
// ログインcookie
private String loginCookie;

//
@Override
public void onLoadResource(WebView view, String url) {
CookieManager cookieManager = CookieManager.getInstance();
loginCookie = cookieManager.getCookie(url);
}

// 認証リクエストがあった場合の挙動
@Override
public void onReceivedHttpAuthRequest(WebView view, HttpAuthHandler handler, String host, String realm) {
String[] up = view.getHttpAuthUsernamePassword(host, realm);
if (up != null && up.length == 2) {
handler.proceed(up[0], up[1]);
}
else {
Log.d("ERROR", "Could not find username/password for domain: " + host + "with realm = "+ realm);
}
}

// 認証後の挙動
@Override
public void onPageFinished(WebView view, String url) {
CookieManager cookieManager = CookieManager.getInstance();
cookieManager.setCookie(url, loginCookie);
}
}
);

// ロード
webview.loadUrl("http://~BASIC認証後表示するページのURL~");

// トースト表示
Toast.makeText(this, "Starting…", Toast.LENGTH_LONG).show();
}
[/java]

注意としては参考文献にもありますように・・・
「BASIC認証で表示される文言はそのまま記述する」というのと
「~ホスト~」には”www.yahoo.co.jp”のようにホスト名のみ記述する
という点です。

2011年6月13日

Google Chome 12安定版登場の記事

投稿者:isc_blog

昨日、IE10が出るんですねぇ。早いですねぇ。

と書いたのですが、6月9日付けでマイコミジャーナルさんに「Chrome 12安定版登場 – 3D CSS H/Wアクセラレーションほか」の記事が掲載されていました。

記事によると新機能は下記のとおり

・3D CSSハードウェアアクセラレーション
・スクリーンリーダーサポートの改善
・Google Gearsの排除
・アドレスバーからアプリケーションを起動する機能
・同期設定を設定画面へ統合
・悪質なファイルのダウンロードを防止する新しいセーフブラウジングプロテクション機能
・Flashクッキーを簡単に削除する機能の提供

※3D CSSハードウェアアクセラレーションは対応するハードウェア構成が必要とのこと

こちらも要チェックですね。

Google Chromeダウンロード

2011年6月12日

Internet Explorer 10 Test Drive・・・IE10プレビュー版

投稿者:isc_blog

いつの間にかIEも10が出るんですね・・・
Google Chromeもバージョンアップが早いと思っていましたが
IEもなかなか・・・・

Internet Explorer 10 Test Drive
こちらからIE10 プレビュー版がダウンロード出来ます。

それから@ITの記事 特集:IE10(プレビュー版)概説(前編) によると

IE9と共存できるため、既存の環境に影響を与えることなく、操作を試せる。ただし、IE8と同時に動かすとエラーが出ることがあるため、注意が必要だ。詳しくは、リリース・ノート(英語)を参考にしてほしい。

とのことなので気をつけてください。
IE6,7はどうなのかわかりません。

また、セキュリティについても全く考慮されていない!?とのこと
※前述の特集:IE10(プレビュー版)概説(前編)より引用

なお、IE10 PP1には、基本的なブラウズ機能のみが提供されており(その外観は次の画面のように、中央のWebページ表示部分と上部のメニューバーで構成されている)、セキュリティ機能を含むほとんどの機能が省略されている。そのため、日常的に使用する場合は、セキュリティ・リスクがあることを理解したうえで利用してほしい。

とにかく一度試してみたい・・・
なにか不具合があってもほとんど確認用にしかIEを使っていないのでいいかな・・・

・・・という訳でダウンロード&インストール

2011年6月11日

HTML5で緯度経度測位するサンプル google maps geocode使用

投稿者:isc_blog

HTML5 Demo: geolocation を見てやってみようと思いました。
で、ボタン押したら・・・的なことを盛りこんでみました。(ちょっとテキトーなのでソースが綺麗じゃないのはご容赦ください)

geocode サンプルはこちら

ソースはこれだっ!
[html]
<meta charset="utf-8">
<title>測位!</title>
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var lat = "";
var lng = "";
function success(position)
{
var s = document.querySelector(‘#status’);
if (s.className == ‘success’)
{
return;
}
s.innerHTML = "ここだっ!ちがうかっ!";
s.className = ‘Success’;
var mapcanvas = document.createElement(‘div’);
mapcanvas.id = ‘mapcanvas’;
mapcanvas.style.height = ‘100%’;
mapcanvas.style.width = ‘100%’;
document.querySelector(‘#map’).appendChild(mapcanvas);
lat = position.coords.latitude;
lng = position.coords.longitude;
alert(‘Latitued: ‘+lat);
alert(‘Longitude: ‘+lng);
var url="http://maps.googleapis.com/maps/api/geocode/json?latlng="+lat+","+lng+"&sensor=false";
alert(‘Google Map API: ‘+url);
//Get Json Request Here
var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeControl: false,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"You are here!"
});
}
function error(msg)
{
var s = document.querySelector(‘#status’);
s.innerHTML = typeof msg == ‘string’ ? msg : "failed";
s.className = ‘Fail’;
}
//Jquery Code
$(document).ready(function()
{
$("#check").click(function()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(success, error);
}
else
{
error(‘Not supported’); //HTML Support
}
});
});
</script>
<input type=’button’ id=’check’ value=’測位!’/>
<div id="status">読込中・・・</div>
<div id="map"></div>
[/html]
※ソースは文字コードUTF-8で保存してください。

最近はGoogle様のおかげで簡単ですね。

その昔、某携帯用のナビゲーションを開発する仕事があってその際は緯度・経度の計算から地図の描画までスンゴイ計算して~ごにょごにょして~なんとか切り出した画像がこれです・・・的な感じでした。
なつかしい・・・けどたかだか6年前くらいか・・・

2011年6月10日

WordPressがIE6でめちゃくちゃになっていた件

投稿者:isc_blog

昨日、IE6でこのブログを見たら「ボロクソ」になってしまっていたので修復作業を行いました。
IE6のために・・・というのは置いておいて、とにかくやるせないけどやるしかなく・・・

まずはこちらのサイト
WordPress:「IE6はもういいだろ」って思うけど、諸事情で切れない時はプラグインでIE6だけテーマを切り替える|かちびと.net
を参考に
IE6でアクセスされたときにテーマを変更してみました。

・・・結果としてはこれだけではダメ。これじゃないのかな。

・・・というわけで次は

こちらの記事↓↓
[WP] IE6 でスクリプトエラーが発生したら|Labrid WP
を参考に
Google Analyticsの設定のスクリプトを・・・
と思ったが
Ultimate GA というプラグインを使用していたのでプラグインの中身をいじることに・・・

~/wp-content/plugins/ultimate-google-analytics の
ultimate_ga.php
に手を加えることに・・・
824行目あたり
[html]
document.write(unescape("%3Cscript src=\’" + gaJsHost + "google-analytics.com/ga.js\’ type=\’text/javascript\’%3E%3C/script%3E"));
[/html]
の部分を
[html]
document.write(unescape("%3Cscript charset=\’utf-8\’ src=\’" + gaJsHost + "google-analytics.com/ga.js\’ type=\’text/javascript\’%3E%3C/script%3E"));
[/html]
に変更
※charset=’utf-8′

・・・それでも直らなかったので
調べたら
wp-social-bookmarking-light でエラーが・・・
なにが悪いのか一つ一つ表示・非表示を繰り返し・・・

結果的に「Google Buzz」「facebook_like」「evernote」を削除してなんとかなった・・・かな

最終的には
hatena_button, facebook, twitter, google_plus_pne, mixi, gree, delicious
になりました。

これでいいのだ・・・・ろうか・・・

2011年6月9日

15秒でHTML5のプロジェクトを始めるテンプレート生成サイト

投稿者:isc_blog

Initializr というサイトで
15秒でHTML5のテンプレート的なコードを生成出来てしまいます!

こんな感じで・・・・

【HTML&CSS】
サンプルページにするとサンプルページのコードがくっついてきます。

【Javascript】
jQueryのminバージョンを付けて!

【Compatibility】※互換性
Modernizr!・・・ってモダンブラウザ的なことだろう・・・ と思う。

【Server Configuration】
サーバーコンフィグ・・・いらない

【Analytics】
いらないかな・・・・


この設定で作った物をダウンロードしたページ・・・

中身のコードはこんな感じ・・・(抜粋)
[html]
<!doctype html>
<!–[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]–>
<!–[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]–>
<!–[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]–>
<!–[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]–>
<!–[if (gt IE 9)|!(IE)]><!–> <html lang="en" class="no-js"> <!–<![endif]–>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title></title>
<meta name="description" content="">
<meta name="author" content="">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="stylesheet" href="css/style.css?v=2">

<script src="js/libs/modernizr-1.7.min.js"></script>
</head>
<body>
<p class="info">Your HTML5 project is almost ready! Please check the <a href="TODO.txt">TODO list</a>.</p>
<div id="header-container">
<header class="wrapper">
<h1 id="title">Your title</h1>
<nav>
<ul>
<li><a href="#">Some</a></li>
<li><a href="#">navigation</a></li>
<li><a href="#">links</a></li>
</ul>
</nav>
</header>
</div>
<div id="main" class="wrapper">
<aside>
<h3>Something aside</h3>
</aside>
<article>
<header>
<h2>Your article heading</h2>

    ・
    ・
[/html]

冒頭に[if IE]の嵐がっ!
モダンブラウザ対応した証拠ですね。
No Contentsを選べば手っ取り早い雛形の完成です。

2011年6月7日