refirio.org

エントリー

カテゴリー「制作」の検索結果は以下のとおりです。

TinyMCEの本文へHTMLを挿入

2009/08/08 13:47
カテゴリー：制作, プログラム
タグ：TinyMCE

TinyMCEは高機能なエディタですが、ファイル管理機能がありません。（プラグインとして作成されてはいますがシェアウェアです。）

そこで「freo側で管理しているファイルをTinyMCEの本文へ挿入できれば、ファイル管理のプラグインが無くても大丈夫そう」と思って、本文へ画像タグを挿入する方法を調べたのでメモ。

ちなみに「TinyMCEのツールバーにあるアイコンをクリックすると画像を挿入できる」という方法ではなく、「画面上のボタンやリンクをクリックしたときに画像を挿入できる」という方法です。（前者は、emotionsプラグインとか参考にすれば何とかなりそう。）

以下のコードで、本文に画像タグを挿入できました。

tinyMCE.execCommand(
  'mceInsertContent',
  false,
  '<img src="http://www.example.com/test.jpg" alt="テスト" width="200" height="150" />'
);

これをonclickなどのイベントが実行されたときに呼び出すようにすればOK。上の例は画像タグの挿入ですが、テーブルタグでも定型句でも、何でも挿入できます。

色々な事に応用できそうです。

この記事のURL

TinyMCE設定メモ

2009/08/07 11:55
カテゴリー：制作, プログラム
タグ：TinyMCE

標準機能にはしないと思いますが、現在このブログにはTinyMCEを導入しています。なので、以下のような画面で記事の入力が可能です。

TinyMCEは設定をいじれば色々できそうですが、解りやすい解説サイトが見当たらないので忘れないうちに自分用にメモ。導入方法の解説ページはたくさんあるんだけど…。

現在の設定

tinyMCE.init({
  language: 'ja',
  mode: 'exact',
  elements: 'tiny_mce',
  entities: '38,amp,60,lt,62,gt',
  content_css: '～CSSファイルへのパス～',
  convert_urls: false,
  dialog_type: 'modal',
  plugins: 'advimage,advlink,autosave,contextmenu,fullscreen,inlinepopups,searchreplace,table',
  theme: 'advanced',
  theme_advanced_blockformats: 'p,pre,h4,h5,h6',
  theme_advanced_buttons1: 'bold,italic,strikethrough,|,bullist,numlist,|,table,|,formatselect,|,visualaid,code,fullscreen,help',
  theme_advanced_buttons2: 'forecolor,backcolor,removeformat,|,link,unlink,image,charmap,|,search,replace,|,undo,redo',
  theme_advanced_buttons3: '',
  theme_advanced_toolbar_location: 'top',
  theme_advanced_toolbar_align: 'left',
  theme_advanced_statusbar_location: 'bottom',
  theme_advanced_resizing: true
});

備考

Enterキーを押したら段落…ではなく、ただの改行を入力したい

force_br_newlines: true,
force_p_newlines: false,

… を入力したら … に変換して記録されるなど、余計な変換をしないように

entities: '38,amp,60,lt,62,gt',

URLを http:// から入力したとき、勝手に相対パスに変換されないように

convert_urls: false,

この記事のURL

PHPでディレクトリの内容をリスト表示

2009/04/24 16:34
カテゴリー：制作, プログラム
タグ：PHP

自分用にメモ。

ディレクトリの内容をリストですべて表示するプログラム。記事のツリー表示や全文検索やサイトマップ自動作成などに応用できるかもしれません。

<?php

function get_tree($path)
{ 
  if (!is_dir($path)) {
    return;
  }

  $trees = array();

  if ($dir = scandir($path)) {
    foreach ($dir as $entry) {
      if ($entry == '.' or $entry == '..') {
        continue;
      }
      if (is_dir($path . '/' . $entry)) {
        $trees[$entry] = get_tree($path . '/' . $entry);
      } else {
        $trees[$entry] = $path . '/' . $entry;
      }
    }
  }

  return $trees;
}

function put_tree($trees)
{
  if (!is_array($trees)) {
    return;
  }

  echo '<ul>';

  foreach ($trees as $key => $value) {
    if (is_array($value)) { 
      echo '<li>[d] ' . $key;
      put_tree($value);
      echo '</li>';
    } else {
      echo '<li>[f] '.  $key . '</li>';
    }
  }

  echo '</ul>';

  return;
}

$dir   = './sample'; //sampleディレクトリの内容を表示
$trees = get_tree($dir);

?>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=Shift_JIS">
<title>ディレクトリ表示</title>
</head>
<body>
<?php put_tree($trees); ?>
</body>
</html>

実行すると以下のようにリストタグでツリー表示されます。ディレクトリには [d]、ファイルには [f] が表示されます。

<ul>
  <li>[d] sample1
    <ul>
      <li>[d] sample1-1
        <ul>
          <li>[f] sample1-1-1.txt</li>
          <li>[f] sample1-1-2.txt</li>
        </ul>
      </li>
      <li>[f] sample1-1.txt</li>
      <li>[f] sample1-2.txt</li>
    </ul>
  </li>
  <li>[d] sample2
    <ul>
      <li>[f] sample2-1.txt</li>
      <li>[f] sample2-2.txt</li>
    </ul>
  </li>
  <li>[f] test1.txt</li>
  <li>[f] test2.txt</li>
</ul>

この記事のURL

PHP+GDでサムネイル画像作成

2009/04/23 18:27
カテゴリー：制作, プログラム
タグ：PHP

自分用にメモ。

画像ファイルを元に、サムネイル画像を自動作成するプログラム。
以前メモしたつもりだったけど見当たらなかった…。

<?php

$dir  = 'test/';    //画像格納フォルダ
$file = 'test.png'; //画像ファイル名
$max  = 200;        //サムネイルのサイズ

if (preg_match('/\.gif$/i', $file)) {
  $image = imagecreatefromgif($dir . $file);
} elseif (preg_match('/\.(jpeg|jpg|jpe)$/i', $file)) {
  $image = imagecreatefromjpeg($dir . $file);
} elseif (preg_match('/\.png$/i', $file)) {
  $image = imagecreatefrompng($dir . $file);
}

$width  = imagesx($image);
$height = imagesy($image);

if ($width > $height) {
  if ($width > $max) {
    $new_width  = $max;
    $new_height = ($new_width / $width) * $height;
  } else {
    $new_width  = $width;
    $new_height = $height;
  }
} else {
  if ($height > $max) {
    $new_height = $max;
    $new_width  = ($new_height / $height) * $width;
  } else {
    $new_width  = $width;
    $new_height = $height;
  }
}

$new_image = imagecreatetruecolor($new_width, $new_height);

imagecopyresized($new_image, $image, 0, 0, 0, 0, $new_width, $new_height, $width, $height); //アンチエイリアスなし
//imagecopyresampled($new_image, $image, 0, 0, 0, 0, $new_width, $new_height, $width, $height); //アンチエイリアスあり

if (preg_match('/\.gif$/i', $file)) {
  imagegif($new_image, $dir . 'copy_of_' . $file);
} elseif (preg_match('/\.(jpeg|jpg|jpe)$/i', $file)) {
  imagejpeg($new_image, $dir . 'copy_of_' . $file, 70);
} elseif (preg_match('/\.png$/i', $file)) {
  imagepng($new_image, $dir . 'copy_of_' . $file);
}

imagedestroy($image);
imagedestroy($new_image);

?>

実行すると、ファイル名の先頭に copy_of_ を付加したファイル名でサムネイル画像が作成されます。
imagecopyresized の部分を imagecopyresampled に変更すると、アンチエイリアスが有効になります。

この記事のURL

携帯の絵文字

2009/03/27 17:25
カテゴリー：制作, プログラム
タグ：PHP

仕事か・そうで無いかに関わらず、携帯絵文字については定期的に尋ねられるので、PHP Labo のプログラムを絵文字に対応させてみる。

色々検討した末、MobilePictogramConverter を利用するつもり。
PHP Labo のプログラムはプラグインに対応させているので、プラグインとして絵文字に対応…させようと思ったけど、無駄に複雑になるので組み込み機能にする予定。ただし、MobilePictogramConverter は同封せず、必要なら自分で導入する…。という手順にするつもり。

絵文字を扱う方針は、今のところ

データベースへ保存する際、絵文字はi-modeのバイナリコードとして記録する
データベースの内容を表示する際、絵文字（i-modeのバイナリコード）があれば、キャリアに応じて絵文字を表示
メール送信の際、絵文字はすべて削除する

の予定。もし何か問題が発生したら変更します。

以下、自分用のメモ。

データを受信する際の処理

//PCから投稿されたデータを、i-modeのバイナリコードに変換
$str = '絵文字（i-modeの画像）を含むデータ';
$mpc = MobilePictogramConverter::factory($str, MPC_FROM_FOMA, MPC_FROM_CHARSET_UTF8, MPC_FROM_OPTION_IMG);
$mpc->setImagePath('../img/');
echo $mpc->Convert(MPC_TO_FOMA, MPC_TO_OPTION_RAW);

//i-modeから投稿されたデータを、i-modeのバイナリコードに変換
$str = 'i-modeから投稿されたデータ';
$mpc = MobilePictogramConverter::factory($str, MPC_FROM_FOMA, MPC_FROM_CHARSET_UTF8, MPC_FROM_OPTION_RAW);
$mpc->setImagePath('../img/');
echo $mpc->Convert(MPC_TO_FOMA, MPC_TO_OPTION_RAW);

//EZwebから投稿されたデータを、i-modeのバイナリコードに変換
$str = 'EZwebから投稿されたデータ';
$mpc = MobilePictogramConverter::factory($str, MPC_FROM_EZWEB, MPC_FROM_CHARSET_UTF8, MPC_FROM_OPTION_RAW);
$mpc->setImagePath('../img/');
echo $mpc->Convert(MPC_TO_FOMA, MPC_TO_OPTION_RAW);

//SoftBankから投稿されたデータを、i-modeのバイナリコードに変換
$str = 'SoftBankから投稿されたデータ';
$mpc = MobilePictogramConverter::factory($str, MPC_FROM_SOFTBANK, MPC_FROM_CHARSET_UTF8, MPC_FROM_OPTION_RAW);
$mpc->setImagePath('../img/');
echo $mpc->Convert(MPC_TO_FOMA, MPC_TO_OPTION_RAW);

データを表示する際の処理

//絵文字（i-modeのバイナリコード）があれば、キャリアに応じて絵文字を表示
$str = '絵文字（i-modeのバイナリコード）を含むデータ';
$mpc = MobilePictogramConverter::factory($str, MPC_FROM_FOMA, MPC_FROM_CHARSET_UTF8, MPC_FROM_OPTION_RAW);
$mpc->setImagePath('../img/');
echo $mpc->autoConvert();

メールを送信する際の処理

//絵文字（i-modeのバイナリコード）があれば、すべて削除
$str = '絵文字（i-modeのバイナリコード）を含むデータ';
$mpc = MobilePictogramConverter::factory($str, MPC_FROM_FOMA, MPC_FROM_CHARSET_UTF8, MPC_FROM_OPTION_RAW);
$mpc->setImagePath('../img/');
echo $mpc->Except();

この記事のURL

MySQLのテーブル仕様変更メモ

2009/03/14 20:37
カテゴリー：制作, データベース
タグ：MySQL

個人的にはテーブルの仕様変更コマンドはほとんど使わないのですが、たまにどうしても必要になることがあります。
そして先日、既存のテーブルに手を加える必要が出ました…。これまでその都度調べていたけど、自分が使いそうなものだけメモしておきます。

#「番号」「氏名」「電話番号」を格納できるテーブルを作成
CREATE TABLE address(
  no   INT         NOT NULL,
  name VARCHAR(80) NOT NULL,
  tel  VARCHAR(80) NOT NULL
);

#「読み仮名」を格納する列を追加
ALTER TABLE address ADD kana VARCHAR(80) NOT NULL; #末尾に追加
ALTER TABLE address ADD kana VARCHAR(80) NOT NULL FIRST; #先頭に追加
ALTER TABLE address ADD kana VARCHAR(80) NOT NULL AFTER name; #「名前」の直後に追加

#「年齢」を格納する列を追加
ALTER TABLE address ADD age INT NOT NULL; #末尾に追加
ALTER TABLE address ADD age INT NOT NULL FIRST; #先頭に追加
ALTER TABLE address ADD age INT NOT NULL AFTER name; #「名前」の直後に追加

#「読み仮名」を格納する列を削除
ALTER TABLE address DROP kana;

#「年齢」を格納する列をVARCHAR型に変更
ALTER TABLE address CHANGE age age VARCHAR(80) NOT NULL;

#「年齢」を格納する列の名前を変更
ALTER TABLE address CHANGE age toshi INT NOT NULL;

もちろん、データベース管理ツールを使うのも有効です。

この記事のURL

自宅サーバーのハードディスクが損傷

2009/03/06 10:47
カテゴリー：制作, サーバー

したみたいです。前兆はあったので、遅かれ早かれハードディスクに問題が起こるとは思っていたけど。
以下、前兆の内容。

ログを監視して結果をメールで知らせてくれるツールを導入しているのですが、2009年1月3日に以下の警告がありました。

Device: /dev/hda, FAILED SMART self-check. BACK UP DATA NOW!

「ハードディスクがそろそろ危険だから、バックアップしておけ！」ということみたいです。それ以来、毎日この警告を送ってくるようになりました。

でも、具体的にどれくらいの期間でダメになるのか興味があったので、そのまま利用を継続。で、昨晩「カチカチ」という音がサーバーから聞こえてきました。そして今朝ご臨終…。
サーバーのモニターで直接確認すると、

end_request: I/O error, dev hda, sector 24627341

と表示されていました。ファイルシステムやディスクのセクタが損傷している可能性がある場合に表示されるらしいです。

2008年11月14日から稼動させていましたが、最初の警告までの時間は短かったなぁ…。中古パソコンだから仕方ないか。あと、たまに再起動する以外は連続稼動だから、負担も大きいのでしょう。

さて、復旧はどうするか…。ノートパソコンのハードディスク交換は大変かなぁ…。
まったく急がないので、またそのうちに考えるとします。

この記事のURL

Googleカレンダー携帯用ツール改良

2009/02/14 13:52
カテゴリー：制作, プログラム
タグ：PHP

前に作ったツールは「パケット代を安く！」を重視していたので見た目はイマイチだったけど、定額プランにしたのでデザインもいじってみた。
公式サイトを意識した配色にしています。

また、認証には固体識別情報を使うように改良。アクセスキーも設定したので、使い勝手も良くなりました。満足。

この記事のURL

PHPでファイルダウンロード

2009/02/13 12:50
カテゴリー：制作, プログラム
タグ：PHP

自分用にメモ。

画像やテキストファイルへ普通にリンクすると、クリックしたときに画像やテキストファイルがブラウザ内に表示されます。
以下は圧縮ファイルをダウンロードするときのように、保存先を聞いてくれるようにする方法。

<?php

$image_file = 'sample.gif';

header('Content-Type: application/octet-stream');
header('Content-Disposition: attachment; filename=' . $image_file);
header('Content-Length:' . filesize($image_file));
header('Pragma: no-cache');
header('Cache-Control: no-cache');
readfile($image_file);
exit;

?>

こんなコードを書いたPHPファイルへリンクすると、sample.gif のダウンロードダイアログが開きます。sample.gif はあらかじめアップロードしておきます。画像以外のファイルも同じ方法でOK。また、

<?php

$text_file   = 'sample.txt';
$text_buffer = 'テストメッセージです。';

header('Content-Type: application/octet-stream');
header('Content-Disposition: attachment; filename=' . $text_file);
header('Content-Length:' . strlen($text_buffer));
header('Pragma: no-cache');
header('Cache-Control: no-cache');
echo $text_buffer;
exit;

?>

こんなコードを書いたPHPファイルへリンクすると、sample.txt のダウンロードダイアログが開きます。sample.txt の内容はPHPで動的に作成します。

この記事のURL

携帯での入力モード

2009/02/05 14:29
カテゴリー：制作, HTML+CSS

現在、携帯用ページの入力フォームには、

数値入力欄: istyle="4" mode="numeric"
英数字入力欄: istyle="3" mode="alphabet"

の属性をそれぞれ設定しています。（かなり悩んだ末に。）
これで入力時に自動で数値入力モードや英字入力モードに切り替わるのですが、XHTMLページだとdocomoでは切り替わりません。代わりに style属性を設定する必要があるのですが、今度はsoftbankで正しく入力できなくなる可能性があります…。

詳細は以下のページが詳しいです。

携帯XHTMLでの入力モードのまとめと、ちょっとしたハマりどころについて

上のページにもありますが、

DoCoMo: styleのみ設定
au/SoftBank: istyle、format、modeをすべて設定

というように指定方法を変えるしかないかなぁ…。テンプレート側で「docomoからのアクセスかどうか？」を判別できるようにすれば可能だけど、テンプレートが少しゴチャゴチャしそうな…。

多分上の方法にしますが、もうちょっと調べてみます。

この記事のURL

ページ移動

ページ
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

refirio.org

Menu

エントリー

TinyMCEの本文へHTMLを挿入

TinyMCE設定メモ

現在の設定

備考

PHPでディレクトリの内容をリスト表示

PHP+GDでサムネイル画像作成

携帯の絵文字

データを受信する際の処理

データを表示する際の処理

メールを送信する際の処理

MySQLのテーブル仕様変更メモ

自宅サーバーのハードディスクが損傷

Googleカレンダー携帯用ツール改良

PHPでファイルダウンロード

携帯での入力モード

ページ移動

ユーティリティ

カテゴリー

タグクラウド

検索

過去ログ

Feed