乱雑モックアップ http://blog.sakurachiro.com らんざつ[乱雑] （名・形動）[文]ナリ 入り乱れていること。乱れていて秩序がないこと。また、そのさま。 Mon, 06 Sep 2010 13:35:26 +0000 ja hourly 1 http://wordpress.org/?v=3.0.1 ネガティブマージンでハミ出した要素がIE6で切れたら。 http://blog.sakurachiro.com/2010/09/negative-margin-ie6/ http://blog.sakurachiro.com/2010/09/negative-margin-ie6/#comments Fri, 03 Sep 2010 20:45:29 +0000 まこと http://blog.sakurachiro.com/?p=2094 とりあえず

position:relative;

を一緒に指定してみるのが良いみたい。

IE6での表示
真ん中が見切れている状態で、一番下がposition:relative;を追加して問題を回避した表示。
IE6の表示、ネガティブマージンを指定した要素が見切れてる。

しかし2010年の今になって初めて出会うなんてなぁ。

ちなみにIE6以外だと同じソースでこんな感じ。

IE8での表示、ネガティブマージンの部分も見切れてない

なんで今までこの現象が起きなかったんだろう？と首をかしげつつ
再現出来る最小限のソースを作ろうと問題部分を抜粋していじるけどなかなか再現させられない。。。
結局、ネガティブマージンがある要素とその親要素両方にwidthを指定したらハミ出した部分が消えた。
最小限のソースにしなくちゃと思う気持ちがもつ脆弱性をついた攻撃！！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>乱雑モックアップ｜ネガティブマージンを指定した要素がIE6消えたら一緒にposition:relativeを指定してみようテスト。</title>
<meta http-equiv="Content-Style-Type" content="text/css" />

<style type="text/css">
/* レイアウト */
*{
padding:0;
margin:0;
}
#contents {
  padding:30px;
  margin:30px;
  width:480px;
  background:#d7d7d7;
}
.topics {
  width:480px;
  background:#f3f3f3;
}
dl {
  padding-bottom:1em;
}
dt {
  width:460px;
  background:#09C;
  color:#fff;
  padding:5px 10px;
}
dd {
  margin-top:5px;
}
ul {
  padding-left:1.5em;
}
li {
  list-style:disc;
}

/* 問題のネガティブマージン */
.negative_margin dt {
  margin-left:-15px;
}
/* 回避策らしいrelative */
.fix dt {
  position:relative;
}

</style>
</head>
<body>
<div id="contents">
  <div class="topics">
    <dl>
      <dt>お知らせですよー / ネガティブマージンなし</dt>
      <dd>
        <ul>
          <li>2010年 - お知らせはありませんよー</li>
          <li>2009年 - お知らせはありませんよー</li>
          <li>2008年 - お知らせはありませんよー</li>
        </ul>
      </dd>
    </dl>
    <dl class="negative_margin">
      <dt>お知らせですよー / ネガティブマージンあり</dt>
      <dd>
        <ul>
          <li>2010年 - お知らせはありませんよー</li>
          <li>2009年 - お知らせはありませんよー</li>
          <li>2008年 - お知らせはありませんよー</li>
        </ul>
      </dd>
    </dl>
    <dl class="negative_margin fix">
      <dt>お知らせですよー / ネガティブマージン position:relative;あり</dt>
      <dd>
        <ul>
          <li>2010年 - お知らせはありませんよー</li>
          <li>2009年 - お知らせはありませんよー</li>
          <li>2008年 - お知らせはありませんよー</li>
        </ul>
      </dd>
    </dl>
  </div>
  <!-- / #contents -->
</div>
</body>
</html>

試してる間にposition:relative;使っても見切れるのを回避できないネガティブマージンにも出会ったけど、そうなったらおとなしく親要素のpaddingやmarginでレイアウトした方がいいと思った。

]]> http://blog.sakurachiro.com/2010/09/negative-margin-ie6/feed/ 0 画像置換(背景置換)するっス http://blog.sakurachiro.com/2010/09/image-replacement/ http://blog.sakurachiro.com/2010/09/image-replacement/#comments Thu, 02 Sep 2010 14:57:21 +0000 まこと http://blog.sakurachiro.com/?p=2083 画像置換用画像

前置き(おもひで)

なんでもかんでもcssでやりたがる時代の終わり頃に、text-indentに負の値を指定してテキストを画面外に飛ばし背景画像のみを表示させる画像置換(Image Replacement)が流行りました
(FirefoxのアドオンWeb Developerでcssを外したりして、文字だけのシンプル(質素)な表示になるコーディングに喜びを感じてた人も居たはず)。

その方法のメリットはうろ覚えだけどjavascriptを使わずにロールオーバーを作れて、音声ブラウザにも読み上げられて、”画像にalt”より”生のテキスト”の方がSEOに有利なんじゃないかとかそんな感じでしたっけ？

デメリットは、印刷設定で”背景を印刷しない”になっている(印刷用cssも用意されてない)場合に置換した部分が印刷されなかったり、画像無効css有効なブラウザブラウザだと画面外に飛ばしたテキストも背景も表示されないなど、これで不具合でるのって特殊な環境だからたいしたデメリットでもないよね？仕方ないよね？みたいな扱いだったような。

その後SEO界隈のtext-indentに負の値てスパムになるんじゃない？みたいな話題が絡んで、altをちゃんと入れておけばわざわざ画像置換しなくてもいいらしいですぜとか、jQuery便利！javascriptを自分でoffにしてる人の事なんてしったこっちゃないよ(最低限の情報が表示されれば問題ない)的な風潮になってcssで画像置換する機会が減ったり減らなかったりの毎日で、今の主流はどんな感じなんでしょうか。

とりあえずtext-indentさせずに画像置換するメモ

appleのサイトで使ってる感じのheight:0;overflow:hidden;paddingでやるやつ。

<p id="irsample1">乱雑モックアップ</p>

#irsample1{
width:480px;/*画像の横幅;*/
height:0;
padding-top:100px;/*画像の高さ;*/
overflow:hidden;
background:url(画像url) no-repeat;
}

背景画像で置換した表示結果

乱雑モックアップ

上記使用font / セプテンバー-教漢（無料お試し版）

(関係ないけどURLはURIの一部だから今までのURLはURIと書くのが正しいような事を聞いた気がするけどbackground:urlなんですよね、これはなぜだろう、うちの勘違いなだけでしょうか？)

hoverとactiveを指定してロールオーバーさせる

<p id="irsample2"><a href="#">乱雑モックアップ</a></p>

#irsample2{
width:480px;/*画像の横幅*/
height:100px;/*画像の高さ*/
}
#irsample2 a{
width:100%;/*ボタンの横幅*/
height:0;
padding-top:100px;/*ボタンの高さ*/
overflow:hidden;
display:block;
background:url(画像url) no-repeat 0 0;
}
#irsample2 a:hover{
background-position:0 -200px;/*bottomは IE6-7で範囲外のフォントのbottomからになるのでズレる*/}
#irsample2 a:active{
background-position:0 -100px;
}

“hoverとactiveを指定してロールオーバーさせる”の表示結果

乱雑モックアップ

横並びメニューにしてみる / display:inline

<ul id="irsample3">
  <li class="ranzatsu"><a href="#">乱雑</a></li>
  <li class="mock"><a href="#">モック</a></li>
  <li class="up"><a href="#">アップ</a></li>
</ul>

#irsample3{
width:480px;/*画像の横幅*/
height:60px;/*画像の高さ*/
padding:0;
margin:0;
}

#irsample3 li{
display:inline;/*ie6-7*/
}
#irsample3 a{
float:left;
width:160px;/*ボタンの横幅*/
height:0;
padding-top:60px;/*ボタンの高さ*/
overflow:hidden;
display:block;
background:url(画像url) no-repeat;
}

#irsample3 .ranzatsu a{
background-position:0 0;
}
#irsample3 .mock a{
background-position:-160px 0;
}
#irsample3 .up a{
background-position:-320px 0;
}

#irsample3 .ranzatsu a:hover{
background-position:0 -60px;
}
#irsample3 .mock a:hover{
background-position:-160px -60px;
}
#irsample3 .up a:hover{
background-position:-320px -60px;
}

“横並びメニューにしてみる / display:inline”の表示結果

横並びメニューにしてみる / float:left

/*clearfix追加*/
#irsample4{
/zoom:1
}
#irsample4:after{
content:'';
display:block;
clear:both;
height:0;
}

#irsample4 li{
/*display:inline; 削除してfloatに変更*/
float:left;
}
#irsample4 a{
/*float:left; 必要ないので削除*/
width:160px;
height:0;
padding-top:60px;
overflow:hidden;
display:block;
background:url(http://blog.sakurachiro.com/wp-content/uploads/2010/09/20100901-1.png) no-repeat;

}

“横並びメニューにしてみる / float:left”の表示結果

<li>を横並びさせる場合、display:inline+floatとfloat+clearfixはどっちが定番なんだろう？

追加

縦並びメニューにしてみる

htmlは同じで横並びメニューのcssから以下の部分を削除するだけでいいはず。

#irsample5 li{
display:inline;
}
#irsample5 a{
float:left;
}

全部書くとこんな感じ

#irsample5{
width:160px;
height:180px;
}

#irsample5 a{
width:160px;
height:0;
padding-top:60px;
overflow:hidden;
display:block;
background:url(http://blog.sakurachiro.com/wp-content/uploads/2010/09/20100901-1.png) no-repeat;

}
#irsample5 .ranzatsu a{
background-position:0 0;
}
#irsample5 .mock a{
background-position:-160px 0;
}
#irsample5 .up a{
background-position:-320px 0;
}

#irsample5 .ranzatsu a:hover{
background-position:0 -60px;
}
#irsample5 .mock a:hover{
background-position:-160px -60px;
}
#irsample5 .up a:hover{
background-position:-320px -60px;
}

#irsample5 .ranzatsu a:active{
background-position:0 -120px;
}
#irsample5 .mock a:active{
background-position:-160px -120px;
}
#irsample5 .up a:active{
background-position:-320px -120px;
}
]]> http://blog.sakurachiro.com/2010/09/image-replacement/feed/ 0 .psd内のテキストレイヤーからテキストを抽出して.txtファイルに書き出してくれる.jsx http://blog.sakurachiro.com/2010/09/psd2txt/ http://blog.sakurachiro.com/2010/09/psd2txt/#comments Tue, 31 Aug 2010 16:46:02 +0000 まこと http://blog.sakurachiro.com/?p=2080 Bram.us(ファイルのあるサイト)

Bram.us » PS_BRAMUS.TextExport 1.3 – Automatically export all Text layers from Photoshop PSD to a Text file (PSD2TXT)

(レイヤー階層で)下にあるテキストレイヤーから順番にテキストを抽出してテキストファイルに書き出してくれる.jsx

フォルダ階層が深いと処理にものすごく時間がかかって不安になる。
逆にフォルダ階層が浅いとテキストレイヤーの数が多くても結構速く終わる感じがしました
(The quick brown fox jumps over the lazy dog.と書いてあるテキストレイヤーを60程複製したpsdを処理させたらだいたい10～20秒くらいで完了しました)。

複数psdを開いている場合

TextExport has detected Multiple Files.
Do you wish to run TextExport on all opened files?

と聞かれるので、開いているファイル全て処理したいなら「はい」にして
選択してるファイルだけ処理したいなら「いいえ」を選ぶ。

随分昔からあるscriptみたいだけど知らなかったなぁ、あると便利でした。
という事でメモ。

]]> http://blog.sakurachiro.com/2010/09/psd2txt/feed/ 0 iPhoneでストリートビュー http://blog.sakurachiro.com/2010/08/iphone-streetview/ http://blog.sakurachiro.com/2010/08/iphone-streetview/#comments Sun, 29 Aug 2010 04:37:39 +0000 まこと http://blog.sakurachiro.com/?p=2073 なんの気なしにgoogleマップを見ていたら偶然触れたところがストリートビューのボタンだった。
iPhoneでストリートビューを表示できたのかあああ、知らなかったよ。
1年以上プロフィールか何かよくわからんアイコンだと思って触れないようにしてたけど、よく考えたら土地のプロフィールって変だよね。

マップにピン落として
google map

ここをタッチここが赤が光っているならタッチできる

振れるとストリートビューになる。右下の円をタッチするとマップに戻る。
ストリートビュー

]]> http://blog.sakurachiro.com/2010/08/iphone-streetview/feed/ 0 各ブラウザの設定をデフォルトに戻す方法あれこれメモ。 http://blog.sakurachiro.com/2010/08/preferences-reset/ http://blog.sakurachiro.com/2010/08/preferences-reset/#comments Sat, 28 Aug 2010 15:15:16 +0000 まこと http://blog.sakurachiro.com/?p=2066 operaのフォント設定がおかしな感じになってたんだけど(font-familyを設定しないとh1~h6がMS Pゴシックになる *1)
ふとした拍子に設定を変更してしまったからなのか、それともoperaは元々そうゆうものなのか？なんでそんな事になっているのか原因がわからない。
なのでとりあえずoperaのユーザー設定を初期化する方法を探して試してみました。
ついでにfirefoxやchromeやsafariを初期化する方法もメモ。

operaの場合

アドレスバーに以下を入力してenterするとopera6.ini 設定を変更するためのウェブページが開く。

opera:config

Opera の設定ファイルの解説

opera:config fontsにh1～h6の設定がある

fontの設定をデフォルトに戻したかったのでFontsのデフォルトをクリックしてみるとh1~h6はＭＳ Ｐゴシックがデフォルトだったみたい(うちの環境では)。
デフォルトでは何も指定してくれていない方が助かるんだけどな
空白にして保存したらもしかして？と思ってやってみたけど再起動したら空白にする前の設定が復元された。ちぇ。

22,7,0,0,0,0,ＭＳ Ｐゴシック みたいにフォント名の前に数字がズラズラと書いてあるけどその意味は
フォントサイズ,ウェイト / 2(細字)｜4(通常)｜7(太字),イタリック(0｜1),下線(0｜1),上線(0｜1),打消線(0｜1),フォント名 みたい
詳細設定 - font

firefoxの場合

アドレスバーに以下を入力してenterすると設定ページが開く

about:config

しかしopera程わかりやすいものじゃない。

とりあえずフィルタに「font」と入力して状態でソートしたらユーザー設定が上に来た、右クリックしてリセットすると初期化される。

about:configからリセット

もう一つ、セーフモードを通してリセットする方法
設定のリセット

こっちは試してないです。

safariの場合

ブラウザ右上の歯車アイコンに設定のリセットがあるけど、ここからfont設定を初期化できないみたいなので設定ファイルを消す。
C:\Documents and Settings\[ユーザー名]\Application Data\Apple Computer\Preferences\com.apple.Safari.plist を削除(リネーム)

safariを最初に立ち上げた時のムービー(html5css3で出来てるんだっけ？)がまた見れた。

chrome

C:\Documents and Settings\sakura-chiro-haiji\Local Settings\Application Data\Google\Chrome\User Data フォルダを削除(リネーム)
エクステンションやらブックマークとか全て初期化される。

webkit系は任意の設定だけ初期化する簡単な方法がわからんかった。
[追記 / 20100829]
chromeにもfirefoxみたいなabout:～があるんですね
アドレスバー – Google Chrome まとめWiki(サーバの障害対応中らしいのでキャッシュへリンク)

見逃してるだけかもしれないけどピンポイントでフォント設定を初期化する方法は見当たらなかった。

*1
Ctrl+F12(メニュー – 設定 – 設定) – 詳細設定タブ – フォント をみると[見出し<h1>～見出し<h6>]あたりがMS Pゴシックになってる。

]]> http://blog.sakurachiro.com/2010/08/preferences-reset/feed/ 0 コーディングする時のフォントを変えた http://blog.sakurachiro.com/2010/08/coding-font-2/ http://blog.sakurachiro.com/2010/08/coding-font-2/#comments Mon, 16 Aug 2010 10:12:03 +0000 まこと http://blog.sakurachiro.com/?p=2050 ここ数年ずっとメイリオでコーディングしていました。
メイリオはプロポーションフォントなので入力した文字の列がガタガタになるし、「”」(シングルクォート二つ)と「”」(ダブルクォート)の区別が付き辛いです。

メイリオでの表示

しかしアンチエイリアスが掛からないフォントの文字の細さと、等倍フォントがどうにも見づらくてて苦手なため、あえてプロポーションフォントのメイリオを使い続けてきました。
(メイリオは「,」(カンマ)と「.」(ドット)や「:」(コロン)と「;」(セミコロン)の判別はしやすい気がするし)

MS ゴシックでの表示

そんな風にすごく満足してたわけでもないけど、すごく不満があったわけでもなくやってきたというのに、ここにきてなぜか急に等倍フォントを使ってみたくなり(苦手だった食材を時が経って根拠もないのに食べられるようになったんじゃないか?と試したくなる気分に似てる)
メイリオ 『ことば・その周辺』を参考にMeiryoKe_Consoleに変更してみました。

これ。

MeiryoKe_Consoleでの表示

MeiryoKeはメイリオの改造フォントらしいです。
上記サイトに入手方法やら作成方法やらが詳しく載ってます。

他にも
MeiryoKe_Gothicでの表示

しばらく使ってみたけど慣れてきたのでもう少しこのままいこうかと思います。

]]> http://blog.sakurachiro.com/2010/08/coding-font-2/feed/ 0 css3のanimationとtransitionとtransform http://blog.sakurachiro.com/2010/08/css3-animation-transition-transform/ http://blog.sakurachiro.com/2010/08/css3-animation-transition-transform/#comments Sun, 15 Aug 2010 12:59:15 +0000 まこと http://blog.sakurachiro.com/?p=2054 animationとtransitionがcss3のアニメーション用プロパティで
transformは変形用のプロパティ、2Dと3Dは別なのか?一緒なのか?
とりあえずこの3つが頭の中でホットケーキになっちゃうくらいこんがらがっちゃってるので練習。
tで始まるのが多すぎるんだ。

animations

animationプロパティの特徴とか感じた事とか

  • ループ出来る。
  • keyframesを使って細かい設定が出来る。
  • hoverで動かすとマウスが外れた時すぐに初期状態に戻るのが格好悪い。
  • なのでループでずっと動かしているか、javascriptと絡めたりした方がいいのかな？と思ったり

animation使用例

webkit系のブラウザのみ動作します。

  • ease
  • linear
  • ease-in
  • ease-out
  • ease-in-out

ほら、マウスが外れた瞬間ガチっと初期位置にもどるのが格好悪いでしょう？

html

  <div class="ani1 example">
    <ul>
      <li class="ease">ease</li>
      <li class="linear">linear</li>
      <li class="ease-in">ease-in</li>
      <li class="ease-out">ease-out</li>
      <li class="ease-in-out">ease-in-out</li>
    </ul>
  </div>

css

/*キーフレームはアニメーションの設計図みたいなものだと思ってます*/
@-webkit-keyframes 'ani1' {
0% {
-webkit-transform: translate(0, 0);
}
25% {
-webkit-transform: translate(75%, 100%);
}
50% {
-webkit-transform: translate(50%, 50%);
}
75% {
-webkit-transform: translate(25%, 100%);
}
100% {
-webkit-transform: translate(100%, 0%);
}
}

.ani1:hover li {
  -webkit-animation-name: 'ani1'; /*キーフレームを指定*/
  -webkit-animation-duration: 1s; /*処理にかかる時間、単位はs、これは1秒*/
  -webkit-animation-direction:alternate; /*偶数回時に逆再生させる*/
  -webkit-animation-iteration-count: infinite; /*ループ回数の指定、これは無限*/
}

/*animationのイージング*/
.ani1 li.ease {
  -webkit-animation-timing-function: ease;/*イージングの種類*/
}
.ani1 li.linear {
  -webkit-animation-timing-function: linear;/*イージングの種類*/
}
.ani1 li.ease-in {
  -webkit-animation-timing-function: ease-in;/*イージングの種類*/
}
.ani1 li.ease-out {
  -webkit-animationn-timing-function: ease-out;/*イージングの種類*/
}
.ani1 li.ease-in-out {
  -webkit-animation-timing-function: ease-in-out;/*イージングの種類*/
}

animation-timing-functionはkeyframesの中でも指定できたり色んなところに記述できる？

ショートハンドを使ってみる

CSS Animations Module Level 3を参照すると以下の記述でショートハンドになるそうな。

[<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] [, [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] ]*

読み方(w3cが解説に使う記号の意味)がイマイチわかってないけど、.ani1:hover liの指定をショートハンドで書き直すとこんな感じ？
[]内の値が順番関係なしで重複しなければok？
でもそしたらdurationとdelayの区別はどうやってつけてるんだ？先に登場するほうがdurationなのかな。

.ani1:hover li {
-webkit-animation:'ani1' 1s infinite alternate;
}

動作確認

  • ease
  • linear
  • ease-in
  • ease-out
  • ease-in-out

transitions

transitionプロパティの特徴とか感じた事とか

  • ループさせられない。
  • 変更前と変更後の2つをいったり来たりするので手軽に動きのあるロールオーバーメニューが作れる
  • これ好きだな。

transition使用例

  • ease
  • linear
  • ease-in
  • ease-out
  • ease-in-out

html

  <div class="tra1 example">
    <ul>
      <li class="ease">ease</li>
      <li class="linear">linear</li>
      <li class="ease-in">ease-in</li>
      <li class="ease-out">ease-out</li>
      <li class="ease-in-out">ease-in-out</li>
    </ul>
  </div>

css

.tra1 li {
  -webkit-transition-duration: 1s;
}
.tra1:hover li {
  -webkit-transform: translate(100%, 0);
}

/*transitionのイージング*/
.tra1 li.ease {
  -webkit-transition-timing-function: ease;
}
.tra1 li.linear {
  -webkit-transition-timing-function: linear;
}
.tra1 li.ease-in {
  -webkit-transition-timing-function: ease-in;
}
.tra1 li.ease-out {
  -webkit-transition-timing-function: ease-out;
}
.tra1 li.ease-in-out {
  -webkit-transition-timing-function: ease-in-out;
}

ショートハンド

animationsと同じでtransitionsのページを参考に
CSS Transitions Module Level 3

<p>[<‘transition-property’> || <‘transition-duration’> || <‘transition-timing-function’> || <‘transition-delay’> [, [<‘transition-property’> || <‘transition-duration’> || <‘transition-timing-function’> || <‘transition-delay’>]]*</p>

この例だと特に使う必要がないけどこんな感じ？

.tra1 li {
  -webkit-transition: 1s;
}
.tra1:hover li {
  -webkit-transform: translate(100%, 0);
}
/*transitionのイージング*/
.tra1 .ease {
  -webkit-transition-timing-function: ease;
}
.tra1 .linear {
  -webkit-transition-timing-function: linear;
}
.tra1 .ease-in {
  -webkit-transition-timing-function: ease-in;
}
.tra1 .ease-out {
  -webkit-transition-timing-function: ease-out;
}
.tra1 .ease-in-out {
  -webkit-transition-timing-function: ease-in-out;
}

durationがないと上手く動かないな。

もしくはこんな感じ？

.tra1:hover li {
  -webkit-transform: translate(100%, 0);
}
/*transitionのイージング*/
.tra1 li.ease {
  -webkit-transition:1s ease;
}
.tra1 li.linear {
  -webkit-transition:1s linear;
}
.tra1 li.ease-in {
  -webkit-transition:1s ease-in;
}
.tra1 li.ease-out {
  -webkit-transition:1s ease-out;
}
.tra1 li.ease-in-out {
  -webkit-transition:1s ease-in-out;
}

もう少しシンプルな書き方が出来そうだけどなぁ。

transform

animationのkeyframesやtransitionの中で出てきたtransformは要素を変形させるプロパティでFirefoxも3.1から対応してるんですって(-moz-が必要)
参考 / CSS3大接近：第3回　transformプロパティ｜gihyo.jp
skew(ゆがみ)とかscale(拡大)とかrotate(回転)とかあってtransalteは移動。

translate(x座標, y座標)
機能 移動
初期値 0
値 ポジティブ，ネガティブどちらも可
・％
・相対値(emなど)，絶対値（pxなど）
適用できる要素 ・ブロックレベル要素
・インラインレベル要素
継承 なし（親要素に指定しても子要素に継承されません）
記述例 Firefox3.1betaの場合：
・-moz-transoform:translate(xxdeg);
・-moz-transoform:translateX(xxdeg);
・-moz-transoform:translateY(xxdeg);
Webkit系（Safari3.1，Webkit,Google chromeの場合：
・-webkit-transform:translate(xxdeg);
・-webkit-transoform:translateX(xxdeg);
・-webkit-transoform:translateY(xxdeg);

参考

CSS Animations Module Level 3
CSS Transitions Module Level 3

CSS 2D Transforms Module Level 3
CSS 3D Transforms Module Level 3

しかし毎日暑いですねぇ…

]]> http://blog.sakurachiro.com/2010/08/css3-animation-transition-transform/feed/ 0 さくらインターネットのスタンダードプランでphp5.3.3をインストールして使う http://blog.sakurachiro.com/2010/08/sakura-std-php533/ http://blog.sakurachiro.com/2010/08/sakura-std-php533/#comments Fri, 13 Aug 2010 18:59:08 +0000 まこと http://blog.sakurachiro.com/?p=2056 使用したSSHクライアント / index – Terminal Emulator Poderosa
(さくらインターネットの公式で例に挙げられていたので使った、秘密鍵というのを何度チャレンジしても作れなくてログインが面倒くさい)

このサイトを参考にしてインストールしました。

さくらのレンタルサーバーで、php5-mysqli をつかえるようにする覚書。(PHP5.3.0をコンパイルして使う) – れいさ屋

上記サイトに書いてある順番そのまんま入力していくだけでphp5.3.3のインストールに成功した(※コンパイル時のコマンドでmysqlに関係するところを省略したけど)。
サイトが移転したようなので、消えないと思うけど念のため記事を一部引用させていただきます。

※php-5.3.0をphp-5.3.3に変更して使った

作業ディレクトリの作成

mkdir tmp
cd tmp

PHPをダウンロード・解凍

wget http://jp.php.net/get/php-5.3.0.tar.gz/from/this/mirror
tar zxvf php-5.3.0.tar.gz

* TABキーによる補完が利用できます

コンパイル

cd php-5.3.0
./configure --prefix=/home/ --with-config-file-path=/home//www/ --enable-force-cgi-redirect --enable-mbstring --enable-mbregex --enable-calendar --enable-pdo --with-pcre-dir=/usr/local --with-openssl=/usr --with-iconv=/usr/local --with-gd --with-zlib=/usr --with-jpeg-dir=/usr/local --with-png-dir=/usr/local --with-ttf --with-freetype-dir=/usr/local --with-mysql=/usr/local/mysql/5.1 --with-pdo-mysql=/usr/local/mysql/5.1 --with-mysqli=/usr/local/mysql/5.1/bin/mysql_config --enable-soap --with-curl --with-xsl=/usr/local --enable-dom --with-gettext=/usr/local --enable-exif

* の部分は、書き換えてください。
* ミソは、–with-mysqli=/usr/local/mysql/5.1/bin/mysql_config これです。

renice +20 -u
make
make install

使って見るには：

このままでは今回コンパイルしたPHPは、使われることはありません。

ドメインごとに、以下の手順をする必要があります。

・例: www.example.com (/home//www/example.com/)でつかえるようにする場合

mkdir /home//www/example.com/cgi-bin
cp /home//bin/php-cgi /home//www/example.com/cgi-bin/php5.cgi

このようにしてphp-cgiをコピーしたら、~/example.com/ディレクトリ上に、.htaccessを作成します。

内容は、

Action php5-script /cgi-bin/php5.cgi
AddHandler php5-script .php .php5

こんな感じにします。すると、.php拡張子にアクセスを試みた場合、/cgi-bin/php5.cgiでphpコードが実行されるわけです。ちなみに、デフォルトでmysqliは有効になっています。特に設定は弄る必要ないです。
(推奨)php.iniの設定

mbstring.language = Japanese
mbstring.internal_encoding = UTF-8
mbstring.http_input = auto
;mbstring.http_output = UTF-8
mbstring.detect_order = auto

date.timezone = Asia/Tokyo

コイツは、.htaccessと同じディレクトリに設置しましょう。
おわりに

* mysqliに限らず、その他組み込まれていないモジュールについても、この方法でつかえるようにすることができます。詳しくは、php公式サイトあたりをご覧ください。

php.iniの設定のdate.timezone = Asia/Tokyo、これ大事ぽかった。

なんでphp5.3.3をインストールしたかったか、事の経緯

iPhoneのユーザー辞書用にファイルを変換するサイト(ココとかこことか)はphpで作ってて、sqliteをいじったり作成したりするのにPDOクラス(php5.1以降で対応)やらSQLite3クラス(php5.3以降で対応)やらを使ってる。

動作テストはローカルのxamppでやってた(phpのバージョンは5.3.1みたい)。
なのでPDOクラスもSQLite3クラスも問題なく使えてた。

だがしかし、残念な事に作成したphpを実際に走らせるこのサーバーのphpは5.2.13(CGI版)だった(さくらインターネットのスタンダードプラン)。
つまり本サーバーではSQLite3クラスが使えない。

そんな最初に気づいておかなきゃいけない大事な事も気にかけずに、よみと単語の.txtを.sqliteに変換して追加したり作成するphpを作ってローカルでテストして問題なさそうだったので、本サーバーにアップしたらあたりまえのように動かない。

せっかく作ったプログラムがこのままだと使えない。
なのでSQLite3クラスを使えるようにする方法を探す。

PECLのSQLite3拡張モジュールを使えば大丈夫？

PECL :: Package :: sqlite3 :: download

さくらインターネットのスタンダードプランのサーバーにPECLをインストールさせるには、どうもautoheaderとautoconfを弄らないと使えないみたいなんだけど、うちの頭が悪すぎた為にうまいこと設定が出来ずインストール出来なかった。

参考 / さくらインターネットにPECLをインストール [dozo dokuwiki.php]

なので、php自体を5.3以上にしてしまえ！と思ったわけです。

]]> http://blog.sakurachiro.com/2010/08/sakura-std-php533/feed/ 0 段落って難しい。 http://blog.sakurachiro.com/2010/08/paragraph/ http://blog.sakurachiro.com/2010/08/paragraph/#comments Thu, 05 Aug 2010 01:23:52 +0000 まこと http://blog.sakurachiro.com/?p=2053 お恥ずかしい話なんですけど、段落というものがよくわからんです。

わからんといっても、段落には形式段落と意味段落の2種類があることや、それぞれの概念も一応知ってるつもり。
しかしそれでもイマイチ段落というものがどうしたら適切になるのかよくわからんのですよ。

意味段落をフィーリングでしか片付けられない。

わからんわからん言っても少なからず文章は書いてきたわけで、じゃあ今までどうやってきたのか？と過去を振り返ってみるとやっぱりフィーリング。
それと嗜好。

例えばその昔、次のような出来事がありました。

「あんたの書く手紙の文章が誰かに似ていると思っていたんだけどわかった、原田宗典っていう最近はエッセイばっかり書いてるけど小説家の文章に似てるんだ、読んだ事ある？」とたずねられた事があって、「読んだこと無いし誰だかしらん、どこが似ているのか？」と答えたら「大雑把に言うと文章に句読点というか読点があまりないところ」とのこと。

当時はなぜか読点(、)が嫌いだったのと、文章によくわからん勢いを持たせたくて区切りのわからない文章を書いていたので、たしかに上で言われたような書き方をしてた。

不思議な事に、そんな書き方をしていても(日本語で？)紙に書く手紙だと普通に読めてとくに読みづらくなりもしないみたい、言い回しが関係してくるのかもしれないし内容がないからなのかもしれないけど。

けどそのノリでメールを書いたり、フォーラムで質問したり回答したり、blogに文章を書くとこれがうまいこといかない(というか、うまいこといってない手応えを感じる)。
自分でも見づらいし。

徐々にメールは短文になり、質問などは細かく説明するようになって(気力と時間がある時は)文節が長くなって、blogの時はいまだにどうしたらいいのかわからないまま。

でもってWebサイト作成時の話

時代やhtmlの習熟具合によって変化してきた。
なぜなら最初は<p>(paragraph)の存在すら知らなかったので例に漏れず<br>の連続だったような気がするけど、詳しい事は覚えてない。

Web制作とは直接関係ない仕事でWebサイトを編集するようになってから(文章のルールが決められていない場合)は、句点(。)で改行が入ると個人的に見やすいような気がしたので句点ごとに<br>、これが形式段落。
1行分のスペースが開いたら意味段落だと思って<br>の連続で意味段落としてた、多分まだ<p>タグを知らない酷い話。

Web制作の会社に就職して、独学でHTMLを勉強してWeb標準っちゅー流れがある事を知ったり、lintで文法をチェックするようになったり、アメブロによくある改行を多用してるブログに嫌悪感を持つようになったり、観覧者のブラウザサイズは一定じゃないのに何かに合わせて改行をコントロールするのはどうなんだろう？と考えたりしてるうちに<br>を使う事に抵抗を感じるようになって句点(。)ごとに<p>を使うようになる。
しばらくそんな状態でやってきて今も基本は全部<p>だけど、<br>で形式段落、<p>で意味段落か形式段落に落ち着いた感じ。
結局、意味段落はここは意味の繋がりがあるよねってフィーリングのまま。

段落とかパラグラフとか

段落について調べて(検索)していくと、日本語には元々段落というものは存在しなかった的な話があったり面白い(Ted’s Coffeehouse 2: 日本語文章においての段落概念の欠如 (The Lack of the Paragraph Structure in Japanese Writing))

例えば『源氏物語』にはパラグラフ構造がなく、始めから最後までのっぺらぼうに続いており、日本の古典はすべてそうである、といっている。現在印刷されている古典にパラグラフの形が見られるのは、後の編集によるものであろう。

パラグラフって何だろう？

文章の節または段落。みたいな説明をよくみる。
または、トピックであったり、ひとつのテーマだったり、論点だったり主張だったり。

なるほどなぁと思った説明があったので引用させてもらうと。
パラグラフについて書いた外山滋比古。パラダイムのシゲルちゃんじゃないからね。（日本人と西欧人の思考形式の違いかぁ、一応なるほどだけど・・・） – Comments by Dr Marks

確かに「パラグラフとは段落のこと」である。そして、その段落とは文章の区切りであり、字下げ（indentation）や行を空けることによって区切られた文（sentence）のまとまりである。また、それぞれの文のまとまりは、一つ一つの段落の中で意味やアイディアが完結している。したがって、この最後の点が日本語の段落とは様相を異にする。

日本語の段落は、国語学者によって形式段落と意味段落という区別が試みられたように、普通は一つの（外形的・形式的）段落が意味やアイディアを完結することがない。一般的には日本語の段落はすべて形式的な（つまり字下げや行空けがあるだけで）段落に過ぎず、意味やアイディアが完結していない。意味やアイディアが完結するためにはいくつかの形式段落を繋ぎ合わせなければならない。そして、意味としてあるいはアイディアとして一まとまりになった（完結した）段落を無理に意味段落と呼んでいる。

したがって、日本語の見かけ上の段落（形式段落）は短く切れ切れであるが、英語のパラグラフであれば、見かけ上の段落（形式段落）と意味のまとまりの段落（意味段落）が合致するため、日本語の段落よりはるかに長くなる。（英語のパラグラフはすべて意味段落。）どうして日本語の段落が形式的で短いかということについては諸説ある。どうやら、英語の段落のように長い日本語は読みにくくなるらしい。これは確かにそうで、余も日本語のブログの段落は短い形式段落を採用している。

最初の「紙に書いた文章の読みやすさが変わらないようだ」云々は、句読点はないけど見かけ上のまとまりがあったからとか、読んでる人達が段落にこだわりがなかったからとか、短い文章だったからとか、社交辞令だったとかの理由が考えられるのかな？

Webの場合、日本語の段落として扱うより英語のパラグラフとして扱った方が自然ぽい。

パラグラフ・ライティングとトピック・センテンス

そうすると(うちはよく知らないんだけど)英文の定番らしいパラグラフ・ライティングとトピック・センテンスを使えば論理的な文章を自然なマークアップで記述できるようになるのかな？

パラグラフライティングの参考

第３回プロから学ぶ「わかりやすい文章の書き方」
実践！作文研究～メールマガジン・第190号
パラグラフライティングとトピックセンテンス | SEO 検索エンジン最適化 ソーシャルニュース

トピックセンテンスの参考

「トピック・センテンス」とは何か
トピックセンテンス（小論文の書き方）
実践！作文研究～メールマガジン・第194号

問題は

すでにある変更できない(そしてパラグラフ・ライティングとトピック・センテンスを踏まえていない)文章は、どのようにマークアップしたら適切になるのか？
なんだけど、やっぱりフィーリングなの？

]]> http://blog.sakurachiro.com/2010/08/paragraph/feed/ 0 google日本語入力をいれていると、Dreamweaverのコードヒントでcolorやbackground-colorのカラーピッカーが表示されない場合の(当面の)解決法メモ http://blog.sakurachiro.com/2010/07/dreamweaver-codehint-2/ http://blog.sakurachiro.com/2010/07/dreamweaver-codehint-2/#comments Wed, 28 Jul 2010 09:29:00 +0000 まこと http://blog.sakurachiro.com/?p=2047 うちの環境だと、google日本語入力をいれると(使うように設定していると)、Dreamweaverのコードヒントでcolorやbackground-colorのカラーピッカーが表示されなくなってました。
Dreamweaverでcolorやbackground-colorのコードヒントのカラーピッカーが表示されない | 乱雑モックアップ

久しぶりにその時のフォーラムを見ると、Google 日本語入力チームの方がとりあえずの解決策を書き込んでくれてました。
Dreamweaverでcolorやbackground-colorのコードヒントのカラーピッカーが表示されない – Google 日本語入力 公式ヘルプフォーラム

Windows XP Service Pack 3 の Text Service Framework (TSF) の異常動作を回避するために、異常が発生した場合に Google 日本語入力側でフォーカス操作をしています。これによってカラーピッカーが閉じられてしまうようです。
この回避操作を行いませんと Dreamweaver で Google 日本語入力を使用できなくなってしまうため、残念ながら今すぐ対応するのが難しい状況です。

しかし下記の Windows XP Hotfix をインストールしますと、TSF の異常動作自体が発生しにくくなり、したがって回避操作も行わなくなります。カラーピッカーがおそらく表示されるようになると思います。

http://support.microsoft.com/kb/956625

ふむふむなるほど。

やりましょう。

(関係ないけど、@masason 「やりましょう」進捗状況 | SoftBankなんてページが出来てますね)

修正プログラムのダウンロード先

マイクロソフト ヘルプとサポート

メールアドレスを登録すると「ご依頼の修正プログラムのダウンロード リンク」というメールが届くので
そこに記述されているリンクから修正プログラムをダウンロード。

解凍、インストール

適当なフォルダを作ってそこに解凍、しようと思ったらパスワードが掛かってた。
よくみたらダウンロードリンクの真下にパスワードが載ってた、それをコピペして解凍、インストールして再起動。

結果

でてきたー
[image]久しぶりのカラーピッカー

]]> http://blog.sakurachiro.com/2010/07/dreamweaver-codehint-2/feed/ 1 iOS4のユーザー辞書にPCから単語を一括登録する手順 / よみ表示問題解決版 http://blog.sakurachiro.com/2010/07/ios4-user-dictionary-3/ http://blog.sakurachiro.com/2010/07/ios4-user-dictionary-3/#comments Mon, 26 Jul 2010 11:11:10 +0000 まこと http://blog.sakurachiro.com/?p=2028 はじめに

iPhoneのユーザー辞書に、PCから一括登録する話もこれで3回目?
ついに普通に登録して使えるレベルまできました、長かった。

一応テストで10,000語までは一括登録してみました、それで.sqliteの容量が6MBほど(デカイヨ)
あと、「よみ」は70文字あたりまでチェック済。
それ以上の「よみ」を登録するとどうなるかわかりません。

こんな感じで、よみも反映される。

[image]before / after

それでは、脱獄していないiPhone(iOS4)にPCから単語を一括登録する手順を、2通り解説します。

うちの説明が下手だから面倒臭そうに見えるけど実際やることは少しだけなので大丈夫。
所要時間は復元1回と数分です。

作業の流れ

それぞれ辞書ファイルの編集部分がちょっと変わるだけなので、1.2.4.5の手順は前回までと変わらず。

順番 やること 使用アプリ
1 バックアップ作成 iTunes
2 ユーザー辞書関連ファイルのエクスポート iBackupBot
3-1 ユーザー辞書変換と編集 .txtだけで必要ファイルを作成するけど.sqliteの結合は手動な方法
PupSQLite
plist Editor
3-2 ユーザー辞書変換と編集 .txtと抽出した.sqliteが必要だけど.sqliteの結合は自動な方法
plist Editor
4 ユーザー辞書関連ファイルのインポート iBackupBot
5 復元 iTunes か
iBackupBot

使用する3つのアプリ / ダウンロードしておく

[image]iBackupBot for iTunesのアイコン
iBackupBot for iTunes / iPhoneのバックアップを開いて編集できるソフト
iTunes Backup Manager for iPhone 3G, iPhone 3GS, iPod Touch, iPad
[image]PupSQLiteのアイコン
PupSQLite / SQLite3データベースを閲覧・作成・編集するためのソフトウェア
Pup’s Atelier-Software
[image]plist Editor for Windowsのアイコン
plist Editor for Windows / .plistを編集できる
plist Editor for Windows (Freeware)

ユーザー辞書テキストファイルを上記アプリが扱えるように変換するページ

[image]辞書テキストファイルの変換サイト
手順3-1ルートで使用する / UserWords / .txt to .sqlite +
辞書テキストファイルを、Library_Keyboard_UserWords.sqliteに追加する.sqliteと、それを結合するSQL文を出力してLibrary_Keyboard_SerializedUserWords-ja用のテキストを吐き出すページ
[image]辞書テキストファイルの変換サイト
手順3-2ルートで使用する / UserWords / .txt & .sqlite to .sqlite +
iPhoneのバックアップからエクスポートしたLibrary_Keyboard_UserWords.sqliteに直接辞書テキストファイルの中身を追加して Library_Keyboard_SerializedUserWords-ja用のテキストも吐き出すページ

作業開始しませう。

1) iTunesでiPhoneのバックアップを作成。

iPhoneを右クリックしてバックアップ

[image]iPhoneのバックアップを作成

2) 辞書関連ファイルエクスポート

iBackupBotでユーザー辞書関連ファイルを抽出

[image]iBackupBotでエクスポートする2ファイル

必要なのは以下の2ファイルです、頑張って探す。

Library_Keyboard_UserWords.sqlite
iPhoneのユーザー辞書上に表示されるデータを管理してるっぽい
Library_Keyboard_SerializedUserWords-ja(iPhone上で単語を登録しないと出現しない)
このファイルに無い「よみ と 単語」はiPhone上で表示されていても(Library_Keyboard_UserWords.sqliteに登録されていても)変換できない。

両方のファイルにそれぞれ違う形式で「よみ」と「単語」を登録する事でユーザー辞書として機能する。

見つけたらチェックを付けてエクスポート[File] – [Export](ctrl + E)

[image]エクスポートの設定

Export Backed-Up Files というウインドウが開くので
Export only checled file(s). にチェックを入れると
Export with backup information, for import to another backup. が出現、こっちにもチェックが付いている事を確認して[OK]

以下の4ファイルが出力されてたら次へ
[image]exportされたファイルは4つだった。

3-共通) 登録する辞書ファイルの用意

ユーザー辞書に追加する[よみ]と[単語]を準備

次のような、よくあるフォーマットで辞書ファイルを作成しておけば、この後の作業が楽になる。

よみ [Tab か 全角スペース] 単語
よみ [Tab か 全角スペース] 単語
よみ [Tab か 全角スペース] 単語

区切り文字は[Tab か 全角スペース]どちらでも大丈夫だけど、どちらかに統一する。

自分のIMEをテキストファイルに出力したり、顔文字サイトからダウンロードしてきたファイルはだいたいそんなフォーマットになってるハズ。

PCの辞書ファイルをそのまま移行しても、iPhoneでもともと変換できないタイプの『よみ』だともちろん変換できないです(アルファベットなど)

MatsuCon – 顔文字辞書ダウンロードにあるMicrosoft IMEライト版を参考にさせてもらうとこんな感じ。

あうあう	⊂ミ⊃＾ω＾ ）⊃　ｱｳｱｳ!!	顔文字
あせ	(；´Д｀)	顔文字
あせ	:(；ﾞﾟ'ωﾟ'):	顔文字

品詞がついてるけどよみ [Tab か 全角スペース] 単語の順番で始まっていれば大丈夫。
iPhoneでもともと変換できない[よみ]は(英数とか)登録できるけど変換できないので注意。

3-1) .txtからユーザー辞書変換と編集

[Cドライブ直下]に[sqlite]フォルダを新規作成しておくと後の作業が幾分楽になりんす(c:\sqlite)。

手順3で用意したテキストを userwords / .txt to .sqlite +のformで変換します。
無事変換が終了すると左側に3つのリンクが出現するので上から簡単に説明していきます。

plist Editor で Library_Keyboard_SerializedUserWords-ja に『よみ』と『単語』のデータを追加

[image]Library_Keyboard_SerializedUserWords-ja 追加用テキストファイル

[image]plist Editor for Windowsのアイコン plist Editorを起動して Library_Keyboard_SerializedUserWords-ja を開く。

変換サイトのピンク側のリンク先のテキスト(『よみ』と『単語』がにラップされてるもの)を全選択(Ctrl+A)してコピー。

[image]stringでラップされてるテキスト

Library_Keyboard_SerializedUserWords-jaの前にペーストして保存。

[image]stringでラップされてるテキストを/arrayの前へペースト

PupSQLiteで(sql文を使って)Library_Keyboard_UserWords.sqlite(偽物)をLibrary_Keyboard_UserWords.sqlite(本物)に結合

[image]Library_Keyboard_UserWords.sqlite 追加用.sqliteファイル

ダウンロードしてPupSQLiteで中身を確認。
テーブルがZTIUSERWORDだけの.sqliteが出来てるはず。
ZSORTKEY_JAやZSTRINGがずれていたら変換に使ったテキストファイルに不備があるかもしれないです。
変換からアゲインしてください。

[image]Library_Keyboard_UserWords.sqlite 追加用.sqliteファイルの中身

ダウンロードしたsqliteに問題がなければ、iBackupBptでエクスポートしたLibrary_Keyboard_UserWords.sqlite(本物)を開いて以下のSQL文を実行。

attach 'Library_Keyboard_UserWords.sqlite(本物)の絶対パス' AS Library_Keyboard_UserWords.sqliteの名前;
insert into ZTIUSERWORD select * from Library_Keyboard_UserWords.sqliteの名前.ZTIUSERWORD;

Byte[]配列が入ったBLOBを一括でインポートする方法をずっ～と試しててこれでやっと出来た。

パスとかよくわからない場合は、次のzipをダウンロードしてc:\sqliteに保存して解凍すれば、そのまま使えるsql文(add.sql)が中にあるです。

zip

[image]zipダウンロード

これを解凍するとこんな感じ
C:\sqlite\output\[乱数] の中に3ファイル入っているかを確認。
[image]zipの中身

iBackupBptでエクスポートしたLibrary_Keyboard_UserWords.sqlite(本物)を開いて
[image]エクスポートしたLibrary_Keyboard_UserWords.sqlite

PupSQLite上からSQL文(add.sql)を実行。
[SQL文を記入して実行] – [開く] – [解凍したフォルダ内にあるadd.sql]

[image]PupSQLiteからSQL文を使う

上記SQL文実行後、ZPROPERTIESを反映させて結合できた。
[image]SQL文を実行して結合

最後に、テーブル:ZTIUSERWORDのZ_PKの一番大きい数字を、テーブル:Z_PRIMARYKEYのZ_MAXに入力して手順3-1は終了。

ここもSQL文で代入できたらいいんだけど、ZTIUSERWORDの行数は取得できても、カラム(Z_PK)の内容を取得して別テーブルにコピーする書き方がわからんかったので諦めました。

それでは、手順4へ

[image]Z_PRIMARYKEYのZ_MAXに入力

3-2) .txtと.sqliteからユーザー辞書変換と編集

手順3で用意したテキストとiBAckupBotから抽出した本物のLibrary_Keyboard_UserWords.sqliteを、次のサイトで変換します userwords / .txt & .sqlite to .sqlite +

こっちも無事変換が終了すると3つのリンクが出現するので上から簡単に説明していきます。
単語の数が多いと変換にちょっと時間がかかるので(回線の状況によるけど、10,000語を変換するのに大体3～5秒くらいかかるかも)反応がないからって「変換する」を何度もクリックしちゃうとエラーになります、ごめんなさい。

plist Editor で Library_Keyboard_SerializedUserWords-ja に『よみ』と『単語』のデータを追加

手順3-1と同じなので省略。

Library_Keyboard_UserWords.sqlite

手順3-2はsqliteをローカルで編集する必要がないので、そのまま手順4のインポートへ。

(※手順3-2の方が楽チンですけど、Library_Keyboard_UserWords.sqliteをアップロードする事に抵抗がある人の為に手順3-1を作ったのでそちら作業してください。

4) インポート

iBackupBot に戻って [File] – [Import](Ctrl + I) から、Exportしてファイルを保存したフォルダを選んでそこにある2ファイルをimport
[image]importするところ

5) 復元

iBackupBot か iTunesからバックアップデータを復元。画像はiBackupBotからの復元。
[image]復元

ユーザー辞書が反映されたか確認

よみが表示されているか確認してみる

[image] [設定] - [一般] - [キーボード] - [ユーザー辞書を編集…]で確認

おー、入ってる。

※ 登録した単語が表示されない場合は一度キーボードの数を変更してみてください。

変換できるかチェックしてみる。

ついに

ついか

できた

おー、変換候補に表示されてる。

iPhoneから単語を追加しても大丈夫かチェックしてみる

前回はPCから登録した単語が全て消滅したけれど今回はどう?
[image]iPhoneから追加

おー、大丈夫みたい。

というわけで以上で終了です、今度こそ本当にお疲れ様でした(*- -)(*＿ ＿)ﾍﾟｺﾘ

その他

『ユーザー辞書を編集…』を開いても登録した辞書が表示されていない場合

各国のキーボードからキーボードの数を変更すると反映されるみたいです。

[image]キーボードの数を変更する

この作業の後に同期でエラーが出るなら

警告をリセットを試してみるといいかも。

[image]警告をリセット