記事の書き方（ソースコード記載_RunstantLite）
他の人のブログで、ブログ上でソースを書いてそれが即時反映されるツール？のようなものが貼ってあるのを見たことがあった。
少し調べてみたらRunstant Liteというものらしい。試してみた。
Runstant Lite
ブラウザ上で動くエディタ＆プレビューツールらしい。ログイン不要で使いたいときにすぐに使うことができるようだ。
早速試してみる
ブラウザ上でコードを作成
まずは以下にアクセスする。
lite.runstant.com
すると、エディタが立ち上がるのでそこにソースを書く
右上のShareボタンを押下すると、URLが出てくる。これをブログに貼り付ければ事足りそうだ。
ブログでの見せ方
コピーしたURLをブログに貼り付ける。
普通に貼り付けると、いつものようにカードかURLのタイトルをブログに貼り付けることになる。
だが、ここで一工夫して、iframeというHTMLタグにこのURLを入れてみる。
すると、エディタ画面がブログに埋め込まれ、その場でソースの編集やその結果を見ることができる。
しかもURLにソースの情報が入っているらしいので、更新をすれば編集前に戻せるという。
普通にはり付けた時の実行結果
カードをクリックすると別窓でエディタ画面に遷移する。
goo.gl
iframeに入れた時の実行結果
ブログ上でエディタ画面を表示する。
はてなブログはHTMLをそのままかけるからできるのか。便利だ。
Node.js はじめてのサーバ側処理
前回の記事でHelloWorldを作ってみたので
今回はNode.jsの基本である（らしい）HTTPサーバを作ってみます。
HTTPサーバの作成
コード
まずは参考書をまねしてコーディングする。
helloHttp.js
var http = require('http'); // サーバの作成 var server = http.createServer(function(req,res){ res.writeHead(200,{'Content-Type':'text/html'}); res.end('<h1>Hello! HTTP! Node.js!</h1>'); }); // 8080ポートを受け付け server.listen(8080); console.log('server Start on 8080');
実行
コーディング後、コマンドプロンプトにて実行する
＞node helloHttp.js
実行すると、console.logに記載していた箇所が表示される。
無事表示できたところでhttpリクエストを投げてみる。
ブラウザを立ち上げ、URLに「http://localhost;8080/」と入力。
レスポンスとしてres.end();の内容が返ってきた。
内容
サーバ作成
まず１行目
var http = require('http');
どうやらimport処理のようなもので、http通信をする際に必要なモジュールの読み込みをしているらしい。
３行目～
var server = http.createServer(function(req,res){ )}
読み込んだモジュールを使いサーバの作成をやってくれているっぽい。
req はリクエスト、res はレスポンスの値が入っているのかな。
HTTP作成
res.writeHead(200,{'Content-Type':'text/html'}); res.end('<h1>Hello! HTTP! Node.js!</h1>');
HTTPヘッダの作成とHTTPの中身の作成ですね。
中身の記載方法ですが、参考資料では上のように書いてましたが、
別のサイトを見る限り以下でも行けそうです。
res.writeHead(200,{'Content-Type':'text/html'}); res.write('<h1>Hello! HTTP! Node.js!</h1>'); res.end();
と、いうかこちらのほうがメソッド名的に正しそう。
待ち受けポート設定
最後
// 8080ポートを受け付け
server.listen(8080);
待ち受けるポートの設定です。
ここで設定したポートをURLに指定しないと、接続できませんね。
試しに4649ポートに書き換えた後に同じURLで接続に行っても失敗します。
// 4649ポートを受け付け
server.listen(4649);
感想
数行でサーバを立てられるのはすごいな。
今まで私が触ってきたのは、TomcatとJavaでサーバを立てたり、IISを使ってサーバを立てたりしていました。
とにかくサーバ用のアプリケーションを入れて、別途設定等が必要だったのですが、Node.jsではいとも簡単にできてしまうんですね。
次は、HTML＋CSS+JavaScript＋Node.jsの連携をしてみたいです。
Node.js始めました
Node.jsのインストールからHelloWorldまで
Node.jsとは
JavaScriptはクライアントのブラウザで動く言語。
Node.jsはこのJavaScriptをサーバ側のプログラムとして動かすことができる。
ブラウザ側の処理もサーバサイドでの処理も同じ言語であるJavaScriptで動かせるので、
言語が混在せずに学びやすい。
インストール
以下のサイトに接続する。
Node.js
画面中央にあるダウンロードボタンを押下する
インストーラーを落としたら起動。
次へボタンで進めていく。
インストールが終わったらコマンドプロンプトを起動
コマンドプロンプトからNode.jsのバージョンを確認
node -v
無事にインストールできました。
対話モードでNode.jsを実行
Node.jsは対話モードで実行する機能があるようです。
コマンドプロンプトより実行する。
node
計算など入力すると答えが返ってくる。
対話モードの終了はCtrl+Cを二回を行う
外部ファイルからNode.jsを実行
外部ファイルに以下のソースを書く
helloWorld.js
var text = 'HelloWorld'; console.log(text);
コマンドプロンプトから以下のコマンドで実行する。
node helloWorld.js
無事外部ファイルのJavaScriptを実行できました。
おわりに
今日はここまで。
少しずつ勉強してそのうちTwitterクライアントアプリをNode.jsで作ってみたいです。
次はHTTP通信を使ったHelloWorldを作ります。
記事の書き方（目次のつけ方、他人の記事貼り付け）
他の記事を見ているときに目次があり、見やすいなと感じたので、目次の書き方を調べてみる。
やってみよう。
目次の作り方
見出しを書いてみる
目次の作り方は思ったより簡単にできる。
まず、見出しの羅列を作成する。
次に画面上部の目次ボタンを押す。
すると『[:contents]』というものが出てくる。
これで終わり。
プレビューを見てみると、目次が出来上がっている。
『[:contents]』を書いておけば、自動で見出しから目次を作ってくれるようだ。
そのため、後で見出しを追記したとしても
何もせずに自動で反映される。至れり尽くせりだ。
CSSで目次にデザインをつける
他のブログを見ていると、目次に枠がついていることが多い。
この枠付けはCSSで設定するようだ。
CSSをカスタマイズする方法は前回やったので、それを使ってデザインしていく。
どうやら目次を表示する領域の骨組みには『table-of-contents』という名前の属性がついているらしい。
デザインCSSで『table-of-contents』に装飾していく。
結果をちゃんと保存して、プレビューで見てみると無事枠をつけることができた。
以下、参考にさせていただいブログ様
emeraldwar.hatenablog.com
他人の記事貼り付け方
ブログ開設当初から他人のブログ記事のリンクを貼れればなぁと思っていたのだが、
やっと調べて試す機会ができた。やってみる。
カードみたいなものを貼りつける
まずは貼り付けたいブログのURLをコピーする。
コピーしたURLを編集領域に貼り付ける。
他の写真貼り付け機能みたいなボタンはない模様。
貼り付けると自動で以下のようなポップアップが出る。
ここでカードのようなデザインを選択して貼り付けるだけ。
プレビューで確認するとこの通り。
おわりに
もう少し追記したいことはあったのだがやはり記事一つ書くのに時間がかかってしまう。。。
この文量で90分はかかっている。サッカーができてしまう。
早いとこ使い方を覚えて効率よく記事を書けるように頑張ろう。
記事の書き方（デザイン変更ーCSS）
ほかの方のブログを見ているとオリジナリティがあるブログが多い。
それだけテーマが用意されているのかと思ったら、どうやらCSSでデザインの指定がオリジナルでできるようだったことが分かった。
少し調べて試してみる。
CSSで指定個所のデザインを変更する
CSSとは
ホームページというのはテキストファイルにHTMLタグを書き込んでいくことでそのページの骨組みや情報をWebブラウザに表示していく。
CSSはその骨組みに装飾（デザイン）するための言語。
つまり「ボタンを設置する」とか「入力項目を設置する」といったことをHTMLに書いていき、「ボタンの文字の大きさ」とか「テキストボックスの背景色」といったデザインに関することはCSSに書いていく。
この装飾を書いたCSSをHTMLが読み込むことで、文字の大きさが他と違うボタンになったり、背景色が違うテキストボックスが作られたりする。
CSSを変更してデザインを変更してみる
ブログ毎に前述したCSSを変更することができるようなので試してみる。
メニューからデザインを選択する。
メニューのスパナのアイコンをクリックして、下部にあるデザインCSSを選択する。
するとCSSのソースが表示される。
ソース表示部を選択すると、入力できるようになる。
ここでは試しに「大見出し（h3）」の文字色（color）を青（blue）に変更してみる。
ここで記述するh3はHTMLで大見出しの骨組みを意味するものである。
入力エリアからフォーカスを外すと、読み込み中と表示され
しばらく待つとCSSの指定が反映され、大見出しが青色になった。
色を確認後、「変更を保存するボタン」を選択すると、「設定を変更しました。」
とポップアップが出て変更が確定する。
一度保存すると今後作成する記事にCSS設定内容が適応され、今まで書いてきたものに対してもCSSが適応されるようだ。
CSSは仕事でも少しいじったことがあるので、そのうちいろいろ凝ったデザインを作ってみよう。
デザイナーではないのでちょっとデザインに自信はないけど、そこは課題ということで。
追記
ちゃんとこの記事の大見出しも色の指定がされているようだった。
記事の書き方（ソースコード記載）
ソースコードを書いてみたい
そのうちブログの中にソースコードを書いてみたいと思っている。
その方法について少し調べてみた。
はてな記法で書いてみる
ブログの編集方法に「みたまま編集」と「はてな記法」があることは知っていた。
だが簡単そうなので「みたまま編集」のみで書いていた。
少し調べてみると、どうやらソースの表示は「はてな記法」でブログを書くと簡単で、
「はてな記法」で使える『>||』と『||<』でくくって中にソースを書けばよいらしい。
というわけで実験。言語はJavaScriptを想定。
function test(){
alert("ポジティブですか？");
console.log("ぼちぼちですね")
}おぉ。できている。
が、色付けができていないようだ。
もう少し調べてみると、『>|言語（javascriptやjava）|』と記載すればよさそうだった。
試してみる
function test(){ alert("ポジティブですか？"); console.log("ぼちぼちですね") }
おぉ。できた。なんだかそれっぽい。
この枠の色やハイライトの色等も指定できるのだろうか。
後々調べてみよう。
はてな記法のリファレンスはあるようなので、時間があるときに読み込んで使い方を学んでみよう。
記事の書き方（過去記事貼り付け、Amazon商品紹介）
引き続きブログの書き方を学ぶ
昨日に引き続きブログの書き方を体感してアウトプットしてみよう。
過去記事の貼り付け
サイドバーにある追加ボタンを押す。
編集サイドバーメニューが出てくる。そこから過去記事貼り付けのチェックを入れる。
すると過去記事貼り付けボタンが出てくる。
ボタンを押すと過去の記事の一覧が出てくる。どうやらキーワード検索もできる模様
過去記事をダブルクリックまたは下部の「選択したアイテムを貼り付け」を押せば記事に過去の記事が張り付けられる。
貼り付けたものがこちら↓
どうやらリサイズはできないようだ。
Amazon商品紹介
編集サイドバーを見ていて気になったのでアウトプットしておく。
編集サイドバーからAmazon商品紹介ボタンにチェックを入れる。
サイドバーにアマゾンのアイコンが表示される。
アイコンを押すと、検索ボックスが表示される
検索キーワードを入力して、出てきた一覧から商品を選択すれば、張り付けられる。
実際に張り付けたのがこちら
アフィリエイトとかする人はこの機能でしているのかな・・・？
なんだか別の機能がありそうだけど。
おわり
今日は仕事の都合で早く帰れなかったけど、もう少しブログのための時間を作ってもっと内容の濃いブログを書いてみたい。
内容の濃いブログを素早くかければよいのだろうけどまずはこのくらいの薄さのブログをコツコツと続けてアウトプットに慣れていきたいと思う。
そのうち技術（IT）に関するブログを書いてみたいな。
