Webアプリ：miukumaukuの開発ブログ：SSブログ

	ブログをはじめるログイン

Webアプリブログトップ
前の10件 | -

HTMLコードテキストをブログ用テキストに変換する小さなWebサービス作りました　 [Webアプリ]

前回の投稿で書いたWebアプリを簡単なWebサービスにしてみました。

WebサービスのURLは、
http://www.yuu.que.jp/tools/html2blogtext/
です。

タグ：WEBサービス

2014-05-28 23:50 nice!(0) コメント(0) トラックバック(0)
共通テーマ：blog

HTMLコードテキストをブログ用テキストに変換するWebアプリを作ってみました　 [Webアプリ]

昨日のSo-netブログでHTMLコードをそのまま書き込めないので、<と>と&を一つ一つ手動で変換していることを書きましたが、とても面倒なので自動で変換するように簡単なWebアプリを作ってみました。

アプリの上部の領域にHTMLコードを入力すると下部の領域に変換したテキストが表示されます。
変換したテキストをコピーすればいいのでとても便利です。
上部の領域でのテキスト入力では、1文字毎に変更する仕様ですのでコードを入力しながら確認して行くことも可能です。
ソースファイルは、index.html、jquery-2.0.0.min.js、script.jsだけです。

index.htmlは以下のようにしてみました。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Convert plain text to HTML safe text</title>
  <script type="text/javascript" src="./jquery-2.0.0.min.js"></script>
  <script type="text/javascript" src="./script.js"></script>
</head>
<body>
  <div id="inputArea">
    <textarea id="input" rows="20" cols="50"></textarea>
  </div>
  <div id="outputArea">
    <textarea id="output" rows="20" cols="50"></textarea>
  </div>
</body>
</html>

script.jsは、CoffeeScriptから生成したファイルです。
script.coffeeは以下のようにしました。

#

## debug
debug = (message) ->
  console.log message

## convertHTMLSafeText
convertHTMLSafeText = (text) ->
  text = text.replace(/&/g, "&amp;")
  text = text.replace(/</g, "&lt;")
  text = text.replace(/>/g, "&gt;")
  $('#output').val(text)
  
## 
$ ->
  $('#input').on 'keyup', ->
    convertHTMLSafeText $('#input').val()

この記事は、当然このWebアプリを使ってコードを生成してペーストして投稿しました。

タグ：webアプリ So-netブログ HTML JavaScript CoffeeScript

2014-05-24 00:00 nice!(1) コメント(0) トラックバック(0)
共通テーマ：blog

フォントビューアWebアプリを制作（その１１）　[Webアプリ]

（その１０）までに以下のようなUI仕様の1.、3.ができました。

1. グリフ一覧のあるグリフをユーザがクリックする
2. クリックされたグリフは選択状態にする
3. クリックされたグリフからUnicodeを取得する
4. すでに右側のプレビュー領域にグリフが表示されている場合は、そのグリフ表示をクリアする
5. 右側の拡大プレビュー領域にクリックされたグリフを表示させる

4.は5.で表示データを上書きにすればよいので、5.を作って行きます。
グリフをクリックでそのグリフの文字コードをidにしたので、そのidを使ってpreview領域に文字を表示させます。

$ -> 
  $(document).on 'click', '.glyph', ->
    debug "<p>&#x00#{@id};</p>"
    html_str = "<p>&#x00#{@id};</p>"
    $("#preview").html(html_str)

jQueryのhtml()を使うと簡単に文字を表示できます。
ダブルクォート内に#{式}を書くと、式を評価した結果が文字列になるので、&#x00xx;の16進数でのコード表記でグリフを表示させます。

グリフをクリックするとクリックしたグリフが右側のプレビュー領域に大きく表示されるようになりました。

（つづく）

タグ：webアプリ JavaScript CoffeeScript

2014-05-22 00:11 nice!(1) コメント(0) トラックバック(0)
共通テーマ：blog

フォントビューアWebアプリを制作（その１０）　[Webアプリ]

グリフ一覧のグリフをクリックしたら、そのグリフを右側に拡大表示するUIを実現したいと思います。
以下のようなUIの仕様で設計して行きます。
1. グリフ一覧のあるグリフをユーザがクリックする
2. クリックされたグリフは選択状態にする
3. クリックされたグリフからUnicodeを取得する
4. すでに右側のプレビュー領域にグリフが表示されている場合は、そのグリフ表示をクリアする
5. 右側の拡大プレビュー領域にクリックされたグリフを表示させる

まず1.を作って行きます。
script.coffeeファイルの各グリフをテーブルに表示する部分をクリックイベントが取れるように<a>タグを張ることにします。
また、クリック時にグリフの文字コード値を取得できるようにidを文字コードに設定しておきます。
文字コード値は変数codeに代入しておいてidや表示用に使用できるようにします。

displayGlyphs = () ->
  html = "<table>\n<tr><th></th>"
  for i in [0..15]
    html += "<th>#{i.toString(16).toUpperCase()}</th>"
  html += "</tr>\n"

  for col in [2..7]
    html += "<tr><td class='col'>U+00#{col}x</td>"
    for in in [0..15]
      code = "#{col}#{i.toString(16).toUpperCase()}"
      html += "<td><a class='glyph' id='#{code}'>&#x00#{code}</a></td>"
    html += "</tr>\n"
  html += "</table>"
  ${#glyphs"}.html(html)

次にグリフのクリック用のイベントハンドラを設定します。
とりあえず、クリックするとidをブラウザの開発ツールのコンソールに出力するようにしてみます。

$ ->
  $(document).on 'click', '.glyph', ->
    console.log @id

うまくidがCoffeeScriptで取れるようなので、仕様の3.はうまく実現できそうです。

因みに、コンソールに出力するconsole.logは少し長いので以下のようにdebug関数を定義すると便利です。

debug = (message) ->
  console.log message

（つづく）

タグ：webアプリ JavaScript CoffeeScript

2014-05-20 22:20 nice!(2) コメント(0) トラックバック(0)
共通テーマ：blog

フォントビューアWebアプリを制作（その９）　[Webアプリ]

（その８）でグリフ一覧の表示ができたので、次はグリフ一覧のグリフをクリックしたらそのグリフをアプリの右側に拡大表示できるようにしたいと思います。

まずは、直接index.htmlに適当なグリフ（例えば「A」）を表示するようにコーディングして、style.cssを編集してレイアウトをして行きます。
index.htmlのid="preview"のsectionに「A」を追加しておきます。

<section id="contents">
  <section id="glyphs">
  </section>
  <section id="preview">
    <p>
      A
    </p>
  </section>
</section>

stlye.cssに以下を追加します。

#preview p {
  font-size: 80pt;
  text-align: center;
  background: #ffe;
}

preview領域に大きい「A」が表示されました。
このレイアウトでグリフ一覧のグリフをクリックしたらそのグリフが表示されるようにスクリプトをコーディングして行きます。

（つづく）

タグ：webアプリ

2014-05-17 23:46 nice!(1) コメント(0) トラックバック(0)
共通テーマ：blog

フォントビューアWebアプリを制作（その８）　[Webアプリ]

（その７）では、グリフ一覧の各列をfor文で表示できることが分かったので、
次はいよいよU+0020〜U+007Fまでのグリフを表示するようにしたいと思います。
各行を範囲2〜7にして変数colに入れ、各列は0から15（0xF）の範囲でiに入れて以下のようにfor文を２重にして各行をhtml変数に追加していきます。

for col in [2..7]
  html += "<tr><td class='col'>U+00#{col}x</td>"
  for in in [0..15]
    html += "<td>&#x00#{col}#{i.toString(16).toUpperCase()}</td>"
  html += "</tr>\n"
html += "</table>"

（その７）で作ったscript.coffeeのdisplayGlyphs関数を以下のように変更します。

displayGlyphs = () ->
  html = "<table>\n<tr>"
  for i in [0..15]
    html += "<th>#{i.toString(16).toUpperCase()}</th>"
  html += "</tr>\n"

  for col in [2..7]
    html += "<tr><td class='col'>U+00#{col}x</td>"
    for in in [0..15]
      html += "<td>&#x00#{col}#{i.toString(16).toUpperCase()}</td>"
    html += "</tr>\n"
  html += "</table>"
  ${#glyphs"}.html(html)

うまくグリフ一覧が表示できるようになりました。

タグ：jQuery CoffeeScript JavaScript webアプリ

2014-05-12 01:36 nice!(1) コメント(0) トラックバック(0)
共通テーマ：blog

フォントビューアWebアプリを制作（その７）　[Webアプリ]

では、script.coffeeを作成します。
index.htmlをダウンロード完了直後にグリフ一覧を作成させたいので、
以下のようにします。

$ ->
  displayGlyphs()

displayGlyphs()は、グリフ一覧を表示させるための関数です。
まずは、グリフ一覧の一行目を表示するコードを書いてみます。

displayGlyphs = () ->
  html = "<table>\n<tr>"
  for i in [0..15]
    html += "<th>#{i}</th>"
  html += "</tr>\n</table>"

  $("#glyphs").html(html)

coffee-script.jsを使った場合は、関数は先に定義する必要があるので、
以下のようにします。

displayGlyphs = () ->
  html = "<table>\n<tr>"
  for i in [0..15]
    html += "<th>#{i.toString(16).toUpperCase()}</th>"
  html += "</tr>\n</table>"

  $("#glyphs").html(html)

$ -> 
  displayGlyphs()

この段階でグリフ一覧を見てみます。
その前に、index.htmlの<section id="glyphs">のタグ内のtableタグを取り払っておきます。

ブラウザで見てみると、こんな感じになりました。

（つづく）

タグ：webアプリ JavaScript CoffeeScript jQuery

2014-05-09 00:44 nice!(1) コメント(0) トラックバック(0)
共通テーマ：blog

フォントビューアWebアプリを制作（その６）　[Webアプリ]

（その５）では、グリフ一覧は直接HTMLファイルにグリフを一つ一つ入力しました。

<section id="glyphs">
  <table>
    <tr><th></th><th>0</th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th><th>8</th><th>9</th><th>A</th><th>B</th><th>C</th><th>D</th><th>E</th><th>F</th></tr>
    <tr><td class="col">U+002x</td><td> </td><td>!</td><td>"</td><td>#</td><td>$</td><td>%</td><td>&</td><td>'</td><td>(</td><td>)</td><td>*</td><td>+</td><td>,</td><td>-</td><td>.</td><td>/</td></tr>
    <tr><td class="col">U+003x</td><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>:</td><td>;</td><td><</td><td>=</td><td>></td><td>?</td></tr>
    <tr><td class="col">U+004x</td><td>@</td><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td><td>G</td><td>H</td><td>I</td><td>J</td><td>K</td><td>L</td><td>M</td><td>N</td><td>O</td></tr>
    <tr><td class="col">U+005x</td><td>P</td><td>Q</td><td>R</td><td>S</td><td>T</td><td>U</td><td>V</td><td>W</td><td>X</td><td>Y</td><td>Z</td><td>[</td><td>\</td><td>]</td><td>^</td><td>_</td></tr>
    <tr><td class="col">U+006x</td><td>`</td><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td><td>j</td><td>k</td><td>l</td><td>m</td><td>n</td><td>o</td></tr>
    <tr><td class="col">U+007x</td><td>p</td><td>q</td><td>r</td><td>s</td><td>t</td><td>u</td><td>v</td><td>w</td><td>x</td><td>y</td><td>z</td><td>{</td><td>|</td><td>}</td><td>~</td><td> </td></tr>
  </table>
</section>

これでは、漢字領域やギリシア文字領域などを一覧表示する場合は、現実的ではないので、スクリプトを使って、グリフ一覧表示部分を自動化したいと思います。
スクリプトは、JavaScriptで直接コーディングしてもよいのですが、CoffeeScriptが簡潔にコーディングできるので、CoffeeScriptでコーディングしたいと思います。

CoffeeScriptは、Node.jsを使ってJavaScriptコードにコンパイルするのが正式ですが、Node.jsのインストールが多少手間がかかるので、CoffeeScript開発者がリリースしているcoffee-script.jsをブラウザに読み込ませて、CoffeeScriptコードを直接実行させる方法で行きたいと思います。
CoffeeScriptコードを直接ブラウザで実行させるので、Node.jsでJavaScriptでコンパイルさせた場合よりも速度が遅いですが、ここでのアプリでは実用的には特に問題ないので、coffee-script.jsを使って実行させることにします。

エレメントの操作を簡単にしたいので、jQueryを使用します。
jQueryは、現在2バージョンリリースされていますが、jquery1.x系を使うことにします。
http://jquery.com/download/
から最新のjquery-1.11.1.min.jsをダウンロードします。

次に、coffee-script.jsをCoffeeScript作者のページ（http://coffeescript.org）から入手します。
（http://coffeescript.org/extras/coffee-script.js）
このcoffee-script.jsをindex.htmlのヘッダでjavascriptで読み込みます。
その後に、これから作成するCoffeScriptコードのファイルscript.coffeeをファイルタイプをcoffeescriptとして読み込ませます。
以下をindex.htmlのheadタグ内に追加しておきます。

<script type="text/javascript" src="./jquery-1.11.1.mini.js"></script>
<script type="text/javascript" src="./coffee-script.js"></script>
<script type="text/coffeescript" src="./script.coffee"></script>

タグ：webアプリ JavaScript CoffeeScript jQuery

2014-05-08 23:39 nice!(0) コメント(0) トラックバック(0)
共通テーマ：blog

フォントビューアWebアプリを制作（その５）　[Webアプリ]

（その５）では、グリフ一覧のレイアウトをデザインしていきます。

まずは、グリフと文字コードのフォントサイズが小さいので大きくしてみます。
デフォルトのサイズの180%にしてみます。

td, th {
  font-size: 180%;
}

文字コードをもう少し小さくし、グリフはプロポーショナルフォントの場合、文字コードの下１桁（１行目）との並びがバラバラになるので、tdとthの横幅を固定してみたいと思います。
また、文字コード上３桁（第１列目）もフォントを小さくし、横幅をクラスを使って固定にしてみます。
index.htmlのU+002xの部分のtdにcolクラスを追加します。

<td class="col">U+002x<td>

style.cssは以下のように変更します。

td, th {
  max-width: 25px;
  min-width: 25px;
  max-height: 25px;
  text-align: center;
}

th {
  font-size: 100%;
  color: #888;
}

td {
  font-size: 180%;
}

.col {
  padding-left: 5px;
  max-width: 60px;
  font-size: 90%;
  color: #888;
}

うまくグリフと文字コードが整列できました。

グリフの周りにボーダーを引いてみて一覧表らしくしています。
先程の下のtdのCSSにborderの属性を記述します。

td {
  font:-size: 180%;
  border: solid 1px #ddf;
}

これで、グリフ一覧のレイアウトデザインができたので、U+0030〜U+007Fまでをindex.htmlに追加します。

これでグリフ一覧のレイアウトデザインができました。

（その６）では、グリフ一覧を作る場合、グリフ一つ一つをHTMLファイルに記述するは、現実的ではないので、JavaScriptを使用して自動でHTMLを構築するようにしたいと思います。

タグ：webアプリフォントビューア

2014-05-07 01:23 nice!(1) コメント(0) トラックバック(0)
共通テーマ：blog

フォントビューアWebアプリを制作（その４）　[Webアプリ]

（その３）では、HTML（index.html）でアプリの構造を記述しました。
このままでは、ブラウザのデフォルトのレイアウトなので、スタイルシートを記述してレイアウトをデザインしていきたいと思います。
スタイルシートは、index.htmlと同じ階層でstyle.cssというファイル名で作成します。
まずは、bodyに以下のようにアプリ全体のデフォルト値を設定しておきます。

body {
  font-size: 12pt;
  color: #000;
  background: #ddd;
}

フォントサイズは、12ポイント、テキストの色は黒（#000）、背景色はライトグレー（#ddd）です。

ヘッダ部分とフッタ部分のデザインを同じにしてみます。
幅は、画面全体（100%）、パッディング（ブロック境界からテキスト領域までのスペース）を5ピクセル、背景色をライトグレーのrgb(247, 247, 247)に、フォントをヘルベチカ（ヘルベチカがなければ、ブラウザ自動選択でサンセリフ体）、フォントサイズは、bodyの120%、テキストアライメントは中央寄せ、文字色は、iOS7のフラットデザインのボタンカラーの標準色のrgb(0, 123, 253)にし、ブロックを角丸で半径3ピクセルにします。

header, footer {
  width: 100%;
  padding: 5px;
  background: rgb(247, 247, 247);
  font-family: "Helvetica", sans-serif;
  font-size: 120%;
  text-align: center;
  color: rgb(0, 123, 253);
  border-radius: 3px;
}

この状態では、以下のようになります。

フッタ部分には何もないので、フォント名を表示するようにindex.htmlのフッタ部分を変更します。
とりあえず、アプリのデフォルトフォントを「Helvetica」としておきます。

<footer>
  Helvetica
</footer>

フッタ部分を見てみると、文字が少し大きいので100%に変更し、左寄せにしてみます。
style.cssに以下を追加します。

footer {
  font-size: 100%;
  text-align: left;
}

次に、コンテンツ部分とその中のブロックをデザインします。
コンテンツ部分は、幅を100%、最小の高さを400ポイント、パッディングを5ポイント、背景色を少し濃いめのライトグレーrgb(200, 200, 200)にします。
グリフ一覧（glyphs）とグリフの拡大表示部分（preview）は。横並びにしたいのでフロートを使用します。
glyphsは、フロートで左側に、幅は全体の70％、最小の高さはコンテンツと同じ400ピクセル、背景色は白 rgb(255, 255, 255)、ブロックは角丸の半径2ピクセルにします。
previewは、フロートで右側に、幅は全体の30%、最小の高さはコンテンツと同じ400ピクセル、背景色は、ライトグレーのrgb(220, 220, 220)、ブロックは角丸の半径２ピクセルにします。

#contents {
  width: 100%;
  min-height: 400px;
  padding: 5px;
  background: rgb(200, 200, 200);
}

#glyphs {
  float: left;
  width: 70%;
  min-height: 400px;
  background: rgb(255, 255, 255);
  border-radius: 2px;
}

#preview {
  float: right;
  width: 30%;
  min-height: 400px;
  background: rgb(220, 220, 220);
  border-radius: 2px;
}