タグ

ブックマーク / blog.webcreativepark.net (14)

  • MovableTypeにお問い合わせフォームを設置

    MovableTypeにお問い合わせフォームを設置 MovableTypeにお問い合わせフォームを設置できるメールフォームプラグインをご紹介。 インストール ダウンロードしたMailForm_1_30.zipを解凍すると、MailFormというディレクトリが作成されます。 FTPでMovableTypeをインストールしたサイトにアクセスして、解凍したMailFormディレクトリをpluginsディレクトリにアップロードします。 MailForm内のmt-mail-form.cgiのパーミッションを変更します。(755とか700に) テンプレートの作成 ヘッダーメニューのデザイン > テンプレート から「ブログのテンプレート」へ。 『インデックステンプレートを作成』から新規にテンプレートを作成します。 メールフォームを表示したい箇所に以下のような記述を行います。 出力ファイル名(これがお問い

    MovableTypeにお問い合わせフォームを設置
  • ふつうのリロード対策

    一般的な登録フォームの画面遷移は、 入力画面→入力確認画面→完了画面 であるかもしれないけど処理の流れとしては、 入力画面表示処理→入力確認画面表示処理→登録(メール送信)処理→完了画面表示処理 になる。 処理を分けることにより、完了画面でリロードされても、二度も登録処理が行われることはない。 個人的には、完了画面で登録(メール送信)処理を行うのは、あまり好きではない。 登録(メール送信)処理と完了画面表示処理を同一処理上で行おうとすると、面倒なリロード対策を行わなくてはいけない。 それで件のページの内容に行き着く。 すごいリロード対策 件のページの内容が『すごい』というのはCSRF(クロスサイトリクエストフォージェリ)対策を同時に行っている点でしょう。 CSRFは、通常のフローを通らずに登録処理だけを行おうとする攻撃である。コメントスパムなんかがよい例。 CSRF対策としては、『リファラ

    ふつうのリロード対策
  • 絶対に公開してはいけないPHPプログラミング

    絶対に公開してはいけないPHPプログラミング ネタ元:AjaxMail:Ajaxを活用したフリーPHPメールフォーム これはひどいのに誰もつっこみを入れていないので、ツッコミを入れておきます。 セキュリティーフィックスされたました。 AjaxMailを利用しているサイトはスパムメールの踏み台にされます。 送信プログラムであるsendmail.phpの 150行目でPOSTで受け取ったアドレスをそのまま変数に入れて、 $reto = $_POST['email']; 168行目で直接メール関数に利用している。 if($remail == 1) { mail($reto,$resbj,$rebody,$reheader); } ありえない。 mail関数の第一引数には送信先のメールアドレスを設定できるのですが、カンマ区切りで複数のメールアドレスが指定できます。 リターンメールの性質上、リファラ

    絶対に公開してはいけないPHPプログラミング
  • MTカスタムフィールド画像を見えるようにする(推奨)

    MTカスタムフィールド画像を見えるようにする(推奨) ネタ元:MTカスタムフィールド画像を見えるようにする こないだ書いたエントリーが参考先にあげてもらっていうるのですが、このやり方はあまりお勧めできません。(ごめんなさい) で、長谷川さんの書いてるjQueryのもあまりお勧めできない。 Junnamaさんのエントリーでも書かれている通り、MTには標準でカスタムフィールド画像のURLを出力するタグが用意されているので、それを使うのが一番正攻法です。 ちょっとややこしくなるので、めんどくさい方は以下のプラグインがお勧めですよ。 カスタムフィールドによるアップロード画像をサムネイルで表示するプラグイン 0.02 MT4.1のカスタムフィールドで指定した画像を素直なタグで出力する。 カスタムフィールドの取得はMTEntriesコンテナで利用します。 <MTEntries> </MTEntries

    MTカスタムフィールド画像を見えるようにする(推奨)
  • MTのカテゴリー操作 色々

    MTのカテゴリー操作 色々 Movable Typeでカテゴリーを操作する際の方法です。 カテゴリーの一覧 いたってノーマルにカテゴリーの一覧の取得 <ul> <MTCategories> <li><a href="<$MTCategoryArchiveLink$>"><MTCategoryLabel></a></li> </MTCategories> </ul> 特定のカテゴリーのサブカテゴリーの一覧 ある特定のカテゴリーのサブカテゴリーの一覧を取得する時 <ul> <MTCategories> <MTIfCategory name="特定のカテゴリー"> <MTSubCategories> <li><a href="<$MTCategoryArchiveLink$>"><MTCategoryLabel></a></li> </MTSubCategories> </MTIfCategor

    MTのカテゴリー操作 色々
  • Movable Typeのタグ入力を簡単にするtagSupportプラグイン

    Movable Typeのタグ入力を簡単にするtagSupportプラグイン MTのタグ入力をサポートするtagSupportプラグインを作成しました。 タグ入力欄の下に、今まで利用したタグの一覧が表示されますので、今まで利用したことがあるタグはクリックで入力が可能です。 tagSupportプラグインをダウンロード ダウンロードしたtagSupport.zipを解凍し、tagSupport.plをmtディレクトリ内のpluginsにアップしてください。 ライセンスはGPLで配布しますので、自由にご利用ください。 MT4.1とFirefox2/IE7で動作検証は行っております。 不具合等ありましたらご連絡ください。 関連エントリー MTの編集画面にカラーピッカーを付けるcolorEditorプラグイン MTのテンプレート開発で再構築を不要にするfastDevelopmentプラグイン Mo

    Movable Typeのタグ入力を簡単にするtagSupportプラグイン
  • ブロックレベル要素の高さを揃えるheightLine.js[to-R]

    ブロックレベル要素の高さを揃えるheightLine.js Web標準の日々のグループディスカッションで出たライブラリ案を作っていく企画、第一弾。 ブロックレベル要素の高さを揃えるjsライブラリを作ってみました。 このライブラリは新バージョンがあります。 レスポンシブWebデザインに対応した「jquery.heightLine.js」 CSSでは複数のブロックレベル要素の高さを揃えれないという問題があります。 このheightLine.jsは、複数のブロックレベル要素の高さを揃える事ができ、2カラムレイアウトや3カラムレイアウトのそれぞれのカラムの高さを揃えたり、複数のブロックレベル要素をfloatで配置する際の高さを揃えたりできる、便利なライブラリになります。 設置方法 head要素内にダウンロードしたheightLine.jsを読み込みます。 <script type="text/ja

    ブロックレベル要素の高さを揃えるheightLine.js[to-R]
  • 一番簡単な画像置換の方法-imageReplace.js--とあるWEBクリエイターのblog

    一番簡単な画像置換の方法-imageReplace.js- 画像置換は設置がややこしく。 デメリット・メリットの切り分けが困難です。 そんなわけで一番簡単な画像置換の方法として、画像置換javascriptライブラリ-imageReplace.js-を作ってみました。 設定は簡単head要素内にimageReplace.jsを読み込むだけ。 <script type="text/javascript" src="./imageReplace.js"></script> あとは、画像置換したい要素にclass属性に『imageReplace』と記述しスペースを空けて『置換する画像名』、『ロールオーバーする画像名』を記述します。 例えばこんな感じに。 <a class="imageReplace ajax_a.gif ajax_b.gif" href="/ajax/">Ajax</a> 『ロー

    一番簡単な画像置換の方法-imageReplace.js--とあるWEBクリエイターのblog
  • min-width,max-width,min-height,max-heightをIEで使えるようにするjavascript[to-R]

    min-width,max-width,min-height,max-heightをIEで使えるようにするjavascript minmax.jsはIE6以下でmin-width,max-width, min-height , max-heightのプロパティを利用可能にするjsライブラリになります。 CSS2では以下のプロパティが定義されているがIE6には実装されていない。 max-width - 要素の横幅の最大値を指定する min-width - 要素の横幅の最小値を指定する max-height - 要素の高さの最大値を指定する min-height - 要素の高さの最小値を指定する minmax.jsはこれらのプロパティを利用可能にするjsライブラリです。 設置方法 設置方法はダウンロードしたminmax.jsをhead要素内などで読み込むだけです。 <script type="

    min-width,max-width,min-height,max-heightをIEで使えるようにするjavascript[to-R]
  • プログラムのコードを配色する「google-code-prettify」

    プログラムのコードを配色する「google-code-prettify」 google-code-prettifyはプログラムのコードに色を付けるJavaScriptライブラリになります。 CやJava, Python, SQL, HTML, XML, CSS, Javascript,Ruby, PHP, Perlなど様々な言語に対応しております。 設置方法 ダウンロードしたprettify.cssとprettify.jsを読み込みます。 <link href="prettify.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="prettify.js"></script> prettyPrint()を実行します。 配布元ではonloadイベントで追加と説明していますがaddEventL

    プログラムのコードを配色する「google-code-prettify」
  • LightBox風にコンテンツを表示するModalbox

    LightBox風にコンテンツを表示するModalbox ModalboxはLightBox風にコンテンツを表示するjavascriptライブラリになります。 Modalboxを使えば画面遷移することなく、コンテンツを表示する事が可能です。 設定方法 Modalboxはprototype.jsとscriptaculous.jsを利用しています。 ダウンロードしたprototype.jsとscriptaculous.js、そしてmodalbox.jsをhead要素などで読み込みます。 <script type="text/javascript" src="lib/prototype.js"></script> <script type="text/javascript" src="lib/scriptaculous.js"></script> <script type="text/javas

    LightBox風にコンテンツを表示するModalbox
  • ロールオーバーを簡単に実装する-Image Rollover Code-

    ロールオーバーを簡単に実装する-Image Rollover Code- Image Rollover Codeはロールーオーバーを簡単に実装する為のjsライブラリです。 設置方法 配布元のDaniel Nolanのサイトよりrollover.jsを取得し、head要素内などで読み込みます。 <script src="rollover.js" type="text/javascript"></script> ロールオーバーを実装したいimg要素のclass名に『imgover』を指定します。 <img src="sample.jpg" alt="Some Image" class="imgover" /> すでに、他のclass名がつけられている場合は、半角スペース区切りで指定することにより複数のclass名を指定する事が可能です。 <img src="sample.jpg" alt="S

    ロールオーバーを簡単に実装する-Image Rollover Code-
    switchblade
    switchblade 2007/09/26
    ロールオーバーを簡単に実装
  • 半角カナを全角カナに変換するjsライブラリ

    半角カナを全角カナに変換するjsライブラリ 半角カナを全角カナに変換するjsライブラリ『convertKana.js』を作成しました。 携帯用コンテンツなどで、『半角カナ』で入力されることが多いサイトに関してPC上で表示する際に若干見栄えがよくなります。 設置方法 convertKana.jsをダウンロードしてhead要素内などに読み込んでください。 <script type="text/javascript" src="./convertKana.js" charset="UTF-8"></script> charset属性でライブラリの文字コードと整合性を保持しているので、charset属性も忘れずに記述してください。 サンプル でも個人的にはサーバーサイドで処理するのが良いかと思ってたりします。 関連エントリー ブロックレベル要素の高さを揃えるheightLine.js アルファ画像

    半角カナを全角カナに変換するjsライブラリ
  • アルファ画像を扱うalphafilter.jsライブラリ[to-R]

    アルファ画像を扱うalphafilter.jsライブラリ IE6でアルファ画像(透過png)が使えないことにより、コーディングの作業量が大幅に増します。 そこで、IE6で透過pngを扱うjsライブラリを作ってみました。 設定は簡単、head要素内に条件付きコメントを利用してalphafilter.jsで読み込むだけ。 読み込みを高速化させるためdefer属性をの記述を忘れずに行ってください。 <!--[if lte IE 6 ]><script type="text/javascript" defer="defer" src="./alphafilter.js"></script><![endif]--> 透過にしたい画像にclass属性でalphafilterと入れるだけで、なんとIE6でも透過画像の使用が可能になります。 <img src="./sample.png" class="a

    アルファ画像を扱うalphafilter.jsライブラリ[to-R]
  • 1