ファンサーブ管理人ブログ

2014年10月26日日曜日

Eclipseを使うことにした

何年か前にIDEってどんなかな？と試してみたことはあったけど、コード書く以前に使い方がさっぱりわからず速却下。
プログラミングといっても自己使用の範囲でしかやらないし、忘れた頃に必要になってちょこっと書くだけだから、いつも文法も関数もリファレンス見て思い出しながらだし、プロが使うようなソフトウェアを導入したところで大したことはできない。つまり混乱するだけ無駄だと納得する経験に終わり、以後ずっとEmeditor（Free版）のお世話になってきた。

ファンサーブの再開に向けていろいろ考えていると、再度のお勉強が必須としみじみ…。回避したいがどうも無理だ。って、初めからわかっていたけれど。
という感じで基礎から勉強を始めることにした。当面はPHPとJavascriptだね。
取っ掛かりの勉強を兼ねてウェブサイトビルダーのようなものを作ってみようかと。以前からやってみたかったけど使い道のないものに対するモチベーションは低いもの、、、。今回はちゃんと使い道があるから（＾＾

そして慣れ親しんだEmeditorでしこしこ書いてみたが、まぁ酷いもので、ちょっと長く書いたりあちこち渡るようなコード書いたりする度にエラー頻発。
現在は自前サーバーをやめて低価格VPSを使っていて、そこのディレクトリをネットワークフォルダに追加してワークスペースとして使っているが、暗号化だし、自前ネットワークに比べるとファイル転送に若干の遅延があり、書いてはエラーでデバッグを繰り返していると、その1秒が非常なストレスに。

せめて構文チェックだけでも同時進行で行いたいと、エディターを探し始め、いくつか試してみたが、ずっと同じエディターを使っていたこともあり、UIに馴染めるものがなくて、いよいよ検索が億劫になっていく中、何度か見かけて素通りしていたEclipse、というよりIDEも、もしかすると以前よりは簡単に使えるようになっていないかと試してみることに。
結果、これが正解。
設定の段階でお目当ての項目がどこにあるのかわからなくて多少悩んだが、設定が終われば断然使いやすい。
本業の方々が知恵を出し合って自分たちで使うものを作るとこんなにいいものができるんだなと感心。ほんと素晴らしいですね。

結局、ローカルで全部やれるのが一番いい。って当たり前なんだけど、xamppを以前使ってたときに重くて嫌になってしまっていたので、ローカルでサーバーを動かすという選択肢を用意していなかった。
当時に比べるとPCのスペックも上がっているし、問題にならないんだよね。

灯台下暗し。

さて、がんばろ・・・

2014年10月17日金曜日

Chromeでアラート ” openWYSIWYG does not support your browser ” への対応

openWYSIWYG v1.4.7

ChromeでopenWYSIWYGを含むページを表示すると、” openWYSIWYG does not support your browser ”と警告が出て、wysiwygが動作しない。

現バージョンでのサポートブラウザーは、

IE 5.5+ (Windows)
Firefox 1.0+
Mozilla 1.3+
Netscape 7+

scripts/wysiwyg.jsを編集して動作可能。
でもサポート外ってことはなにか動作上の支障があるんだろうね。
（画像挿入ができない（画像選択後Submitできない）ことは確認）

※[編集箇所] 2020行目：関数定義 isBrowserCompatible の部分

元の記述

 isBrowserCompatible: function() {
  // Validate browser and compatiblity
  if ((navigator.userAgent.indexOf('Safari') != -1 ) || !document.getElementById || !document.designMode){   
  //no designMode (Safari lies)
     return false;
  } 
  return true;
 },

変更後

 isBrowserCompatible: function() {
  // Validate browser and compatiblity
  //  ↓Chrome警告 "openWYSIWYG does not support your browser." への対応↓
  //  ↓一行コメントアウトした↓
  //if ((navigator.userAgent.indexOf('Safari') != -1 ) || !document.getElementById || !document.designMode){   
  //  ↓一行追加した↓
  if (!document.getElementById || !document.designMode) {
  //no designMode (Safari lies)
     return false;
  } 
  return true;
 },

2014年10月16日木曜日

openWYSIWYG お試し導入

オープンソース（LGPL）のオンラインHTMLエディタ ”openWYSIWYG”のお試し。

ウェブサイト（ダウンロード）：
http://www.openwebware.com/

デモ：
http://www.openwebware.com/wysiwyg/demo.shtml

導入は簡単。
openWYSIWYGは、HTMLフォームのテキストエリア（<textarea>）をエディタとして表示し機能させる仕組みをJavascriptで表現しているプログラム。なので、要領としてはスタイルシートでテキストエリアの見栄えを調整するのと同じ。

配布元よりzipファイルをダウンロード＆解凍
解凍したフォルダごとウェブサーバーへアップロード
openWYSIWYGを導入するHTML文書内に、cssおよびjsファイルの場所と、必要なスクリプトを指定（記述）
<textarea>にidを割り当てる

以上で完了。

詳細は、、、

openWYSIWYGから配布されているzipファイルをダウンロード、解凍後のフォルダ内はこんな感じ。

ウェブサーバーへアップロード後、”example.html”へブラウザからアクセスするだけで3種類のエディタが動作する状態になっているので、エディターとして使うだけならこのファイルを編集してテキストエリアのサイズを変えたり不要な部分を削除するなどしてそのまま利用が可能。
（上から、”Default”、”Full（ツールバーカスタマイズや画像アップロードなど）”、”Small”の３タイプ）

エディタ用のページを新しく作成する場合は、以下のコードをhtmlファイル内に記述。

<head>～</head>の中に


<script language="JavaScript" src="scripts/wysiwyg.js" type="text/javascript"></script>

※ ”Full”や”Small”タイプで利用する場合は下記も追加

<script language="JavaScript" src="scripts/wysiwyg-settings.js" type="text/javascript"></script>

※ 赤い文字の”scripts”の部分はhtmlファイルからみた適正なパスに読み替えてください

さらに、



<script language="javascript1.2"> WYSIWYG.attach('textarea1'); </script>

※ ”Full”や”Small”で利用する場合は上記ではなく下記のように記述



<script language="javascript1.2"> WYSIWYG.attach('textarea1', full); </script>

または、、



<script language="javascript1.2"> WYSIWYG.attach('textarea1', small); </script>

そして、<body><form>内の <textarea> に id="textarea1" を割り当てれば完了。
例として、、



<textarea id="textarea1" name="any" style="width:800px; height:600px;">

サンプル

<html>
<head>
<title>HTMLエディタ</title>
<script language="JavaScript" type="text/javascript" src="scripts/wysiwyg.js"></script>
<script language="JavaScript" type="text/javascript" src="scripts/wysiwyg-settings.js"></script>
<script language="javascript1.2">
WYSIWYG.attach('textarea1');
</script>
</head>

<body>
<div align="center">

<br />
<h1>My Editor</h1>
<textarea id="textarea1" name="any" style="width:800px;height:600px;"></textarea>
<br />

</div>
</body>
</html>

カスタマイズやその他の機能については、解凍したフォルダ内の docs/doc.html を参照。

ひとまずお試しで今日はここまで。
あ、Chromeでの表示は非対応なのでアクセスしても動きません。
Chromeからアクセスしてエディタを使用するためには少しだけjsファイルを編集する必要が…。
次回に書きます。

再チャレンジ

このブログ、
過去の記事をすべて非公開にした。

ようやく気持ちの整理がついたから。
長かったなぁ～。

ファンサーブをもう一度公開しようと思う。
過去の反省を踏まえ、当面できないことは見切りで実行しないようにしなくちゃ。
思いつきの行動で多くの人に迷惑をかけてしまった。申し訳なく恥ずかしい。
その経験を財産として運用していかないと。

それと、運営には意義を持たせたい。
「世のため人のため」は、立派な心がけではあるけれども、趣味程度の意識でそれを言っちゃダメだ。人のために頑張るんだもの、辛いことに遭遇する機会は必ずある。意義を実感していなければ継続困難なこともよくわかった。

さて、さっそくサーバー構築！と気も疾るところだが、まずはプランニングだね。
いや、その前にいろいろ勉強もし直さなきゃ。ノウハウの掘り起こしも。メモどこに保存したっけなぁ～…。なんて次元で前途多難。

来年初めの公開を目標に頑張ってみよう。