モカモカ工房 tag:mocamoca.biz,2007-09-12:/blog//1 2008-06-23T06:43:27Z Web関連情報（CSS、SEO、ネットワーク等々） Movable Type 4.1 パスワードの入力に「Virtual Keyboard Interface」 tag:mocamoca.biz,2008:/blog//1.20 2008-06-23T04:19:54Z 2008-06-23T06:43:27Z パスワードなどの入力に便利な、ソフトキーボードを実現するJavascriptがW... モカ
  1. こちらよりJavascript、CSS、Keyboardのアイコンをダウンロードします
  2. ヘッダーにJavascriptとCSSへのリンクを入れます

    <script language="JavaScript" type="text/javascript" src="http://mocamoca.biz/sample/keyboard/keyboard.js"></script>
    <link href="http://mocamoca.biz/sample/keyboard/keyboard.css" rel="stylesheet" type="text/css" media="all" />
  3. フォームを下記のように作ります

     <input type="text" name="password" class="keyboardInput" value="" />
     <input type="hidden" name="hiddenField" />
  4. デモ

virtual_keyboard2.jpg


]]> Firefox3 for Macを入れてみた tag:mocamoca.biz,2008:/blog//1.19 2008-06-18T06:01:49Z 2008-06-18T06:24:40Z Firefox3が正式リリースされたので、早速入れてみました。環境Mac OS1... モカ 環境
  • Mac OS10.4
  • プレファレンス
    /Users/User名/Library/Application Support/Firefox/Profiles/******.default
    ******.defaultというファイルをUSBメモリーに移動し、本来あった場所にはエイリアスを入れている
インストール
  • 公式ページでダウンロードし、イメージファイルからFirefoxのプログラムファイル（単体）をアプリケーションフォルダーに単純コピー
  • Firefoxのプログラムファイルをダブルクリックで起動
  • プラグインの更新を聞いてくるので、更新ボタンを押す
以上で完了。USBメモリーの中のプレファレンスフォルダーの中身を見てみると、多くが上書き更新されていました。
]]> Firefoxプラグイン

]]> Windows起動時「ようこそ」で停止→システムリカバリー（DELL） tag:mocamoca.biz,2008:/blog//1.18 2008-06-12T08:45:11Z 2008-06-12T08:53:40Z 社員が所有するDELLのノートパソコン「Inspiron 1150」が突然、起動... モカ
  1. 起動時に「F8」を押して「セーフモードで起動」を選択
    →カーソルが点滅するだけで、セーフモードで立ち上がらず
  2. WindowsXPのシステムディスクを入れて立ち上げたところ自動的にchkdskが起動。
    →これでも状況は全く変わらず
  3. WindowsXPのシステムディスクから起動し、「r」キーを押してシステムの修復
    →やっとこれでセーフモードで立ち上がるようになった
  4. 「セーフモードとネットワーク」で立ち上げ、ネットワーク経由で必要なファイルをバックアップ
  5. 起動時に「Ctrl」「F11」を一緒に押し、
    1. 「コンピュータの修復」を選択し次へ
    2. 「デル出荷時のイメージに復元」をクリック
    3. リストアが始まり、再起動が完了すると、購入した時点のＰＣ状態に復帰
]]> MacからダブルクリックでWindowsの共有フォルダーを開く tag:mocamoca.biz,2008:/blog//1.17 2008-06-06T06:17:52Z 2008-06-06T06:20:57Z Apple Scriptで実現できますtell application "Fin... モカ
tell application "Finder"
    activate
    try
        set ping_result to (do shell script "ping -c 1 192.168.0.**")
        mount volume "smb://[user名]:[password]@192.168.0.**/[フォルダ名]"
    end try
   
end tell
]]> 検索エンジン用サイトマップ（sitemap）の作り方 tag:mocamoca.biz,2008:/blog//1.16 2008-05-21T07:29:58Z 2008-05-21T08:16:14Z 　検索エンジンにサイトの構造を記したsitemapを登録すると、クローラーがまん... モカ
  1. サイトマップの作成
    1. 注意点
      ファイルは UTF-8 エンコードで作成する必要があります
      サイトマップに含めるURLの数が50,000個を超える、またはファイルサイズが10 MBを超える場合は、複数のサイトマップファイルを作成し、サイトマップインデックスファイルにリストします
    2. サイトマップの種類
      1. ブログのRSS2.0、Atom 1.0 のフィードをそのまま利用
        →簡単ですが、最新記事しか提供できないという難点があります
      2. テキストにURLを並べる
      3. サイトマッププロトコルに基づいたサイトマップの作成
        →同じファイルをsitemaps.org のメンバーである MSN や Yahoo! などの他の検索エンジンに送信することが可能

        ◇形式　※繰り返し

        <?xml version="1.0" encoding="UTF-8"?>
        <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
        ┌<url>
        │   <loc>http://mocamoca.com/index.html</loc>
        ※   <lastmod>2007-04-08</lastmod>
        │   <changefreq>daily</changefreq>
        │   <priority>0.7</priority>
        └</url>
        </urlset>

]]>
  • サイトマッププロトコルに基づいたサイトマップの作成

    Googleのサイトにいろいろと作り方が載っています。オンラインのサービスもいろいろとあるようですが、ページ数に制限があったり、広告掲載義務があったりしてあまりよくありません。
    私はとても良いperlのスクリプトを見つけたためそれを使わせいただいています。［Perl site map generator］（こちらのperlsitemapgeneratorについては未確認）

    ◇使い方
    1. 上記のスクリプトをコピーし、適当な名前.cgiで保存します
    2. #!/usr/bin/perl　　　　　　　　　←perlのパスを設定
      my $sitepath="/yourhtdocs";　　　←フルパスを記入
      my $website="http://yoursite.com";　←サイトトップのURLを記入

      ※サイト内にsitemapというディレクトリがあるとエラーになるので、スクリプトの
      open(O,">sitemap");
      unlink("sitemap.gz");
      system("gzip sitemap");
      の3ヶ所のsitemapという名前を適当に変えてあげます

    3. サイトのルートディレクトリにアップし、パーミッションを設定
    4. シェルかブラウザでcgiを起動
      （ブラウザから起動するとサーバーエラーになりますが、ファイルは出来ます）
    5. ルートディレクトリにsitemap.gzという圧縮ファイルが出来るので、それをサイトマップとして登録します
    • ]]>     Yahoo!検索 サイトエクスプローラー（Yahoo!に効率的にサイトをクロールしてもらう） tag:mocamoca.biz,2008:/blog//1.15 2008-05-19T04:06:37Z 2008-05-20T08:40:14Z 　Googleの「ウェブマスター ツール」と同様に、Yahoo！でも自分のサイト... モカ ウェブマスター ツール」と同様に、Yahoo！でも自分のサイトの更新情報を通知してクロールしてもらう「Yahoo!検索 サイトエクスプローラー」というのが出来ました。

    1. 「Yahoo!検索 サイトエクスプローラー」に自分のYahooアカウントでログインします。
    2. 登録したいサイトのURLを入力して「管理サイトに追加」をクリック

      yahoo_1.gif
    ]]>
  • サイトが追加されますので、サイト名をクリックします

    yahoo_2.gif
  • 認証手続き
    最初、サイトが認証されていないので、「サイト認証」タブをクリックして、「認証ファイルダウンロード」をクリックして認証用のhtmlファイルをダウンロードし、それをサイトのルートディレクトリにアップロードします。
    さらに、「認証開始」ボタンを押すことにより通常24時間以内にサイトが認証されます。

    yahoo_3.gif
  • フィードの送信
    「フィード」タブをクリックし、サイトのフィードのアドレスを入力して送信します。
    　RSS 0.9、RSS 1.0、RSS 2.0、Sitemaps、Atom 0.3、Atom 1.0、テキストファイル、圧縮したテキストファイル（gz）が対応しているということです。

    フィードで一番簡単なのはブログなどのRSSフィードです。
    しかし最新の情報しか送ることが出来ません。

    yahoo_4.gif

    サイトマップを登録するのが良いのですが、サイトマップの作り方は後述します...


    • ]]>     Macの任意のフォルダーをWindowsに公開 tag:mocamoca.biz,2008:/blog//1.14 2008-05-16T05:48:17Z 2008-05-16T06:02:57Z 　Macは「Windows共有機能」を使ってWindowsとフォルダーの共有をし... モカ 　任意のフォルダーを共有する方法です。

    1. ターミナルで下記のように入力します

      # cd /etc　　　　　　　　　　（/cdディレクトリに移動）
      # sudo chmod o+w smb.conf　（smbの設定ファイルを書き込み可能にする）
      # vi smb.conf　　　　　　　　（viエディターの起動）
    2. viエディターでsmb.confに設定を追加します

      最終行までカーソルを移動し、［ESC］を押して、vi を確実にコマンドモードにします
      「o」カーソルの次の行に空行ができ、そこにテキストを入力します

      [MP3]
       path = /Volumes/Mac HD/music/mp3
       public = yes
       writable = yes

      ［ESC］を押して、vi を確実にコマンドモードにします
      「wq」保存してvi を終了すします。


    ]]>
  • ここで試しにsmb.confのパーミッションを調べてみると

    # ls -l smb.conf
    -rw-r--rw-   1 root  daemon  1988 May 16 14:24 smb.conf

    で書き込み可能ですね。なので

    # sudo chmod o-w smb.conf

    と入力して書き込み禁止に戻してあげます。

    # ls -l smb.conf
    -rw-r--r--   1 root  daemon  1988 May 16 14:24 smb.conf

    書き込み禁止になりました。
  • Macの［システム環境設定］＞［共有］で一度Windows共有を切り、再度入れます。
  • Windowsのマイネットワークを見ると、見事にMP3フォルダーが共有されました

    Windows

    • ]]>     NHKラジオの「ビジネス英語」シリーズをiPodで聴く方法 tag:mocamoca.biz,2008:/blog//1.13 2008-05-15T08:34:15Z 2008-06-23T08:42:46Z iTMSで買うお金は少々かかりますが、これが一番簡単です。例えば実践ビジネス英語... モカ
  • iTMSで買う
    お金は少々かかりますが、これが一番簡単です。
    例えば実践ビジネス英語5月←iTunesをインストールしている人はクリックしてください。
    131分、一ヶ月分でお値段は1,400円です。
  • radio SHARK 2のような録音機能付きUSB接続AM/ FMチューナーをパソコンに繋げ、留守録でHDDに保存する。
    感度良く入ればなかなか良いのですが、パソコンをその時間つけていなければいけないのがちょっと難点です。
    • ]]>
  • NHKのサイトからダウンロードする
    実践ビジネス英語や入門ビジネス英語のサイトではストリーミングで過去一週間の放送を聴くことが出来ます。
    これをダウンロードしてmp3に変換してしまいましょう。

    1. GetASFStreamとRip!AudiCOをインストールします
    2. ストリーミングのリンク先URLをGetASFStreamに入力し、実行ボタンを押します
      GetASFStream
    3. wmaファイルが出来るので、それを右クリックし、MP3に変換を選びます
      MP3に変換
    4. Rip!AudiCOで「実行」ボタンを押します
      Rip!AudiCO
    5. 出来たMP3ファイルをiTunesに登録します
    6. 放送の内容は「ビジネス英語ディクテーション」というブログにディクテーションがあるので、そこを参照すると便利です
    ]]>     携帯サイトをxhtmlで作る時の文字入力モードの指定方法 tag:mocamoca.biz,2008:/blog//1.12 2008-04-22T05:23:50Z 2008-04-22T05:48:52Z 携帯サイトでフォーム入力をする際、入力モードが自動的に変わるのはPCサイト以上に... モカ input要素の属性で文字入力モードを指定する場合、htmlだと

    1. i-modeとez-web
      • istyle=1 （全角かな）
      • istyle=2 （半角カナ）
      • istyle=3 （英字/半角文字）
      • istyle=4 （数字/半角文字）
    2. softbank
      • mode="hiragana" （全角かな）
      • mode="katakana" （半角カナ）
      • mode="alphabet" （英字/半角文字）
      • mode="numeric" （数字/半角文字）
    　で良かったのですが、xhtmlではこれが機能しません。
    　そこで登場するのが-wap-input-formatです。
    ]]>
  • i-modeとsoftbank
    • style="-wap-input-format:'*<ja:h>'"（全角かな）
      →エスケープすると　style="-wap-input-format:&quot;*&lt;ja:h&gt;&quot;"
    • style="-wap-input-format:'*<ja:hk>'"（半角カナ）
      →エスケープすると　style="-wap-input-format:&quot;*&lt;ja:hk&gt;&quot;"
    • style="-wap-input-format:'*<ja:en>'"（英字/半角文字）
      →エスケープすると　style="-wap-input-format:&quot;*&lt;ja:en&gt;&quot;"
    • style="-wap-input-format:'*<ja:n>'"（数字/半角文字）
      →エスケープすると　style="-wap-input-format:&quot;*&lt;ja:n&gt;&quot;"
  • ez-web
    • style="-wap-input-format:*M;"（全角かな）
    • style="-wap-input-format:*m;"（英字/半角文字）
    • style="-wap-input-format:*N;"（数字/半角文字）

    　という具合になります。
    　これを3キャリア共通にするためには;;で区切ってひとつながりに書くと大丈夫のようです。

    • style="-wap-input-format:&quot;*&lt;ja:h&gt;&quot;;-wap-input-format:*M;"（全角かな）
    • style="-wap-input-format:&quot;*&lt;ja:hk&gt;&quot;;-wap-input-format:*M;"（半角カナ）（ez-webは半角カナはなし）
    • style="-wap-input-format:&quot;*&lt;ja:en&gt;&quot;;-wap-input-format:*m;"（英字/半角文字）
    • style="-wap-input-format:&quot;*&lt;ja:n&gt;&quot;;-wap-input-format:*N;"（数字/半角文字）
    ［参考サイト］
    ]]>     Firefoxの環境（profile）を共有 tag:mocamoca.biz,2008:/blog//1.11 2008-04-17T02:43:21Z 2008-04-17T05:05:04Z Firefoxの環境を異なるパソコンで共有する方法について調べてみました Goo... モカ
    1. Google Browser Sync
      • Firefoxの拡張機能
      • 共有可能項目：ブックマーク、履歴、クッキー、パスワード、開いているタブとウインドウ
      • 保存先：サーバー
      • Mac OS XやWindowsなどが混在している環境でも大丈夫
      • ダウンロード
      • 使い方
    2. The Bookmark Synchronizer
      • Firefoxの拡張機能
      • 共有可能項目：ブックマーク
      • 保存先：サーバー
      • Mac OS XやWindowsなどが混在している環境でも大丈夫（たぶん）
      • 使い方
      • ダウンロード
    ]]>
  • profileフォルダーをUSBメモリーで共有
    • 私が愛用している方法
    • 共有可能項目：ブックマーク、履歴、クッキー、パスワード、開いているタブとウインドウ、アドオン、設定など全て
    • 保存先：USBメモリーなどの外部記憶装置。サーバー
    • Macのみ
    • 長所：シンクロする必要なし
    • 短所：外部記憶装置にアクセスするため少し遅くなる
    • 使い方
      /Users/User名/Library/Application Support/Firefox/Profiles
      の中にあるprofileのフォルダーをUSBメモリーなどに移動し、そのエイリアスを元あった場所においておくだけ
      （参考：同じように私はenrourageのメールデータもUSBメモリーに入れて共有しています）
    ]]>     Macでofficeを入れたらDreamweaverとFirefoxのフォント（括弧など）が変になった tag:mocamoca.biz,2008:/blog//1.10 2008-04-11T01:59:20Z 2008-04-11T02:11:40Z Macを（今さらながら）10.3（panther）から10.4（Tiger）にア... モカ そうしたら、突然DreamweaverやFirefoxでフォント（括弧やアルファベット）の表示が変になってしまいました。

    こんな感じです
    Firefoxの変なフォント
    一体これはどうしたのでしょう！
    いろいろと調べたら、「ヒラギノとＭＳ Ｐゴシックとメイリオの悩ましい関係」に
    「マイクロソフトofficeを入れたMacではCSSでのフォントファミリーの設定によってはＭＳ　Ｐゴシックで表示されるようになってしまう」
    ということが書かれていました。
    ]]>
    私は通常フォントファミリーは

        font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", sans-serif;
       
    で設定しています。
    今回officeをインストールした時にＭＳ Ｐゴシックが入ってしまったため、ヒラギノ角ゴ Pro W3より優先してＭＳ Ｐゴシックが表示されるようになったようです。

    そこでシステム内の「ＭＳ Ｐゴシック」を検索したのですが、出てきません。しかし良く見ると「MS PMincho.ttf」が

    Users:User名:Library:Fonts:

    にありました。
    これを削除したところ直りました。


    ]]>     Dreamweaverの「ビューの切り替え」ショートカット変更 tag:mocamoca.biz,2008:/blog//1.9 2008-04-10T05:42:20Z 2008-04-11T01:12:02Z 　Mac OS10.4.11 TigerでDreamweaver8を使っています... モカ 　Dreamweaverでは「コードビュー」「デザインビュー」を頻繁に切り替えながらページを制作します。
    　この時のコマンドはデフォルトでは「Ctrl+`」なのですが、これがMacでは事実上使えない組み合わせなのです。そこでこれを「Ctrl+Tab」に変更して使っています。

    1. Dreamweaver>キーボードショートカット...　でキーボードショートカットの一覧を出します。
      まだデフォルトのセットを使っている場合は新しいセットを作ります。
    2. 「ビューの切り替え」について、ショートカットを「Ctrl+Tab」に変更します。
      Dreamweaverショートカット
    ]]>
  • /Users/User名/Library/Application Support/Macromedia/Dreamweaver 8/Configuration/Menus
    にMenu.xmlというファイルがありますので、その中でショートカットの定義を下記のように書き換えます

    <menuitem id="DWMenu_View_SwitchViews" platform="mac" name="ビューの切り替え(_S)" key="Ctrl+`" file="Menus/MM/Switch_Views.htm" />

    　　　　　　　　　　　↓
    <menuitem id="DWMenu_View_SwitchViews" platform="mac" name="ビューの切り替え(_S)" key="Ctrl+Tab" file="Menus/MM/Switch_Views.htm" />

    • 　以上で完成です。
    ]]>     Perlモジュール（HTML::Template）のインストール tag:mocamoca.biz,2008:/blog//1.8 2008-04-02T05:57:16Z 2008-06-23T08:43:33Z Movable Typeを携帯で見られるようにする「MT4i」を仕事先のサーバー... モカ Movable Typeを携帯で見られるようにする「MT4i」を仕事先のサーバーにも入れたのですが、本体のCGIファイルである　mt4i.cgi　を動かそうとすると、Internal server errorになってしまいました。

    そこでシェルでmt4i.cgiを動かしてみたところ

    [root@sv mt]# perl mt4i.cgi
    Can't locate HTML/Template.pm in @INC (@INC contains: ...（後にディレクトリ名が延々と続く）

    というエラーが出ました。
    どうやら Templateというperlのモジュールがないようです。
    よくよくMT4iのインストール説明文を読んでみると、確かにHTML::Templateが必須だと書いてあります。

    ]]> こちらのサイトにenvironment.cgiというサーバー環境を調べるスクリプトがあったので、それをサーバーに入れて動かしたところ

    ./mt/mt333/lib/MT/Template.pm
    ./mt/mt333/extlib/HTML/Template.pm
    ./mt/extlib/HTML/Template.pm
    ./mt/lib/MT/Template.pm

    という結果が出ました。
    これは、Movable Typeのプログラムディレクトリの中にはTemplate.pmがああるということを意味しています。
    しかしMT4iではmtの中のTemplate.pmは使えないということがどこかに書いてあったため、諦めてちゃんとTemplate.pmをインストールすることにしました。

    しかし困りました。perlのモジュールってどうやってインストールするのでしょう。
    いろいろと調べたところ、このモジュールはCPANというperlのモジュールのライブラリに登録されたモジュール（ "CPAN モジュール" と呼ばれる）だいうことです。

    ◇CPANモジュールのインストール

    1. rootでシェルに入り
      sudo perl -MCPAN -e shell
      と入力します
    2. configrationを手動にするかと聞いてくるのでnoにして自動にします
      Are you ready for manual configuration? [yes] no
    3. cpanが起動されてプロンプトが出るので
      cpan> install HTML::Template
      と入力します
    4. あとは自動的にインストールが進み
      /usr/bin/make install  -- OK
      というメッセージが出ておしまいです
    　これで改めてmt4i.cgiを動かしたところ、無事に動きました。

    ◇参考サイト
    ]]>     スカイプの安全性セキュリティーについて tag:mocamoca.biz,2008:/blog//1.7 2008-04-01T07:58:06Z 2008-04-01T08:50:02Z 　スカイプを業務連絡用に使うにあたり、その安全性について少し調べました。　スカイ... モカ
    　スカイプの公式サイトの情報によると

    1. インターネット上で信号は暗号化されているため傍受されることはない。
    2. スカイプを介したファイルの送受信には、主要ウイルス対策製品によるスキャンが行われる。
    3. ファイアーウォールでポートに穴を開ける必要がない。
    4. プログラムの設定でコンタクト出来る相手を限定出来る。
    　という理由から安全性はかなり高く、そのため会社規模にかかわらず、世界中の会社が経費削減と生産性の向上のためにスカイプを活用している。

    　とのことでした。
    ]]> 　この状態のセキュリティーはスカイプに限ったことではなく、通常のセキュリティー対策に依存することになります。

    　以上のようなことをふまえ、安全性を守るためには

    1. 必ず正規のスカイプサイトからソフトウエアをダウンロードする
    2. パソコンのOSのアップデートを行い最新のものにする
    3. ウィルス対策ソフトを入れ、ウィルス定義ファイルなどを最新のものにする
    4. スカイプソフトウエアを最新のものにする
      スカイプアップデート
    5. 安全性の高いパスワードを設定し、定期的に変更する
      →パスワード変更サイト
    6. 設定で承認するユーザーを限定する
      スカイプセキュリティー設定
    ]]>     Movable Typeを携帯でも見られるように、「MT4i」の導入 tag:mocamoca.biz,2008:/blog//1.6 2008-03-28T02:08:14Z 2008-03-28T06:49:56Z 　Movable Typeを携帯でも見られるようにする「MT4i」を使ってみまし... モカ 　Movable Typeを携帯でも見られるようにする「MT4i」を使ってみました。
    　同じようなシステムには「MT-Mobile」などもありますが、「MT4i」の方が下記のような理由で使い勝手が良いようです。［nextglobaljungle］

    1. 「MT-Mobile」はMovable Typeのプラグインなので、プラグインディレクトリーに本体のcgiプログラムをいれなければいけない。そのため、携帯サイトのURLが長くなってしまう。
      「MT4i」は任意のディレクトリにに本体のcgiプログラムをいれることが出来るため、

      http://mocamoca.com/m/

      といった短いURLに出来る
    2. ページのカスタマイズがかなり自由に出来る
      設定画面でかなり細かい設定が出来る。
      さらに、テンプレートを改造することによって表示もカスタマイズ出来る
    ]]>
  • インストール方法
    1. 「MT4i」サイトの「最新正式バージョン」からファイルをダウンロード、解凍
      解凍後の構成
      • ファイル
        mt4i.cgi（本体）
        mt4imgr.cgi（設定）
        purge_old_cache.pl
      • ディレクトリ
        lib
        plugin
        tmpl
    2. mt4i.cgiとmt4imgr.cgiのperlのパスを設定
    3. Movable Typeのプログラムディレクトリに

      mt4i
        └cache
              └tmpl

      というディレクトリを作成（パーミッションの設定は必要なし）
    4. 解凍したファイルとディレクトリをサーバーの任意のディレクトリの同階層にアップロード（私はhttp://mocamoca.com/m　にアップロードしました）
    5. 「mt4i.cgi」と「mt4imgr.cgi」のパーミッションをプログラムが動くように設定（755、705など）
    6. 「mt4imgr.cgi」にアクセス
      希望のパスワードを入力し、管理画面に入る
      管理画面では、とりあえずMTホームディレクトリ（プログラムディレクトリ）だけは必ず設定。
      保存ボタンを押して設定を保存
    7. 「mt4i.cgi」にアクセスして動作確認
  • 動作イメージ
  • パケット料金
    気になるパケット料金を概算してみました（0.21円/パケットとして計算）
    1. テキストページ：大体4KBとして30パケットほどで6円。
    2. 画像ページ：大体15KBとして120パケットで25円。
    ]]>