Tech

iframeに異なるドメイン（クロスドメイン）のコンテンツを読み込んで高さを自動調節する方法

Tech

wordpressでサイトを構築したときに掲示板をつけることになりました。 bbpressをはじめ何種類かのプラグインも試しましたが、不要な機能が多く使いづらいので、別サイトで簡易なcgi掲示板を構築してiframeで埋め込むことにしました。

wordpress側の負担を減らすためもあり、表示部がHTMLでサーバに負荷をかけず表示の軽い掲示板cgi（kent-webの SUN BOARD） を選びました。

表示幅を最大にしたり、スクロールバーを非表示にしたりというのは簡単にできたのですが、「高さを自動調整する」という課題に躓き、Googleで調べてTipsを見つけました。

iframe（親）に異なるドメインのページ（子）を読み込んで、親フレームにスクロールが出ないよう、iframeの高さを子ページの高さに自動調節する

親ページと子ページにそれぞれ下記をコピペするだけでうまく行きました。感謝！

wordpress (親) 側の設定

<html>
<head>
    <title>親</title>
    <script src="js/jquery.js"></script>
    <script>
        window.addEventListener('message', function(e) {
        var iframe = $("#fugapage");
        var eventName = e.data[0];
        var data = e.data[1];
        switch(eventName) {
            case 'setHeight':
                iframe.height(data);
                break;
            }
        }, false);
    </script>
</head>
<body>
    <iframe id="fugapage" src="http://fuga.com/" width="100%" height="auto" " frameborder="0" scrolling="no"></frame>
</body>
</html>

埋め込みたい別ドメインのページ （子）

fuga.com

<html>
    <head>
        <title>子</title>
        <script type="text/javascript">
        window.onload = function() {
            var height = document.getElementsByTagName("html")[0].scrollHeight;
            window.parent.postMessage(["setHeight", height], "*");
        }
        </script>
    </head>
    <body>
    ・・・
    </body>
</html>

apt installを使わずにTeXLiveを導入する

Tech

TeX ディストリビューション

Linux で TeX 環境を構築するには，2つの方法があります．

  1. 使用している Linux ディストリビューションのパッケージ管理システムから TeX Live のパッケージをインストールする．
  2. TeX Live のインストーラを使ってインストールする．

前者の場合は，他のパッケージと同様に統一的な管理ができますが，ディストリビューションによっては提供されているパッケージのバージョンが古いことがあります． 後者の場合は，パッケージ管理システムによる管理からは外れてしまいますが，tlmgr を使って最新の状態にアップデートし続けることが可能です．

TeX Live のインストール †

TeX Live のインストールガイド

に従えばよいですが，このページでもネットワークインストーラを使う場合について簡単に説明します．

まず，ミラーサイトから install-tl-unx.tar.gz をダウンロードします．

※ wget を使用する場合

$ wget http://mirror.ctan.org/systems/texlive/tlnet/install-tl-unx.tar.gz

※ curl を使用する場合

$ curl -O http://mirror.ctan.org/systems/texlive/tlnet/install-tl-unx.tar.gz

install-tl-unx.tar.gz を展開します．

$ tar xvf install-tl-unx.tar.gz

展開したインストーラのディレクトリに移動します．

$ cd install-tl*

root 権限でインストーラを実行します． オプションでダウンロードするリポジトリを指定できます．

$ sudo ./install-tl -no-gui -repository http://mirror.ctan.org/systems/texlive/tlnet/

...
Actions:
 <I> start installation to hard disk
 <H> help
 <Q> quit
Enter command: I

I を入力してインストールを開始します． サーバーの接続エラーが発生したり，何らかの理由により取得したアーカイブに問題があったりした場合はインストールが途中でストップします． この場合は，以下のコマンドで途中から再開できたりできなかったりします．

Read more…

Macにe2psをインストールする

Tech

WtSeries : UNIXソフトからe2psをダウンロードして解凍します。 現在の最新バージョンは、e2ps-4.34

解凍フォルダー内のps-font.cをエディタで開き、14~53行の行末にバックスラッシュを追加します。

char *gsFonts = "Times-Roman\
Times-Italic\
Times-Bold\
Times-BoldItalic\
Helvetica\
Helvetica-Oblique\
Helvetica-Bold\
Helvetica-BoldOblique\
Courier\
Courier-Oblique\
Courier-Bold\
Courier-BoldOblique\
Symbol\
AvantGarde-Book\
AvantGarde_BookOblique\
AvantGarde_Demi\
AvantGarde_DemiOblique\
Bookman-Light\
Bookman-LightItalic\
Bookman-Demi\
Bookman-DemiItalic\
Helvetica-Narrow\
Helvetica-Narrow-Oblique\
Helvetica-Narrow-Bold\
Helvetica-Narrow-BoldObliqeu\
NewCenturySchlbl-Roman\
NewCenturySchlbl-Italic\
NewCenturySchlbl-Bold\
NewCenturySchlbl-BoldItalic\
Palatino-Roman\
Palatino-Italic\
Palatino-Bold\
Palatino-BoldItalic\
Zapfchancery-MediumItalic\
ZapfDingbats\
Ryumin-Light.Hiragana\
Ryumin-Light.Katakana\
Gothic-Meduim.Hiragana\
Gothic-Medium.Katakana\
";

terminalで解凍フォルダー内に移動します。

cd e2ps-4.34

続いて以下のようにmakeします。

make
sudo make install

/usr/local/bin に e2ps と e2lpr がインストールされていたら成功です。

iPadでBootstrapのnavbarをcollapseさせる

Tech

CSSフレームワークのBootstrapを使って、ナビゲーション（navbar）を導入する場合、Bootstrapのデフォルトだと、iPadでnavbarがcollapseしてくれません。メニュー項目が多くなってくると、collapseしてくれないとレイアウト崩れが起きるので対策しました。

iPadでBootstrapのnavbarをcollapseさせるには、CSSに下記のコードを追加すればOKです。

/* navbar collapse for iPad (bootstrap) */
@media (max-width: 991px) {
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .navbar-text {
        float: none;
        margin: 15px 0;
    }
    .navbar-collapse.collapse.in {
        display: block!important;
    }
    .collapsing {
        overflow: hidden!important;
    }
}

参考サイト

Perlで未定義値かどうかを判定する方法

Tech

機嫌よく動いていた自作のスクリプトに

use warnings;

を入れたら作業そのものは止まることなく終了するのだけれど、

Use of uninitialized value ...

と叱られるようになった。

foreach my $line (@log){
    chomp($line);
    my ($no,$name,$date,$mail,$comment,$pass)=split(/,/,$line);
    # $comment が空だった場合の処理
    if($comment eq ""){
	$comment=$no;$c++
    }
    if ($c > 7){  # 7日分を取得したら繰り返し終了
	last
    }
	....

上記を走らせたときに下記の部分で前述の警告が出る。

if($comment eq ""){
	$comment=$no;$c++
}

$comment が存在しなかったときに他の変数を代入する…

という条件式のつもりでしたが、存在しない（未定義の）変数だよ！ という警告なのである。落ち着いて考えたら当たり前ですね。ググってみたら未定義値かどうかを判定する defined関数 というのがあるのを知りました。

if (defined $name) {
  ...
}

上記では定義されている場合に処理させるというものですが、私の場合は値が未定義だった場合に処理をさせたいので unless を使えばいいという情報を得たので下記のように修正して警告が出なくなりました。めでたし(^o^)

# $comment が未定義だった場合の処理
unless (defined $comment){
	$comment=$no;$c++
}

RSSフィードを取得してブログの更新情報を表示

Tech

phpスクリプトに初挑戦した。

参考にした情報

記事更新後7日間はNew表示する

基本的には参考サイトのSampleどおり。ブログ記事更新後１週間はNew表示させるようにModifyしてみました。

投稿日の表示には、date(“Y.n.j”, strtotime($entry->pubDate)) を使いました。n：112 / j：131 表示になることも初めて知りました。 ただ１週間を判定するための比較演算式ではうまく機能しませんでしたので、そこだけは、date(“Y/m/d”) に変更しました。m：0112 / d：0131

if (date("Y/m/d", strtotime($entry->pubDate)) >= date('Y/m/d', strtotime('- 7 day'))) {…} else {…}

完成したスクリプト

まだまだ素人臭いスクリプトで恥ずかしいけど出来上がったのは以下の通り。一応目的どおりには動きます。

rss-update-info.php
<?php

$rssdata = simplexml_load_file("https://blog.wegh.net/index.xml");

// 読み込み件数を決定する
$num_of_data = 5;

//出力内容の初期化
$outdata = "";

//設定した読み込み件数分だけ取得を繰り返す
for ($i=0; $i<$num_of_data; $i++){
    $entry = $rssdata->channel->item[$i]; //記事1個取得
    $date = date("Y.n.j", strtotime($entry->pubDate));
    $title = $entry->title; //タイトル取得
    $link = $entry->link; //リンクURL取得

    //出力内容（リンクとタイトル）を生成する
    $outdata .= '<span style="line-height:1.5;font-size:110%;"><a
target="_blank" style="color:#24890d;text-decoration:none;" href="' . $link . '">' . $title . ' ';
    //出力内容に投稿日を加える（7日間はNew表示）
    if (date("Y/m/d", strtotime($entry->pubDate)) >= date('Y/m/d', strtotime('- 7 day')))
    {
        $outdata .= $date . '</a> <img src="./images/new.gif"></span><br>';
    } else {
        $outdata .= $date . '</a></span><br>';
    }
}

//実行結果を出力する
echo '<p>' . $outdata . '</p>';

?>

Screenshots

ホームページに表示させたスクリーンショット（Gospel-Haiku Blog の部分）

Alt Text

Formをhtmlに直接表示しないでcgiで別窓表示する

Tech

読者からのFeedbackを受け付けるためにホームページ上のコンテンツごとにメールフォームを貼っていた。 SPAM対策はしてあったがそれでもそれをくぐり抜けて攻撃されることが多くなったので、各ページにフォームを貼り付けるのはやめてCGIで表示させるようにした。

Read more…

makefile でのOS条件分岐

Tech

自動化のためにmakefileを書いています。

私の場合、Linux端末とMacとの異なる環境で共通のmakefileを使いますので、条件分岐を勉強してみました。無手勝流ながら以下の設定でうまく作動してくれるようになりました。

Read more…

無償キャンペーン未実施のPCでもWindows１０にアップグレードできた

Tech

家族の個人使用のために、比較的程度の良い Thinkpad X230/X240 の中古ノートを２台買いました。 SSDに換装して快適に使えているのですが、OSは全てWindows7 64bitでしたので、Windows10へアップグレードするために情報を集めていたらこんなサイトを見つけました。

Windows10無償アップグレード キャンペーンは、2016年7月29日で終了したのですが、上記サイトの情報によれば、2018年2月現在まだ Microsoftのダウンロードサイトからアップ・グレードインストールプログラムがダウンロードできるようです。

キャンペーン中に作っておいたメディアでもアップグレードに成功

じつは、こんなこともあろうかと考えて、無償アップグレードキャンペーン期間中にアップグレードインストールメディアをUSBで作っておいたので、今回それを使って試してみた処、すんなりとアップグレードが完了しました。

このアップ・グレードに伴う認証処理は、オンラインではなくてデジタル認証という仕組みです。詳しくはわからないのですが、インストールメディアさえあればいつでもアップ・グレードできそうです。

Microsoftの下記のダウンロードページは、いつ消えてしまうかわからないので、今後のためにも今すぐダウンロードしてメディアに保存しておいたほうが良さそうです。

インストールメディアの種類

アップグレード用のダウンロードファイルは、インストールされているOSの種類によって変わるみたいです。

  • Homeエディション か Proエディション かで異なる
  • 32bit か 64bit かで異なる

今後は、CD/DVDドライブのないPCが多くなるので、インストールメディアはUSBがいいと思います。知り合いのいろんな人の面倒を見て上げるのなら４種類のメディアを作っておくのがいいです。

クリーンインストールするために

まだ自分では実施して確認できていないのですが、いきなりクリーンインストールすると認証されないという情報です。クリーンインストールするには、一度上書きアップグレードしてから再度クリーンインストールするとできるとの情報もあるので機会があれば試してみようと思います。