iPhone で Web ページのソースコードを読めるコードエディタアプリ Textastic が面白い

iPhone で HTML や CSS のコードを書くことができるコードエディタアプリ Textastic Code Editor for iPhone に面白い使い方があることを知りました。それは Safari などのブラウザで見ている Web ページのソースコードをアプリの中に読み込む機能です。ソースコードをただ眺めるだけでなく、自分で編集して見た目がどう変わるかをシミュレートすることもできます。

目次

  1. ソースコードって?
  2. このブログの例
  3. コードの編集とプレビュー
  4. ソースコードを読む楽しさ
  5. Textastic にソースコードを読み込む方法

ソースコードって?

最初にソースコード (source code) とは、次のような意味です。

コンピュータープログラムやソフトウェアの元になる文字列のことをさす。単に「ソース」とも。人によってプログラミング言語で記述された状態。(via ソースコードとは – はてなキーワード

普段目にしている Web ページも実際には HTML という言語で記述されています。なので Web ページのソースコードを見るというのは、そのページがどのように HTML で記述されているのかを見るということになります。

このブログの例

言葉だけでは分かりにくいので、このブログのトップページのソースコードを、Textastic で表示してみます。

ずらずらと HTML コードが書かれています。私たちがサイトにアクセスする時は、ブラウザがこの HTML コードなどを解析して、ページを表示してくれます。

コードの編集とプレビュー

ソースコードを見るだけなら Safari でそれ用のブックマークレットを使えば可能ですが、Textastic の面白いところは、読み込んだソースコードを自分の好きなように編集し、プレビューできることです。

たとえば、73行目にサイトのタイトルに関する記述があります。

記述されているコードは次の通りです。

<h1 class="site-title"><a href="http://shirose.jp/" title="Simple Living" rel="home">Simple Living</a></h1>

このうち、水色背景の文字列を次のように変更してみます。

<h1 class="site-title"><a href="http://shirose.jp/" title="Simple Living" rel="home">Complicated Living</a></h1>

そして左下のプレビューアイコンをタップします。

するとサイトのタイトルが、シンプルじゃなくなって複雑になります。もう1つ試してみます。

<h1 class="site-title"><a href="http://shirose.jp/" title="Simple Living" rel="home">Complicated Living</a></h1>

水色の部分には、サイトのタイトル部分をタップ(PC ならクリック)した時、どこにリンクするかが記述されています。この場合は、サイトのトップページに移動します。これを次のように書き換えてみます。

<h1 class="site-title"><a href="http://www.apple.com/" title="Simple Living" rel="home">Complicated Living</a></h1>

またプレビューアイコンをタップします。

続いてタイトルをタップします。

すると、Apple のサイトに飛んでしまいます。もはやシンプルさのかけらもありません。こんな風にして、1つ1つのコードが、実際に目にする Web ページの表示や機能にどう対応しているのかを自分の手で確かめていくことができます。

と言っても、これらの作業はアプリの中だけで行っていることなので、現実のブログには何の影響もありません。

ソースコードを読む楽しさ

私自身は何も HTML について知らない状態でブログを始めました。今でも分からないことだらけです。そのため、デザインの修正など、何か新しいことをしようとするたびに困難に出くわします。

そんな時にソースコードを見て、問題点に該当しそうなコードを探し、トライ&エラーを繰り返す中で解決の糸口がつかめることもあります。また、いろいろなサイトのソースコードを見て回ることも勉強になります。コードを読むことは難しく、今の私にはほとんど理解できないのですが、ずっと続けているうちに少しずつ慣れ、楽しさも出てきます。

もし興味を持たれた方がいらっしゃいましたら、ソースコードの世界を覗いてみると何か新しい発見があるかもしれません。

Textastic にソースコードを読み込む方法

最後に、URL スキームを使ってソースコードをインポートする方法を載せておきます。

まず読み込みたいページを Safari などで開き、アドレスバーをタップします。

URL アドレスの最初に http:// と表示されているので、ここを変更します。

textastic:// と変更したら、「Go」をタップ。これで Textastic が起動し、ソースコードが読み込まれます。

毎回毎回変更するのは面倒という人は、次の Javascript を Safari にブックマークレットとして登録してください。

javascript:location.href=document.URL.replace(/https?/,'textastic');

Textastic には iPad アプリ、Mac アプリもあります。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です