スタイルシートを切り替えるJavaScript「CssSwitcher」

スタイルシートを切り替える JavaScript に「styleswitcher.js」があります。styleswitcher.js は、おもに文字の大きさを変えたりするのによく使われて便利。JavaScript で link 要素の代替スタイルシート (Alternate stylesheet) を切り替える形で実装している。

またスタイルシートは、フォントサイズ、レイアウト、カラーなど複数のスタイルシートを適用することを仕様で定めている。その場合は、link要素のグループ化 (Preferred style sheet) でできる仕様だが、ブラウザ毎に実装がまちまちのようだ (詳細)。ほか、フォントサイズ×レイアウト×カラーの組み合わせを実現したいが、グループ化では固定されてしまう。別々に設定できない。やろうとすると、それぞれの組み合わせの分だけのスタイルシートを用意するなど管理面でも面倒。

ということで、あらたな設計で「CssSwitcher」をつくってみた。

続きを読む "スタイルシートを切り替えるJavaScript「CssSwitcher」"

mysqldumpでMySQLのデータをバックアップ

MySQLのデータをバックアップ (ダンプ) するにはバックアッププログラム mysqldump を使用します。バックアップで生成したsqlファイルを外部記憶メディアに保存したり、別のデータベースへの移行に活用できます。

以下のコマンドでバックアップします。

データベース全体のバックアップ (オプションに--all-databasesを使用)

mysqldump -u[user] -p[password] --all-databases > backup.sql

または

mysqldump --user=[user] --password=[password] --all-databases > backup.sql

特定のデータベースをバックアップ

mysqldump -u[user] -p[password] [databese] > backup.sql

または

mysqldump --user=[user] --password=[password] [databese] > backup.sql

複数のデータベースをバックアップ

mysqldump -u[user] -p[password] --databases [databese1] [databese2] [...] > backup.sql

または

mysqldump --user=[user] --password=[password] --databases [databese1] [databese2] [...] > backup.sql

特定のテーブルをバックアップ

mysqldump -u[user] -p[password] [databese] [table] > backup.sql

または

mysqldump --user=[user] --password=[password] [databese] [table]> backup.sql

実際にテーブルをバックアップ

CentOSでは、

/usr/bin/mysqldump -uroot -phogegoge --all-databases > backup.sql

MacOSXでは、

/usr/local/mysql/bin/mysqldump -uroot -phogehoge --all-databases > backup.sql

でデータベース全体のバックアップ。

データベースを復元するには

データベース全体の復元

mysql -u[user] -p[password] < backup.sql

特定のデータベースを復元

mysql -u[user] -p[password] [databese] < backup.sql

関連サイト

mod_rewriteでURLに「%2F」が入っているとエラーになる

URLを正規表現で書き換えることができるApacheモジュール「mod_rewrite」。URLをリダイレクトしたり、動的URLを静的URLに見せたりと便利に使える。

が、URLに「%2F」が入っているとエラー (404 Not found) になる。

Apache 2.0.46 以降では、httpd.conf に以下の設定をする

AllowEncodedSlashes On

と回避できる。

httpd.conf が設定できない場合やバージョン 2.0.46 以下のApacheを使っている場合では、事前に「%2F」だけを二重にURLエンコードして「%252F」と施すなどプログラム側で対策を考えたい。

関連サイト

ブログからTwitterにツイートできるJavaScript

Twitterの機能がブログやウェブサイトで使える JavaScriptフレームワーク「@Anywhere」がリリースされたので、触ってみた。

公式ドキュメントを読むと、ログイン・ログアウト (User login & signup) から自動リンク (Auto-linkification of Twitter usernames)、ユーザー情報が表示される Hovercards、フォローボタン (Follow buttons)、自分のウェブサイト上でコメントができる Tweet Box とコミュニケーションができる機能が揃えてある。

よく使いそうなのは、自分のウェブサイト上でコメントができる Tweet Box だろうか。しかし、現時点で「@Anywhere」が用意しているのは、単機能だけだ。Tweet Box だけだと Twitter ユーザでもない方もコメントする恐れもあるし、コメントしたのかどうかのインタラクションもないので、Twitter にログインしていない場合はログインを促して、ログイン状態なら Tweet Box でコメントができるなどユーザビリティ的に統合された一連のフローがほしいところ。

ということで、開発者ではない方にも手軽に設置できるように作ってみた。

流れ的には、
1. Twitter にログインしていない場合は、ログインボタンが表示。

1'. Twitter にログインしている場合は、コメント欄が表示。
2. ログインボタンをクリックしてログイン画面が表示。Twitterのユーザ名とパスワードを入力してログインすると。

3. コメント欄が表示。

4. ツイートすると、「つぶやきを投稿しました」とお知らせ。

設置方法

1. アプリケーション登録とAPI keyの取得

@Anywhere を利用するには Twitter developers からアプリケーションの登録が必要。

とりあえず必要な登録項目は、

  • 「Application Name」 ブログ名で可
  • 「Application Website」 ブログ・ウェブサイトのURL
  • 「あなたの招待状」 ブラウザアプリケーションを選択
  • 「Callback URL」 Application Websiteと同じURLでも可
  • 「Default Access type」 Read & Writeを選択

登録すると、API key が発行される。

2. スクリプトの設定・設置

以下のソースをテンプレートやHTMLに貼り付ける。JavaScript ファイル「twitterAnywhere.js」はダウンロードして設置しても結構です。

<div class="twitter-comments" id="twitter-comments">
<h2 class="twitter-header">Twitterでつぶやく</h2>
<script src="http://platform.twitter.com/anywhere.js?id=YOUR_API_KEY&v=1"
type="text/javascript"></script>
<script src="http://project.thingslabo.com/TwitterAnywhere/twitterAnywhere.js"
type="text/javascript"></script>
<script type="text/javascript">
<!--
TwitterAnywhere.username = 'YOUR_TWITTER_USERNAME';
TwitterAnywhere.loginButtonSize = 'large'; //small | medium | large | xlarge
TwitterAnywhere.TweetBoxCounter = true; //true | false
TwitterAnywhere.TweetBoxWidth = 515;
TwitterAnywhere.TweetBoxHeight = 65;
TwitterAnywhere.TweetBoxContent = "";
//-->
</script>
<div id="twitterLoginButton" style="text-align:center;"></div>
<div id="twitterUser" style="font-size:10px;width:50px;padding-top:27px;float:left;
text-align:center;"></div>
<div id="twitterTweetBox"></div>
<div id="twitterFollowButton"></div>
<br clear="all" />
</div>

設定は以下の7つ。

  • 「YOUR_API_KEY」に取得した API key を設定。
  • 「TwitterAnywhere.username」にあなたの Twitter ユーザ名。
  • 「TwitterAnywhere.loginButtonSize」にログインボタンの大きさ。small , medium , large , xlarge から設定。
  • 「TwitterAnywhere.TweetBoxCounter」にコメントの文字カウント表示の有無。true (つける) , false (つけない) から設定。
  • 「TwitterAnywhere.TweetBoxWidth」にコメント欄のサイズ幅 (px)。
  • 「TwitterAnywhere.TweetBoxHeight」にコメント欄のサイズ高 (px)。
  • 「TwitterAnywhere.TweetBoxContent」にデフォルトで設定するコメント文。

以上で自分のウェブサイト上で Twitter にツイートできる。

関連サイト

Movable Type にはてなブックマークブログパーツをつけてみた

2009年12月25日にリリースされた「はてなブックマークブログパーツ」をブログ Movable Type につけてみた。

ブログサービスをお使いの方は、利用しているブログのボタンを押すだけでコードが取得できる。それを貼り付けるだけ。

Movable Type や WordPress などブログソフトウェアでは、

を参考に以下のコードをブログ記事のテンプレートに貼り付け設置。新しくテンプレートモジュールを作成して管理もいいだろう。

<script type="text/javascript" charset="utf-8" src="http://b.hatena.ne.jp/js/bookmark_blogparts.js">
</script>
<script type="text/javascript">
HBBlogParts.commentInsertSelector = 'div.hateana-bookmark-comment';
HBBlogParts.permalinkSelector = 'div.asset-header h1 a';
HBBlogParts.permalinkAttribute = 'href';
HBBlogParts.permalinkPathRegexp = /\/archives\/\d+\.html$/;
</script>
<div class="hateana-bookmark-comment"></div>

設定は以下の4つが最低限必要。

  • 「HBBlogParts.commentInsertSelector」にコメントが挿入される DOM Element を CSS セレクタで指定。「div.hateana-bookmark-comment」にしてみた。
  • 「HBBlogParts.permalinkSelector」にブログのパーマリンクが記載されている DOM Element を CSS セレクタで指定。標準のままのテンプレートなら「div.asset-header h1 a」で可。
  • 「HBBlogParts.permalinkAttribute」に HBBlogParts.permalinkSelector で取得した要素のどこにブログのパーマリンクの URL が記載されているか属性を指定。
  • 「HBBlogParts.permalinkPathRegexp」にブログのパーマリンクにマッチする正規表現。アーカイブマッピングによって正規表現を調整。

ほかにも細かな設定が可能だ。デザインもスタイルシートで設定できる。

最近の投稿

カテゴリー

アーカイブ