-  1 2 3 4 5..  次の5件>>

2012年05月07日

Syntaxhighlighter インストール方法

　プログラミングをテーマにしたプログの場合、自分の書いたコードや設定ファイルの中身を載せたい場合も多い。そんなときにコードをその他の文章と見分けやすく、かっこよく表示してくれるJavascriptのライブラリSyntaxhighlighter。本ブログにもようやく導入したので、導入方法を紹介する。

環境

  • SeeSaaブログ
  • syntaxhighlighter 3.0.83

ダウンロード

　本家サイトより最新版をダウンロードできる。無料ブログサービスなどを利用していてファイルをサーバにアップロードできない場合はhosted versionを使用できる。

導入方法

headタグ下にコピー

　上記は必須ファイル＆デフォルトファイルでの場合。 ハイライト部分の見た目はshThemeDefault.cssをその他のcssに替えることでバリエーションがある。
　設定部分は

  • SyntaxHighlighter.config.tagName = "code";…ハイライトするコードの囲みタグにを使用する。
  • SyntaxHighlighter.config.stripBrs=true;…行末に改行タグがある場合無視する。（改行文字で改行）
  • SyntaxHighlighter.config.bloggerMode=true;…「ブログで使う人はこれ」っとのこと。。。

autoloaderについて

　HTML,javascript,PHP・・・それぞれでbrushファイルが別になっているため、一つのサイト（ブログ）内で様々な言語のサンプルコードをハイライトしたい場合は、すべてのbrushファイルを全ページのheadタグで指定する必要がある。しかしサイト全体でheader部分を共有している場合、ページによってはサンプルコードの言語以外のbrushファイルは必要ない(loadするだけ時間の無駄だ）。

　autoloaderはそういう問題を解決する。コードのタイプと対応するbrushの組み合わせを定義しておいて、いざサンプルコードがレンダリングされるときに実際のbrushファイルをロードする。（必要になったときに初めて読みこむ、rubyのlazy loadみたいだ。）この方法なら使用されないbrushファイルが実際読み込まれることはない。

　がしかし、利用する場合、本家サイトにあるautoload用サンプルコードをコピー＆ペーストすればよいが、ペースト箇所はDOM上でハイライトしたい箇所の後に評価されるようにしなくてならない。サンプルではhtml閉じタグの直前になっている。しかし、scriptタグやcss読み込みのlinkタグをこの場所に書くのはHTMLのスタンダート的によくない模様。http://validator.w3.org/でチェックするとエラーになる。。。SEO的によくない影響があるかも！？

タグ：JacaScript SyntaxHighlighter
【ITの最新記事】
posted by goy at 00:23 | Comment(0) | TrackBack(0) | IT | このブログの読者になる | 更新情報をチェックする

2012年05月04日

jQueryを使ってJavascriptで動的にHTMLを書くとCSSが適用されなかった件

　PhoneGapでアプリ作成中にこの現象に遭遇。
　やろうとしたことは、ulの子としてに複数のｌiをいれる　というもの。通常のサーバサイドのWebアプリケーションならPHPなりでできるが、PhoneGapなので動的なことはJavascriptでやるしかない。
　単純なよくある処理のはずがJavascriptでいれた子nodeだけが表示がずれてしまった。

　原因はJavascriptの実行とCSSの適用のタイミング。
　
　はじめ $(document).ready から子のコピー処理が呼び出されるようにしていたが、redayイベントが発火するときはcss適用済みで、その後追加されたDOMにはcssは適用されない模様。scriptタグ全体をHTMLの下部においてDOMの描画の流れで子のコピー処理を行うようにする。


<html>
<body>

</body>



</html>

　最近クライアントサイドだけでなくmongodbのmonogo shellや、node.jsなどサーバサイドで従来PHPなどを使っていた場面もJSになることが出てきたような。
タグ：PhoneGap JacaScript
posted by goy at 01:06 | Comment(0) | TrackBack(0) | IT | このブログの読者になる | 更新情報をチェックする

2012年03月25日

Avidemuxでmp4をaviにする場合

デジタルビデオカメラでとった息子の動画を田舎の両親に送るのに、
圧縮しないとやりにくい。

動画はMP4で、圧縮するにはAvidemuxがフリーで使えて便利。

MP4→AVIにするときの設定を備忘録。

Videoを「MPEG-4 AVC」に、
Audioを「MP3(lame)」に設定する。

Audioを「Copy」にしてると、
音声が倍速みたいになる。
タグ：AviDemux
posted by goy at 23:24 | Comment(0) | TrackBack(0) | IT | このブログの読者になる | 更新情報をチェックする

AndroidアプリからFacebookへの投稿に挑戦（１）

表題の件に挑戦中。

作成しているアプリは簡単なものだけど、Facebookに投稿できるのがむしろ主機能。
(foresqurereみたいな感じでやりたい。）

アプリはPhonegapで作っているので、Facebook　apiは
Javascript SDK　が使えるのかなと。

投稿するにもユーザーごとのIDはいるのでまずはFacebookにログインしなきゃだよな。
ここらへんも調べてるがなんだか難しい。
Facebook Developperとかに登録したりとかして、こんなに手間いるのかな〜。
世界規模のサービスだからかなぁ。



タグ：Facebook android
posted by goy at 00:05 | Comment(0) | TrackBack(0) | IT | このブログの読者になる | 更新情報をチェックする

2012年03月04日

display:none→blockにしたAタグのアニメーション

　何回かタップするとボタンが表示されてそのボタンを押すと
画面が遷移する　っという簡単なアプリを作ろうとおもったが、
タップ表示されるボタンを押した後の画面遷移がどうも遅い。。。


　非表示はもちろんdisplay:noneでするわけで、タップ回数が一定回数
になるとjavascriptでdisplay:blockにしてボタンが表示されるんだけど、
ボタン押したあとの遷移が始まるまでにどうも時間がかかる。


　いろいろサンプルつくってみて試してみたが、非表示のものを表示化したり、
位置がかわったりするタグのイベント反応はどうも遅い。変化後ちょっと時間
かかるのかな。だとするとjavascriptでのタグ位置変更とかは使いづらいな。

　む〜。
タグ：PhoneGap javascript
posted by goy at 18:28 | Comment(0) | TrackBack(0) | IT | このブログの読者になる | 更新情報をチェックする
-  1 2 3 4 5..  次の5件>>