以前にWindows環境下でフリーソフト「OpenVPN」を利用したルーティング方式のVPN環境の構築方法を解説しました。
OpenVPNを使ってVPN環境構築（ルーティング方式）
今回はその続編で、ブリッジ方式を解説します。
前回と同様にクライアントはWindows 7、サーバはWindows XPで、共にOpenVPN 2.2.2をインストール済みとします。
また、証明書と鍵の作成など各種設定も終え、ルーティング方式での接続が可能な状態とします。
こちらでは、主にルーティング方式との設定項目の相違点をみていきます。
サーバの設定ファイル「OpenVPNconfigserver.ovpn」をテキストエディタで開きます。
Windows7でWebdavやVPNを用いてネットワークドライブを使用する場合、ファイル表示速度やファイル転送速度が異常に遅い場合があります。
いろいろと試していたのですが、解決策が見つかったのでここに残しておきます。
まずIEを起動して、「インターネットオプション」を開きます。
次にタブ「接続」を選択し、「ローカルエリアネットワーク（LAN）の設定」の「LANの設定」をクリックします。
そして下図のように、「自動構成」の「設定を自動的に検出する」のチェックを外します。
今回は技術的なお話ではなく、Webの将来について考えてみたことを書き留めてみたいと思います。
Web制作では日々のお仕事でデザイン、コーディングというフローを淡々とこなしているわけですが、これが10年、20年と続けられるものなのかという話しがよく出ます。
「Webの業界は進展がめまぐるしいので、これが永遠と続くとは考えづらい。」
「どんなに時代が発展したとしてもベースとしてこの作業フローは残る。」
など、いろいろと意見は飛び交いますが、たいてい漠然とした話題で終始します。
そこで今回、近い将来、デザインとコーディングという業務に最も影響を及ぼすであろうCSS3について、具体的に考えてみました。
前回まで、図やテキストを描いたりしていましたが、今回はもう少しだけ複雑な図を、機能を使って書いてみます。
関数Lineを使えば、自由にラインをひくことができます。
var line= new Kinetic.Line({
points: [10, 10, 50, 50, 140, 30, 220, 80],
x:10,
y:10,
stroke:"green"
});
x軸、y軸をピクセル数でポイントを指定し、そのポイント間に線を引いてくれます。
つまり、この設定では(10, 10) (50, 50) (140, 30) (220, 80)の4点が線で結ばれ、一つのラインを描写しています。
今更ながら、VPN環境が整ったので、その手順をメモしておきます。
VPNには、接続先の端末と1対1でつながるルーティング方式と、接続先のLAN環境に参加するブリッジ方式があります。
今回はルーティング方式についてのお話です。
また、VPNはさまざまな環境で利用可能ですが、今回のOS環境はWindowsとします。接続元となるクライアント環境はWindows 7で、接続先のサーバ環境はWidows XPとします。
さらに、接続に利用するポート番号はデフォルトの1194と仮定します。
VPNソフトはいろいろありますが、有償のものが多いです。フリー版もありますが、ほとんどの場合が機能制限付です。
そんな中でも、コストパフォーマンスの高い「OpenVPN」を今回は利用します。
OpenVPN – Open Source VPN
こちらのサイトで迷子になることがあるのですが、クライアント、サーバいずれも、以下のページの「Installers and source packages」の「Windows Installer」からソフトをダウンロードします。
http://openvpn.net/index.php/download.html
ダウンロードした実行ファイルをクリックし、ナビゲーション通りに進めればインストールは完了します。
ちなみに、今回の例でのOpenVPNでのバージョンは「2.2.2」です。
インストール時に、ネットワークアダプタが追加されます。通常では「ローカル エリア接続2」などとして追加されますが、以後に扱いやすくするために名前を「Tap」などに変更しておきます。
過去にGoogleカスタム検索の検索窓をCSSなどを使って好きにデザインを変更した記憶があります。
しかし、最近、新規でカスタム検索のコードを取得したところ、Javascriptで記述されており、また、検索窓のフォームがiframeで読み込む形式になっているため、容易にデザインをカスタマイズというわけにはいきません。
現在、Googleカスタム検索で登録すると、以下のようなコードが取得できます。
<div id="cse" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load('search', '1', {language : 'ja', style : google.loader.themes.V2_DEFAULT});
google.setOnLoadCallback(function() {
var customSearchOptions = {}; var customSearchControl = new google.search.CustomSearchControl(
'（検索エンジン ID）', customSearchOptions);
customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
customSearchControl.draw('cse');
}, true);
</script>
このコードをページに貼り付けると、以下のような検索窓が表示されます。
前回に引き続きテキストを描いてみます。
KineticJS入門 – 図形を描いてみる
Canvasエリアの用意や、ライブラリの読み込みなどは前回を参照してください。
テキストの描写には関数Textをコールします。
以下、「sample text」という文字を、赤文字で描写するシンプルな例です。
window.onload = function() {
var stage = new Kinetic.Stage({
container:"canvas1",
width:300,
height:100
});
var layer = new Kinetic.Layer();
var text = new Kinetic.Text({
x:100,
y:50,
text:'sample text',
textFill:"red"
});
layer.add(text);
stage.add(layer);
};
前回と同様に、Textオブジェクトをオブジェクトlayerに追加し、さらにそのオブジェクトlayerをオブジェクトstageに追加します。
iPhoneやAndroidなどスマートフォンサイトでは、電話番号やメールアドレスらしき文字列があった場合に、自動でリンクが設定されます。
リンクをタッチするだけで、電話をかけれたりメールを送ることができるので、一見して親切な機能のように思われます。
しかし、あくまでブラウザが自動で検出しているので、その精度は完全ではありません。
長いメールアドレスがレイアウトの関係で折りかえってる場合や、電話番号の間にハイフンやスペースがある場合など、ブラウザがリンクの範囲を認識できずに、誤った番号への通知リンクとなる危険性があります。
例えば「aaaaa.bbbbb.ccccc@abc.jp」をクリックすると「ccccc@abc.jp」があて先にセットされるなど、実際起こるとなると恐ろしい事ですね。
HTML5＋CSS3は将来、Flashに替わるものになり得るのかという議論があります。
個人的には基本、オープンかつシンプルな技術が富をもたらすと信じているので、環境を選ぶFlashに対しては、それに替わる技術が発展するとすれば、それは大いに期待したいところではあります。
その可能性を感じさせる技術のひとつに、JavaScriptのライブラリ「KineticJS」があります。
KineticJS – HTML5 Canvas JavaScript Library Framework
今回は「KineticJS」について少しお勉強してみたいと思います。
上記の公式サイトの「Download」より「KinecticJS」の最新版をダウンロードします。現時点での最新版は3.9.8です。
ダウンロードしたライブラリを、通常のJSを読み込む要領で以下のようにします。
<script src="/js/kinetic-v3.9.8.min.js"></script>
準備はこれだけでOKです。
最近、このブログでもスパムコメントが多いです。
コメント欄はWordpressの機能で運用しており、WPプラグインでスパムフィルタなどを組み込むこともできるようですが、時代の流れにあやかってFacebookのプラグインを導入してみることにしました。
Facebook公式ページのフッタ部分の「開発」リンクをクリックすると以下のページに飛びます。
Home – Facebook開発者
「ウェブサイト向けに開発」を選択し、サイドメニューから「Core Concepts」⇒「Social Plugins」と辿り、コンテンツメニューの「Comments」をクリックします。
そうすると、以下のようなインターフェースのあるページへと遷移します。
