ellsif blog

愛知のフリーランス プログラマのメモ書きなど

"2013年 " のアーカイブ

IE8はOSのバージョンによってレンダリングが違う?

Windows7 XPモードのIE8で1pxの点線(dotted)が実線(solid)になってしまうという現象に遭遇しました。

IE6じゃあるまいし、IE8にもなって1px点線が表示できないわけがないと思い、Win7のIE10を8にダウングレードして表示確認したところ、きちんと点線で表示されていました。
同じIE8でもXPと7ではレンダリングに違いがある模様。
一応、対象には入っているものの、ギリギリのところなんですかね。

というわけで、
XP mode → IE7
Vista → IE8
7〜 → IE9〜

のような感じで確認環境を整え直そうかと思案中です。

余談。
IEをダウングレードは簡単にできますが、その後再び戻すときに何回もWindows Updateをかけないと戻らないのでオススメしません(笑)

【IE8,9】filterをかけると:hoverで不具合

【現象】

IE独自フィルターをかけた要素に擬似要素:hoverを使うと、ブロック要素でもテキスト部分にしか:hoverが適用されない。
IE8,IE9でこの現象を確認。

div {
	width: 100px;
	height: 100px;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#cccccc');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#cccccc')";
	background-image: -moz-linear-gradient(top, #ffffff, #cccccc);
	background-image: -ms-linear-gradient(top, #ffffff, #cccccc);
	background-image: -webkit-linear-gradient(top, #ffffff, #cccccc);
	background-image: linear-gradient(top, #ffffff, #cccccc);
	line-height: 100px;
	text-align: center;
	border: 1px solid #888;}

div:hover {
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#cccccc', endColorstr = '#ffffff');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#cccccc', endColorstr = '#ffffff')";
	background-image: -moz-linear-gradient(top, #cccccc, #ffffff);
	background-image: -ms-linear-gradient(top, #cccccc, #ffffff);
	background-image: -webkit-linear-gradient(top, #cccccc, #ffffff);
	background-image: linear-gradient(top, #cccccc, #ffffff);
	color: #f00;
	cursor: pointer;}

IE8, IE9以外

カーソルを合わせると背景のグラデが反転&文字が赤に。
IE8

IE8,IE9(画像はIE8)

要素の上にカーソルを合わせても反応しない。
IE8NG

テキストの上では正しく動作する。
IE8TEXTON

【対処法】

該当の要素にbackground-colorを指定すればOK。

div {
	width: 100px;
	height: 100px;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#cccccc');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#cccccc')";
	background-image: -moz-linear-gradient(top, #ffffff, #cccccc);
	background-image: -ms-linear-gradient(top, #ffffff, #cccccc);
	background-image: -webkit-linear-gradient(top, #ffffff, #cccccc);
	background-image: linear-gradient(top, #ffffff, #cccccc);
	background-color: #fff;
	line-height: 100px;
	text-align: center;
	border: 1px solid #888;}

div:hover {
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#cccccc', endColorstr = '#ffffff');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#cccccc', endColorstr = '#ffffff')";
	background-image: -moz-linear-gradient(top, #cccccc, #ffffff);
	background-image: -ms-linear-gradient(top, #cccccc, #ffffff);
	background-image: -webkit-linear-gradient(top, #cccccc, #ffffff);
	background-image: linear-gradient(top, #cccccc, #ffffff);
	color: #f00;
	cursor: pointer;}

※色は何色でもOK。入れても適用されないです。

backround-color指定後

IE8OK
IE8,9でも正しい動作をするようになりました。

連絡先エクスポートツールELADの使い方

Android用の簡易ツールを作成しました。

はじめに

ELAD(ELlsif ADdress Exporter)は端末に登録されている連絡先情報をWebブラウザで閲覧、CSVエクスポートするツールです。
連絡先をGmailのアカウントと連携している場合は本アプリを使う必要は無いでしょう。(おそらくほとんどの人が使う必要がないと思います・・・)


以下からダウンロードできます。
GooglePlayの公開ページへ

開発目的

下記の目的で開発しております。利便性は重視しておりませんのでご了承ください。

  1. 使わなくなったAndroidをローカルな連絡先管理サーバとして使いたい
  2. AndroidをWebサーバとして使うサンプルを作ってみたかっただけ

使い方

1.アプリを起動

ELAD起動画面
URLとパスワードが表示されます。アプリが正常に動いている場合は、”http://192.168.~”になると思います。”—“になっている場合は不具合の可能性があります。アプリを再起動してみてください。
※なお、Wifiが有効になっていない場合、本アプリはご利用頂けません。

2.PCなどのブラウザで表示

PC(など)でWebブラウザを起動し、アプリに表示されているURLに移動します。
パスワード入力が求められるのでアプリに表示されているパスワードを入力してください。
アドレスの一覧が表示されます。
ブラウザから確認
※アクセスするPCは同じWifiに接続されている必要があります。

こんなときは

“ないにゃー”になる

パスワードが間違っている可能性があります。

“SERVER INTERNAL ERROR: IOException: ~”になる

ブラウザで再読み込みしてみてください。

その他

Webサーバ部分にはNanoHttpdを利用させて頂きました。

WordPressのJSON APIを使う(その2 実装)

WordPressのJSON APIを使う(その1 検証)でJSON取得まで確認しました。

以下がJSON APIをPHPから使うサンプルです。

<?php
  // ブログ記事の取得(contentsのカテゴリから4件取得)
  $api_url = 'http://ellsif.com/blog/?json=get_category_posts&slug=contents&count=4';

  if ($json = file_get_contents($api_url)) {
    $wp_posts = json_decode($json);
    
    if ($wp_posts) {
      foreach($wp_posts->posts as $post) {
        $title = $post->title_plain;  // タイトル
        $excerpt= $post->excerpt;     // 本文要約
        $url = $post->url;            // 記事のURL
        $date = date('Y/m/d', strtotime($post->date));  // 投稿日(公開日?)を取得

        // HTMLに書き出す
        echo '<div class="blog_content">';
        echo '<h3>'.$title.'</h3>';
        echo $excerpt;
        echo '<a href="'.$url.'" target="_blank">続きを読む</a>';
        echo '</div>';
      }
    }
  }
?>

WordPressのJSON APIを使う(その1 検証)

WordPressのJSON APIプラグインを試してみました。
(2013/11/21 一部修正)

やりたいこと

  • WordPressの新着投稿記事を他のページ(サイトトップ)に表示したい
  • サイトトップに出す記事はカテゴリーを制限したい
  • できれば.phpでなく.htmlのままでやりたい

ということで、WordPressから記事情報をJSON形式で取得し、JSで整形して表示する方式にします。
(htmlにjsで出力したらSEO的にダメでしょ!とのツッコミを受け、phpでJSONを受けるように変更)

プラグインのインストール

  1. プラグインのインストールから「JSON」で検索し、検索結果の中から「JSON API」を「いますぐインストール」
  2. インストール完了後、「プラグインを有効化」
  3. ブラウザから”[WordPressのURL]/?json=get_category_posts&id=1″にアクセス
  4. カテゴリーが1(未分類)の投稿がJSONで取れる

こんな感じのJSONが取れます(未分類の記事が無い場合)

{
    "status": "ok",
    "count": 0,
    "pages": 0,
    "category": {
        "id": 1,
        "slug": "%e6%9c%aa%e5%88%86%e9%a1%9e",
        "title": "未分類",
        "description": "",
        "parent": 0,
        "post_count": 0
    },
    "posts": []
}

プラグインの使い方

基本的には「JSON API のドキュメント」に従います。

やりたかったのは

  • カテゴリーが”お知らせ”の記事を、サイトのお知らせとして表示する
  • カテゴリーが”お知らせ”以外の記事を、サイトのブログ新着記事として表示する

なので、それぞれ

  • http://ellsif.com/blog/?json=get_category_posts&slug=info&count=2
  • …(;゚д゚)ァ….

残念ながら2つ目が取得できませんでした。
「~以外」の指定はできないようです。

(2013/11/21 追記)
結局、カテゴリを階層毎に分ける事で対応しました。

・お知らせ (slugにinfoを指定)
・ブログ記事 (slugにcontentsを指定)
 |- JavaScript
 |- PHP
 |- …

これで取ります。

  • http://ellsif.com/blog/?json=get_category_posts&slug=info&count=2
  • http://ellsif.com/blog/?json=get_category_posts&slug=contents&count=4