読者です 読者をやめる 読者になる 読者になる

記事の書き方(ソースコード記載_RunstantLite)

ブログ プログラミング

他の人のブログで、ブログ上でソースを書いてそれが即時反映されるツール?のようなものが貼ってあるのを見たことがあった。
少し調べてみたらRunstant Liteというものらしい。試してみた。

Runstant Lite

ブラウザ上で動くエディタ&プレビューツールらしい。ログイン不要で使いたいときにすぐに使うことができるようだ。

早速試してみる

ブラウザ上でコードを作成

まずは以下にアクセスする。
lite.runstant.com

すると、エディタが立ち上がるのでそこにソースを書く
f:id:taiga1021kou:20170312004823p:plain

右上のShareボタンを押下すると、URLが出てくる。これをブログに貼り付ければ事足りそうだ。
f:id:taiga1021kou:20170312004829p:plain

ブログでの見せ方

コピーしたURLをブログに貼り付ける。
普通に貼り付けると、いつものようにカードかURLのタイトルをブログに貼り付けることになる。
f:id:taiga1021kou:20170312004835p:plainf:id:taiga1021kou:20170312004841p:plain

だが、ここで一工夫して、iframeというHTMLタグにこのURLを入れてみる。
f:id:taiga1021kou:20170312004846p:plain

すると、エディタ画面がブログに埋め込まれ、その場でソースの編集やその結果を見ることができる。
しかもURLにソースの情報が入っているらしいので、更新をすれば編集前に戻せるという。
f:id:taiga1021kou:20170312004851p:plain


普通にはり付けた時の実行結果
カードをクリックすると別窓でエディタ画面に遷移する。
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

f:id:taiga1021kou:20170311143731p:plain
実行すると、console.logに記載していた箇所が表示される。


無事表示できたところでhttpリクエストを投げてみる。

ブラウザを立ち上げ、URLに「http://localhost;8080/」と入力。

f:id:taiga1021kou:20170311143747p:plain
レスポンスとしてres.end();の内容が返ってきた。

内容

サーバ作成

まず1行目

var http = require('http');

どうやらimport処理のようなもので、http通信をする際に必要なモジュールの読み込みをしているらしい。

3行目~

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);

f:id:taiga1021kou:20170311180619p:plain

感想

数行でサーバを立てられるのはすごいな。
今まで私が触ってきたのは、TomcatJavaでサーバを立てたり、IISを使ってサーバを立てたりしていました。
とにかくサーバ用のアプリケーションを入れて、別途設定等が必要だったのですが、Node.jsではいとも簡単にできてしまうんですね。

次は、HTML+CSS+JavaScript+Node.jsの連携をしてみたいです。

Node.js始めました

プログラミング

Node.jsのインストールからHelloWorldまで

Node.jsとは

JavaScriptはクライアントのブラウザで動く言語。
Node.jsはこのJavaScriptをサーバ側のプログラムとして動かすことができる。
ブラウザ側の処理もサーバサイドでの処理も同じ言語であるJavaScriptで動かせるので、
言語が混在せずに学びやすい。

インストール

以下のサイトに接続する。
Node.js

画面中央にあるダウンロードボタンを押下する
f:id:taiga1021kou:20170308000032p:plain

インストーラーを落としたら起動。
次へボタンで進めていく。
f:id:taiga1021kou:20170308000049p:plain

インストールが終わったらコマンドプロンプトを起動
コマンドプロンプトからNode.jsのバージョンを確認

 node -v

f:id:taiga1021kou:20170308000615p:plain

無事にインストールできました。

対話モードでNode.jsを実行

Node.jsは対話モードで実行する機能があるようです。
コマンドプロンプトより実行する。

 node

計算など入力すると答えが返ってくる。
f:id:taiga1021kou:20170308001105p:plain

対話モードの終了はCtrl+Cを二回を行う

外部ファイルからNode.jsを実行

外部ファイルに以下のソースを書く

helloWorld.js

 var text = 'HelloWorld';
 console.log(text);

コマンドプロンプトから以下のコマンドで実行する。

 node helloWorld.js

f:id:taiga1021kou:20170308001600p:plain

無事外部ファイルのJavaScriptを実行できました。

おわりに

今日はここまで。
少しずつ勉強してそのうちTwitterクライアントアプリをNode.jsで作ってみたいです。
次はHTTP通信を使ったHelloWorldを作ります。

記事の書き方(目次のつけ方、他人の記事貼り付け)

ブログ

他の記事を見ているときに目次があり、見やすいなと感じたので、目次の書き方を調べてみる。
やってみよう。

目次の作り方

見出しを書いてみる

目次の作り方は思ったより簡単にできる。
まず、見出しの羅列を作成する。

f:id:taiga1021kou:20170305230833p:plain
次に画面上部の目次ボタンを押す。
すると『[:contents]』というものが出てくる。
f:id:taiga1021kou:20170305230842p:plain

これで終わり。
プレビューを見てみると、目次が出来上がっている。
f:id:taiga1021kou:20170305230853p:plain

『[:contents]』を書いておけば、自動で見出しから目次を作ってくれるようだ。
そのため、後で見出しを追記したとしても
f:id:taiga1021kou:20170305230906p:plain


何もせずに自動で反映される。至れり尽くせりだ。
f:id:taiga1021kou:20170305230917p:plain

CSSで目次にデザインをつける

他のブログを見ていると、目次に枠がついていることが多い。
この枠付けはCSSで設定するようだ。

CSSをカスタマイズする方法は前回やったので、それを使ってデザインしていく。

minus-positive.hatenablog.jp


どうやら目次を表示する領域の骨組みには『table-of-contents』という名前の属性がついているらしい。
デザインCSSで『table-of-contents』に装飾していく。
f:id:taiga1021kou:20170305231642p:plain

結果をちゃんと保存して、プレビューで見てみると無事枠をつけることができた。
f:id:taiga1021kou:20170305231653p:plain


以下、参考にさせていただいブログ様
emeraldwar.hatenablog.com


他人の記事貼り付け方

ブログ開設当初から他人のブログ記事のリンクを貼れればなぁと思っていたのだが、
やっと調べて試す機会ができた。やってみる。

カードみたいなものを貼りつける

まずは貼り付けたいブログのURLをコピーする。
コピーしたURLを編集領域に貼り付ける。
他の写真貼り付け機能みたいなボタンはない模様。
f:id:taiga1021kou:20170305232901p:plain

貼り付けると自動で以下のようなポップアップが出る。
ここでカードのようなデザインを選択して貼り付けるだけ。
f:id:taiga1021kou:20170305232909p:plain

プレビューで確認するとこの通り。
f:id:taiga1021kou:20170305232920p:plain

おわりに

もう少し追記したいことはあったのだがやはり記事一つ書くのに時間がかかってしまう。。。
この文量で90分はかかっている。サッカーができてしまう。

早いとこ使い方を覚えて効率よく記事を書けるように頑張ろう。

記事の書き方(デザイン変更ーCSS)

ブログ

ほかの方のブログを見ているとオリジナリティがあるブログが多い。

それだけテーマが用意されているのかと思ったら、どうやらCSSでデザインの指定がオリジナルでできるようだったことが分かった。

少し調べて試してみる。

CSSで指定個所のデザインを変更する

CSSとは

ホームページというのはテキストファイルにHTMLタグを書き込んでいくことでそのページの骨組みや情報をWebブラウザに表示していく。

CSSはその骨組みに装飾(デザイン)するための言語。

つまり「ボタンを設置する」とか「入力項目を設置する」といったことをHTMLに書いていき、「ボタンの文字の大きさ」とか「テキストボックスの背景色」といったデザインに関することはCSSに書いていく。

この装飾を書いたCSSをHTMLが読み込むことで、文字の大きさが他と違うボタンになったり、背景色が違うテキストボックスが作られたりする。

CSSを変更してデザインを変更してみる

ブログ毎に前述したCSSを変更することができるようなので試してみる。

 

メニューからデザインを選択する。

f:id:taiga1021kou:20170304220114p:plain

メニューのスパナのアイコンをクリックして、下部にあるデザインCSSを選択する。

するとCSSのソースが表示される。

f:id:taiga1021kou:20170304220120p:plain

ソース表示部を選択すると、入力できるようになる。

ここでは試しに「大見出し(h3)」の文字色(color)を青(blue)に変更してみる。

ここで記述するh3はHTMLで大見出しの骨組みを意味するものである。

f:id:taiga1021kou:20170304220128p:plain

入力エリアからフォーカスを外すと、読み込み中と表示され

f:id:taiga1021kou:20170304220133p:plain

しばらく待つとCSSの指定が反映され、大見出しが青色になった。

f:id:taiga1021kou:20170304220141p:plain

色を確認後、「変更を保存するボタン」を選択すると、「設定を変更しました。」

とポップアップが出て変更が確定する。

f:id:taiga1021kou:20170304220152p:plain

 

一度保存すると今後作成する記事にCSS設定内容が適応され、今まで書いてきたものに対してもCSSが適応されるようだ。

 

CSSは仕事でも少しいじったことがあるので、そのうちいろいろ凝ったデザインを作ってみよう。

デザイナーではないのでちょっとデザインに自信はないけど、そこは課題ということで。

 

追記

ちゃんとこの記事の大見出しも色の指定がされているようだった。

f:id:taiga1021kou:20170304223701p:plain

記事の書き方(ソースコード記載)

ブログ

ソースコードを書いてみたい

そのうちブログの中にソースコードを書いてみたいと思っている。
その方法について少し調べてみた。

目標

はてな記法で書いてみる

ブログの編集方法に「みたまま編集」と「はてな記法」があることは知っていた。
だが簡単そうなので「みたまま編集」のみで書いていた。

少し調べてみると、どうやらソースの表示は「はてな記法」でブログを書くと簡単で、
はてな記法」で使える『>||』と『||<』でくくって中にソースを書けばよいらしい。
というわけで実験。言語はJavaScriptを想定。

f:id:taiga1021kou:20170302073747p:plainf:id:taiga1021kou:20170302073754p:plain

function test(){

   alert("ポジティブですか?");
   console.log("ぼちぼちですね")

}

おぉ。できている。
が、色付けができていないようだ。

もう少し調べてみると、『>|言語(javascriptjava)|』と記載すればよさそうだった。
試してみる

f:id:taiga1021kou:20170302074359p:plainf:id:taiga1021kou:20170302074405p:plain

function test(){

   alert("ポジティブですか?");
   console.log("ぼちぼちですね")

}


おぉ。できた。なんだかそれっぽい。

この枠の色やハイライトの色等も指定できるのだろうか。
後々調べてみよう。

はてな記法のリファレンスはあるようなので、時間があるときに読み込んで使い方を学んでみよう。

記事の書き方(過去記事貼り付け、Amazon商品紹介)

ブログ

引き続きブログの書き方を学ぶ

昨日に引き続きブログの書き方を体感してアウトプットしてみよう。

 

過去記事の貼り付け

サイドバーにある追加ボタンを押す。

編集サイドバーメニューが出てくる。そこから過去記事貼り付けのチェックを入れる。

すると過去記事貼り付けボタンが出てくる。

f:id:taiga1021kou:20170302002001p:plain f:id:taiga1021kou:20170302002047p:plain

 

 

ボタンを押すと過去の記事の一覧が出てくる。どうやらキーワード検索もできる模様

f:id:taiga1021kou:20170302002110p:plain

過去記事をダブルクリックまたは下部の「選択したアイテムを貼り付け」を押せば記事に過去の記事が張り付けられる。

f:id:taiga1021kou:20170302002200p:plain

 

貼り付けたものがこちら↓

minus-positive.hatenablog.jp

 どうやらリサイズはできないようだ。

 

Amazon商品紹介

編集サイドバーを見ていて気になったのでアウトプットしておく。

編集サイドバーからAmazon商品紹介ボタンにチェックを入れる。

サイドバーにアマゾンのアイコンが表示される。

f:id:taiga1021kou:20170302003729p:plain

アイコンを押すと、検索ボックスが表示される

f:id:taiga1021kou:20170302003743p:plain

検索キーワードを入力して、出てきた一覧から商品を選択すれば、張り付けられる。

f:id:taiga1021kou:20170302003752p:plain

 

 実際に張り付けたのがこちら

ニャンボー おさんぽーち tabby

ニャンボー おさんぽーち tabby

 

 アフィリエイトとかする人はこの機能でしているのかな・・・?

なんだか別の機能がありそうだけど。

おわり

今日は仕事の都合で早く帰れなかったけど、もう少しブログのための時間を作ってもっと内容の濃いブログを書いてみたい。

内容の濃いブログを素早くかければよいのだろうけどまずはこのくらいの薄さのブログをコツコツと続けてアウトプットに慣れていきたいと思う。

そのうち技術(IT)に関するブログを書いてみたいな。