HOME > WEB
つぶやく

『WEB』に関する記事

iPad用背景固定とJPGの謎

iPadを買って初めて自分のサイトを覗いた時の衝撃と言ったらsign02

まず、背景画像の小さいこと。
理由はまったくわからんのだけど、見た目として背景画像の解像度がコンテンツの解像度と合ってない・・・sweat02

ipad1.png

続きを読む

WebフォントとTypeSquareをtext-shadowで疑似アンチエイリアス

ちょいと仕事が落ち着いてきたから自由研究などw

前にお試しでWebフォントを使ってみたところ、いまいちアンチエイリアスが微妙で、ちょっとかくかくした感じになった。
というか、こないだ@plus9heaven氏との会話で気づいたんだけど、そのアンチエイリアスが微妙なのはやっぱりWindowsだけだったのね…。Macでは自動でアンチエイリアスがかかるからそれなりに表示されてた。

で、そこを何とかごまかせないかなぁとGoogle大先生に聞いてみたら、CSS3のtext-shadowを使ってやってる方がいた。
早速やってみることにshine

続きを読む

CentOS6.1でSNIを試す

仕事でサブドメSSLの運用もしているんだけど、そもそもこのIP枯渇な時代に1証明書につき1IPってのもどうかと思うんだよね。
というか、お金dollarがかかってしょうがないw

ので、SNIによるネームベースSSLのバーチャルホストってのはうれしいことこの上ない。
なぜもっと早く対応できなかったのかなぁ。(他人事w)

で、CentOS6からは標準サポートされてるから早速試してみた。
最新のCentOS6.1を持ってきてインストールcd
基本Webサーバとして使うだけだけど、何となくデスクトップも入れとくcoldsweats01
111219_centos_01.jpg 111219_centos_02.jpg 111219_centos_03.jpg 111219_centos_04.jpg 111219_centos_05.jpg 111219_centos_06.jpg 111219_centos_07.jpg 111219_centos_08.jpg 111219_centos_09.jpg 111219_centos_10.jpg 111219_centos_11.jpg 111219_centos_12.jpg 111219_centos_13.jpg 111219_centos_14.jpg 111219_centos_15.jpg 111219_centos_16.jpg 111219_centos_17.jpg 111219_centos_18.jpg 111219_centos_19.jpg 111219_centos_20.jpg 111219_centos_21.jpg 111219_centos_22.jpg

ソフトウェアRAID組むわけでもないし、インストールめっちゃ楽ちんflair
Slackwareの頃とかX Window System入れるのも一苦労だったのにwww

インストール完了したら conf ファイル作成。
面倒なのでバーチャルホストもSSLもいっしょくたw

NameVirtualHost *:80
NameVirtualHost *:443
SSLStrictSNIVHostCheck off
## kk0201.com
<VirtualHost *:80>
ServerName kk0201.com
    DocumentRoot /var/www/httpdocs
    <Directory "/var/www/httpdocs">
        Options ExecCGI IncludesNOEXEC FollowSymLinks
        AllowOverride ALL
        AddHandler cgi-script .cgi .pl .rb .py
        Order allow,deny
        Allow from all
    </Directory>
</VirtualHost>
<VirtualHost *:443>
    ServerName kk0201.com
    SSLEngine On
    SSLOptions +StdEnvVars
    SSLCertificateFile /var/www/certs/kk0201.crt
    SSLCertificateKeyFile /var/www/certs/kk0201.key
    DocumentRoot /var/www/ssldocs
  <Directory "/var/www/ssldocs">
      Options ExecCGI IncludesNOEXEC FollowSymLinks
        AllowOverride ALL
        AddHandler cgi-script .cgi .pl .rb .py
        Order allow,deny
        Allow from all
    </Directory>
</VirtualHost>
## test.kk0201.com
<VirtualHost *:80>
    ServerName test.kk0201.com
    DocumentRoot /var/www/vhosts/test.kk0201.com/httpdocs
    <Directory "/var/www/vhosts/test.kk0201.com/httpdocs">
        Options ExecCGI IncludesNOEXEC FollowSymLinks
        AllowOverride ALL
        AddHandler cgi-script .cgi .pl .rb .py
        Order allow,deny
        Allow from all
    </Directory>
</VirtualHost>
<VirtualHost *:443>
    ServerName test.kk0201.com
    SSLEngine On
    SSLOptions +StdEnvVars
    SSLCertificateFile /var/www/vhosts/test.kk0201.com/certs/test.kk0201.crt
    SSLCertificateKeyFile /var/www/vhosts/test.kk0201.com/certs/test.kk0201.key
    DocumentRoot /var/www/vhosts/test.kk0201.com/ssldocs
    <Directory "/var/www/vhosts/test.kk0201.com/ssldocs">
        Options ExecCGI IncludesNOEXEC FollowSymLinks
        AllowOverride ALL
        AddHandler cgi-script .cgi .pl .rb .py
        Order allow,deny
        Allow from all
    </Directory>
</VirtualHost>


証明書は自作してそれぞれ配置、Webサーバ起動したところで動作確認pcmobilephone

【Windows】

IE9 OK
Firefox 8 OK
Google Chrome OK
Safari 5.1 OK


【Mac】

Firefox 8 OK
Google Chrome 16 OK
Safari 5.1 OK


【フィーチャーフォン】

Docomo
L-03A
NG
※メインサイトの証明書になる。続行すれば表示。
au
K002
NG
※メインサイトの証明書になってエラー。表示不可。


【スマートフォン(標準ブラウザ)】

Android2.2
(SH-03C)
NG
※メインサイトの証明書になる。続行すれば表示。
Android2.3
(SDK)
NG
※メインサイトの証明書になる。続行すれば表示。
Android4.0(SDK) OK
iOS5(iPhone4) OK


AndroidがNGなのは意外。
仕事では携帯のSSLも必要だから、まだまだ実用できひんなぁ。残念。

でも、携帯関係ない運用だったらいい選択肢ができたのは間違いない。
早いトコ対応してほしいな。

今度はIPv6対応進めていかなきゃ。おっくうだ…。
 

 

WebFont のお試し

最近急に WebFont が気になったから検索してみた。

と、その前に、このブログのフォント設定sign01
何もいじってなかったという・・・w
ので、まずは自分とこのフォントファミリー変更しときましたcoldsweats01

body {
font-family: 'ヒラギノ丸ゴ Pro W3','Hiragino Maru Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',sans-serif;
font-size: 13px;
line-height: 1.5em;
}

でもって。

日本語Webフォントって重さの関係もあってかなかなか普及してない様子。
Webフォントが使えるようになる独自タグを発行してくれるサービスがいくつかあったけど、わざわざJavascript埋め込むのもなんかやだし、とりまえず現状でフリーで使えるWebフォントを探したところ、こんなサイト発見eye

WebFonts として利用できるフリーの和文フォント | ヨモツネット

なるほど、使えるのは何種類かあるのね。
さっそくお試し。migmixクラスを付加するようにして部分的に。

@font-face {
font-family: 'migmix-1p-regular';
src: url('/font/migmix-1p-regular.ttf') format('truetype'), url('/font/migmix-1p-regular.eot') format('embedded-opentype');
}
.migmix {
font-family: 'migmix-1p-regular';
font-size: 13px;
line-height: 1.5em;
}


どうなるかなpc
 



味噌オロチョン@北海道ラーメン 魚らん坂。
麺は大好きな縮れ中太卵麺。割とマイルドめな辛さに濃い味付けの柔らかチャーシューが◎。
[メモ]大盛無料、14時半まで禁煙、次回味噌酸辣麺。
(Twitterより抜粋w)
 

ちょーっとキレイじゃないねcoldsweats01 フォント変えればまた違うのかな。
もっと綺麗に表示できるようになればもっともっと需要は増えそうだね。
 

MovableType5のサムネイルを使った画像挿入時の設定変更

MT5に変更してからlightboxの自動設定をしてなかったので、メモmemo

/mt/lib/MT/Asset/Image.pm をいじる(348行目付近)pencil

(変更前)

if ( $param->{thumb} ) {
$text = sprintf(
'<a href="%s"><img alt="%s" src="%s" %s %s /></a>',
MT::Util::encode_html( $asset->url ),
MT::Util::encode_html( $asset->label ),
MT::Util::encode_html( $thumb->url ),


 

(変更後)

if ( $param->{thumb} ) {
$text = sprintf(
'<a href="%s" rel="lightbox" title="%s"><img alt="%s" src="%s" %s %s /></a>',
MT::Util::encode_html( $asset->url ),
MT::Util::encode_html( $asset->label ),
MT::Util::encode_html( $asset->label ),
MT::Util::encode_html( $thumb->url ),


以上。

スマートフォンオプション for MovableTypeを入れてみた

とりあえず投稿テスト。
さすがに絵文字とかってわけにはいかないかw

画像がちゃんと表示されるなら、結構手軽に更新できるようになるかな✎
20111128-234554.png
画像追加テスト
20111129-002110.png

MovableTypeを5へ移行(mt4iはちょと改良)

どうやら今月中にスマートフォンでも管理できるようになる「スマートフォンオプション for MovableType」が出るようなので、どうせなら使えるようにするためにこのブログも MT4 から MT5 へ移行することに。
ていうか、なんで未だにMT4なのかって話なんだけどねcoldsweats01ww

まずはブログ移行の下準備として記事のエクスポート。
あとは自分で作った php やら JS(/js)、画像(/image)やらサムネイル(/asset_c)をフォルダごとバックアップしておく。

MySQL で新しい DB を作成後、手順通りに MT5 をセッティングpc
記事のインポートをしてバックアップしたフォルダをそのまま配置すると、ひとまず絵文字以外の記事は正常表示。

んでは絵文字pigcherryeyeglass
いままで FCKeditor を使ってたけど、今度は CKEditor を使用することに。
ので、MTの置換機能を使って絵文字のパスを変更recycle
 前) /mt-static/plugins/FCKeditor/fckeditor/editor/images/smiley/typepad/
 後) /image/emoji/

ありがたいことに、これだけで絵文字もoksmile

あとは HTML ヘッダーテンプレートに Javascript 使うための META 組み込みと、各種テンプレート・ウィジェット作成。
ブログにやり方メモっといてよかったw
 ・PHPでMT4からmt4iへリダイレクト
 ・MovableTypeにソーシャルボタン設置
 ・MovableTypeにmediaplayer設置

とりあえず MT5 としては完成。
 

 



続いて mt4i。
MT5 対応の Ver.3.1Beta4 を使用。
これまでつかってた 3.0.8 とはテンプレートが結構変わってたから、デザイン面については CSS だけ持ってきて、骨組みは作り直し。
まぁ mt4i/tmpl/mt4i/ 内の各 tmpl ファイルの構造に div 形式で id や class を設定するだけだけどね。

で。

画像タグへの改良が加えられてて、フィーチャフォンではいいんだろうけどスマホには向かない仕様になってたので改造。

one 画像除去を除去
772 行目から 824 行目までを丸ごとコメントアウト

two 3414 行目の後に rel 属性も取得するように追加  

my $rel = $1 if ($middle =~ /rel=["']([^"'>]*)["']/);

three 3435 行目で rel 属性も title 属性もなくさないように変更  

変更前

$str .= $left . '<a href="' . $href . '">';

変更後

$str .= $left . '<a rel="' . $rel . '" title="' . $title . '" href="' . $href . '" >';


 

とりあえずこれで本文内に画像が表示されるようになって、lightbox_plus も正常に動作するようになったshine
ひとまずしばらく様子見かなeye
 

MovableTypeにmediaplayer設置

サブドメで作ってるMTでは実家閲覧用の息子ブログを運営中している我が家。
そっちでは動画もたまにアップするんだけど、スマホにちゃんと対応させてなかったからやってみようかと。

いろいろググってみたんだけど、残念ながらFlash使わない方法がいまいち好みのものが見つからなかったから、Flash使用のmediaplayerを採用。
iOSで見れないのはしょうがない。。。

JW FLV Media Player の古いバージョンを発見したからそれを使うことに。

準備として以下3ファイルをアップ。
 swfobject-2.2.js
 mediaplayer.swf
 logo.png
3つ目のロゴは自分で作ったやつw再生時との兼ね合いを考えたりしてあんまり綺麗にできないなぁ。。。

でもって、スマホ用とPC用で大きさ変えるため、ヘッダーにサイズを入れる。

【PC用】
『グローバルテンプレート』の <head> 内

<script type="text/javascript">
var mp_w = '480';
var mp_h = '320';
</script>

【スマホ用】
『tmpl/mt4i/header.tmpl』の <head> 内
画面サイズを取得して値を2段階に変更。

<script type="text/javascript">
var screen_w = screen.width;
if (screen_w < 480){
var mp_w = 240;
var mp_h = 180;
}else{
var mp_w = 320;
var mp_h = 240;
}
</script>

これで準備完了note
あとは動画とサムネイル画像をアップした後でブログ投稿時にソース貼り付け。

 

 

<!-- 動画ここから -->
<script type='text/javascript' src='/js/mediaplayer/swfobject-2.2.js'></script>
<div id="players110713"><a get="" the="" flash="" player="" href="http://www.adobe.com/go/gntray_dl_getflashplayer_jp">Get the Flash Player(JavaScriptおよびFlash非対応の場合は見れません)</a></div>
<script type="text/javascript">
var flashvars = {
'file': '/mov/110713.flv',
'image': '/mov/110713.jpg',
'logo': '/js/mediaplayer/logo.png'
};
var params = {
'allowfullscreen': 'true',
'allowscriptaccess': 'always'
};
swfobject.embedSWF('/js/mediaplayer/mediaplayer.swf', 'players110713', mp_w, mp_h , '9', 'false', flashvars, params);
</script>
<!-- 動画ここまで -->

変更箇所は4か所。
 div の id と swfobject の2つ目の引数を新しく、同じ値に。(日付とか使って他の動画とかぶらないように)
 flashvars の file と image をそれぞれアップした動画とサムネイル画像へのパスに。

実際はこんな感じに。

 


※こないだ浅草行ったときに見つけた動く看板(?)
※決して山田うどんのまわしものではありませんww

んー、これで動画投稿もいつでもできるなー。
手順がそんなに簡単ではないけどwww
 

 

MovableTypeにソーシャルボタン設置

仕事上Facebookを理解しなくちゃいけなかったから、とりあえず自分のファンページを作ってみたりした

あの狭い空間で何をどういう風に表現するかってところが大事なんだろうな。
オイラにはそういうセンスが著しく欠乏してるからww、まぁまとめページ的に作成しといた。
また時間あるときにでもいじろうかとは思うけど。あー、あとでリンクくらいはサイドバーに貼っとくか。

んで、その流れでSNSとの連携を本腰入れる可能性が出てきたから、事前確認としてここにソーシャルボタンを設置してみた。

設置対象はトップページとブログ記事の。(特に理由はないけどww

使わせてもらったのは@BUNさんが作られてる『jQuery SocialMediaBtns プラグイン』
MITライセンスってことなのでちょこっと変更。

前にツイッターボタンを作った後、独自短縮URLサーバなんかも導入してみたりしてるから、その辺をツイッターボタンに入れ込んだり。ラジバンダリ…。

基本はモジュール作ってテンプレートに入れるだけだから、相変わらずそれほど時間はかからなかった。

【トップページ用のソーシャルボタン】
 『ソーシャルボタン(トップページ)』モジュール作成

<script type="text/javascript" src="/js/jquery.SocialMediaBtns.js"></script>
<script type="text/javascript"><!--
$(function(){
$('#btns').SocialMediaBtns({
mixi_dev_key: '****'
});
});
// --></script>
<script type="text/javascript"><!--
var twitext = '【<$MTBlogName$>】 <$MTBlogDescription$> | ';
var thisurl = location.href;
// --></script>
<script type="text/javascript" src="/js/get_yourls.js"></script>
<div id="btns"></div>

 『メインページ』テンプレートに挿入

<?php
$ua = $_SERVER["HTTP_USER_AGENT"];
if(ereg("DoCoMo|J-PHONE|Vodafone|MOT|SoftBank|KDDI|UP.Browser|WILLCOM|DDIPOCKET|PDXGW",$ua)){
header("Location: <$MTBlogURL$>m/");
}
if(ereg("iPhone|Android",$ua)){
header("Location: <$MTBlogURL$>sp/");
}
?>
<mt:SetVarBlock name="title"><$mt:BlogName encode_html="1"$></mt:SetVarBlock>
<mt:SetVarBlock name="html_head" append="1">
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="<$mt:Link template="rsd"$>" />
</mt:SetVarBlock>
<$mt:Include module="ヘッダー" body_class="mt-main-index"$>
<$mt:Include module="ソーシャルボタン(トップページ)"$>
<mt:Entries>
<$mt:Include module="ブログ記事の概要"$>
</mt:Entries>
<$mt:Include module="フッター"$>

【ブログ記事用のソーシャルボタン】
 『ソーシャルボタン(ブログ記事)』モジュール作成

<script type="text/javascript" src="/js/jquery.SocialMediaBtns.js"></script>
<script type="text/javascript"><!--
$(function(){
$('#btns').SocialMediaBtns({
mixi_dev_key: '****'
});
});
// --></script>
<script type="text/javascript"><!--
var twitext = '【<$MTBlogName$>】 <$mt:EntryTitle$> : <$MTEntryBody words="40"$>... | ';
var thisurl = location.href;
// --></script>
<script type="text/javascript" src="/js/get_yourls.js"></script>
<div id="btns"></div>

 『ブログ記事』テンプレートに挿入

<?php
$ua = $_SERVER["HTTP_USER_AGENT"];
if(ereg("DoCoMo|J-PHONE|Vodafone|MOT|SoftBank|KDDI|UP.Browser|WILLCOM|DDIPOCKET|PDXGW",$ua)){
header("Location: <$MTBlogURL$>m/index.cgi?mode=individual&eid=<$MTEntryID$>");
}
if(ereg("iPhone|Android",$ua)){
header("Location: <$MTBlogURL$>sp/index.cgi?mode=individual&eid=<$MTEntryID$>");
}
$keyword = 'kk0201.com/sp/index.cgi';
$ref = $_SERVER["HTTP_REFERER"];
if(ereg($keyword, $ref)){
header("Location: <$MTBlogURL$>sp/index.cgi?mode=individual&eid=<$MTEntryID$>");
}
?>
<mt:SetVarBlock name="page_title"><$mt:EntryTitle$></mt:SetVarBlock>
<mt:SetVarBlock name="title"><$mt:Var name="page_title"$> - <$mt:BlogName encode_html="1"$></mt:SetVarBlock>
<mt:SetVarBlock name="html_head" append="1">
<mt:EntryPrevious><link rel="prev bookmark" href="<$mt:EntryPermalink$>" title="<$mt:EntryTitle encode_html="1"$>" /></mt:EntryPrevious>
<mt:EntryNext><link rel="next bookmark" href="<$mt:EntryPermalink$>" title="<$mt:EntryTitle encode_html="1"$>" /></mt:EntryNext>
<$mt:EntryTrackbackData$>
</mt:SetVarBlock>
<$mt:Include module="ヘッダー" body_class="mt-entry-archive"$>
<$mt:Include module="ソーシャルボタン(ブログ記事)"$>
<$mt:Include module="ブログ記事の詳細"$>
<$mt:Include module="トラックバック"$>
<$mt:Include module="コメント"$>
<$mt:Include module="フッター"$>

これでソーシャルボタンの設置は完了したけど、相変わらず使うかどうかは全くわかりませんww
まぁ何事も勉強ということでね

ていうか、やっぱりMTじゃなくてWPにするべきなんかなー、と思ったり。
プラグインとか豊富だし、カスタマイズも楽そう。てか軽そうww要検討かな。
 

ツイートボタンをMT用にカスタマイズ

こないだ設置したツイートボタン
どうせならタイトルとか本文の抜粋とかができるようにちょこっとカスタマイズしてみた

目指す形としては、

【ブログタイトル】 エントリータイトル : 本文から抜粋 … リンク

て感じ。
リンクはツイッターオリジナルの短縮機能をそのまま使うことにするから、変更点はテキスト部分だけ。

Google大先生とMTのタグリファレンスをにらめっこして、以下を使うことに。

 ブログタイトル
<$MTBlogName$>

 エントリータイトル
<$mt:EntryTitle$>

 本文の抜粋
<$MTEntryBody words="40"$>

まぁ、まんまだわねww
タグが豊富で使いやすくて便利だわー、ほんと

というわけで、完成形なソースコードとしては
 

<a href="http://twitter.com/share" class="twitter-share-button" data-text="【<$MTBlogName$>】 <$mt:EntryTitle$> : <$MTEntryBody words="40"$>..." data-count="none" data-lang="ja">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

んでは前の記事にてポチッとな。

カスタマイズしたツイートボタンからの表示

 よしよし。

なんか、URL短縮サーバも設置したくなってきたなー。
でもわざわざそのためにドメイン取得すんのもなんだしww

今度サブドメで作ってみるかなー。
 

 

2 / 3123
このページのトップへ