Texteditor - Ohotech 並盛 #5
62
<!DOCTYPE html> <html lang=”ja”> <head> <meta charset=”utf-8”> <title> Ohotech 並盛 #5 </title> <style type=”text/css”> <!-- html *{ margin:0; padding:0; } body{ width:1024px; height:768px; } #title{ position:absolute; left:15px; bottom:15px; } #sub-title{ position:absolute; right:15px; bottom:15px; } --> </style> </head> <body> <div id=”title”> <p>Text</p> <p>Editor</p> </div> <div id=”sub-title”> <p>Ohotech 並盛 #5</p> <p>@tomio2480</p> </div> </body> </html> Text Editor Ohotech 並盛 #5 @tomio2480
-
Upload
shota-nishihara -
Category
Documents
-
view
408 -
download
0
description
Ohotech 並盛 #5 にて。 何故テキストエディタが必要か。Wordとは違うのか。 データの内容にも触れながら、簡単に説明したつもり。
Transcript of Texteditor - Ohotech 並盛 #5
<!DOCTYPE html><html lang=”ja”><head><meta charset=”utf-8”><title>Ohotech 並盛 #5
</title><style type=”text/css”><!--html *{margin:0;padding:0;
}body{width:1024px;height:768px;
}#title{position:absolute;left:15px;bottom:15px;
}#sub-title{position:absolute;right:15px;bottom:15px;
}--></style>
</head><body><div id=”title”><p>Text</p><p>Editor</p>
</div><div id=”sub-title”><p>Ohotech 並盛 #5</p><p>@tomio2480</p>
</div></body></html>
TextEditor Ohotech 並盛 #5
@tomio2480
1. About Speaker
3. Why Text Editor
2. About Text Editor
4. More Text Editor
1/4 About Speaker
西原 翔太 – tomio2480北見工業大学 電気電子工学科
オホテク – Ohotech
1/4 About Speaker
その他各地勉強会に居たりする
情報処理技術研究会 – Syoriken現在は宣伝部長 (非公式)
04/62
旭川 18年 → 北見 4年目 (Last !)電気システムコースは強電が専門
最近は美術芸術界隈にお世話に
1/4 About Speaker
月３回くらい札幌 (参考 : @tututen)
Program, Electronic Work本日は Program + Web のお話
05/62
1/4 About Speaker
注意 1
06/62
1/4 About Speaker
今日の内容が分からない人
僕の話を聞いてから色々試してみて下さい。1. エディタのインストール2. 他の環境構築3. HTMLなどの確認自分で出来る場合はお好きになさって下さい。
07/62
1/4 About Speaker
注意 2
08/62
1/4 About Speaker
今日の内容がすでに分かる人僕を無視して以下の作業をしましょう。1. HTML の復習2. CSS の復習・予習3. 実力試験4. 自分の作業
09/62
2/4 About Text Editor
Text Editor
2/4 About Text Editor
11/62
Text Editor
2/4 About Text Editor
てきすと
えでぃた
のなんでしょ！？
12/62
Text Editor
2/4 About Text Editor
てきすと
えでぃた
のその通りです
なんでしょ！？
13/62
Text Editor
2/4 About Text Editor
参考 : 右側主要部の規則
今回はしっかり其々の意味をとらえましょう。
14/62
エディタ
2/4 About Text Editor
エディタ（またはエディター、editor）は、コンピュータ上で各種のオブジェクトを編集するソフトウェア。 単にエディタという場合、テキストエディタを指すことが多い。
引用 : Wikipedia - エディタ
15/62
Text Editor
2/4 About Text Editor
16/62
テキスト
2/4 About Text Editor
テキスト（英語: text、ドイツ語: Text、フランス語:
texte）は、文章や文献のひとまとまりを指して呼ぶ呼称。 言葉によって編まれたもの、という含みを持つ語で、織物（Textile テクスタイル）と同じくラテン語の「織る」が語源である。
引用 : Wikipedia - テキスト
17/62
コンピュータ用語のテキスト
2/4 About Text Editor
引用 : Wikipedia - テキスト
コンピュータ用語では、通信や解析や表示の対象となる文字データ（文字列）を指す。文字の表示の仕方などについて何も付加情報がつけられていないものを特に「プレーンテキスト」、それをファイルに保存したものをテキストファイルと呼び、編集にはしばしばテキストエディタを使用する。
18/62
Text Editor
2/4 About Text Editor
19/62
テキストエディタ
2/4 About Text Editor
コンピュータで文字情報(テキスト)のみのファイル、すなわちテキストファイルを作成、編集、保存するためのソフトウェア（プログラム）である。 一般的に、文字情報の入力、削除、コピー、貼り付け、検索、置換、整形などの機能を備えている。
引用 : Wikipedia - テキストエディタ
20/62
テキストエディタ
2/4 About Text Editor
ワープロソフトは高機能な反面、起動や終了に時間がかかり、動作が鈍重で、出力されるファイルが大きくなる傾向がある。その点、テキストエディタは小回りが利く、素早く動けるなどのメリットがある。禁則処理など日本語編集に特化した機能を搭載したテキストエディタもある。 引用 : Wikipedia - テキストエディタ
21/62
要するに
2/4 About Text Editor
22/62
テキストエディタ
2/4 About Text Editor
コンピュータ上で文字データのみを扱い、編集や保存は勿論のこと、割と自在に編集できるソフトウェア。ワープロのような機能は持たないのが一般的。
と言った感じでしょうか。
23/62
3/4 Why Text Editor
実験
3/4 Why Text Editor
テキストエディタの優位性を確かめる実験です。
25/62
実験目的
3/4 Why Text Editor
テキストエディタとワードソフトウェアの違いを,
htmlファイルの編集, 保存, Webブラウザでの表示を以て確認すること.
26/62
実験手順
3/4 Why Text Editor
1. Microsoft Office Word と メモ帳を用意。2. 両ソフトウェアで同じ文字列を打ち込む。3. 互いに html ファイルとして保存。4. ブラウザでの表示を確認する。
27/62
3/4 Why Text Editor
Word で編集している様子 メモ帳で編集している様子
28/62
結果
3/4 Why Text Editor
29/62
3/4 Why Text Editor
Wordで編集した方 メモ帳で編集した方※ Google Chrome での検証
30/62
3/4 Why Text Editor
Wordで編集した方をメモ帳で開いた様子
ファイルサイズ : 10.8 KB
メモ帳で編集した方をメモ帳で開いた様子ファイルサイズ : 515 B
31/62
3/4 Why Text Editor
マルチスタイルテキスト プレーンテキスト
32/62
コンピュータ用語のテキスト
3/4 Why Text Editor
引用 : Wikipedia - テキスト
コンピュータ用語では、通信や解析や表示の対象となる文字データ（文字列）を指す。文字の表示の仕方などについて何も付加情報がつけられていないものを特に「プレーンテキスト」、それをファイルに保存したものをテキストファイルと呼び、編集にはしばしばテキストエディタを使用する。
33/62
テキストエディタ
3/4 Why Text Editor
コンピュータで文字情報(テキスト)のみのファイル、すなわちテキストファイルを作成、編集、保存するためのソフトウェア（プログラム）である。 一般的に、文字情報の入力、削除、コピー、貼り付け、検索、置換、整形などの機能を備えている。
引用 : Wikipedia - テキストエディタ
34/62
テキストエディタ
3/4 Why Text Editor
ワープロソフトは高機能な反面、起動や終了に時間がかかり、動作が鈍重で、出力されるファイルが大きくなる傾向がある。その点、テキストエディタは小回りが利く、素早く動けるなどのメリットがある。禁則処理など日本語編集に特化した機能を搭載したテキストエディタもある。 引用 : Wikipedia - テキストエディタ
35/62
プレーンテキスト
3/4 Why Text Editor
プレーンテキスト (plain text) とは、コンピュータ上で文章を扱うための一般的なファイルフォーマット、または文字列の形式である。ワードプロセッサで作成した文章とは違い、文字ごとの色や形状、文章に含まれる図などといった情報を含まない。
引用 : Wikipedia - プレーンテキスト
36/62
おまけ
3/4 Why Text Editor
37/62
3/4 Why Text Editor
.docxをWordで開いた様子 .htmlをWordで開いた様子
38/62
要するに
3/4 Why Text Editor
39/62
思い通りに表示されない
3/4 Why Text Editor
テキストエディタで編集しないと、自分の予期しない文字列を勝手に追加されてしまうため、予期せぬ動作をすることになる。
ワードソフトとテキストエディタは一緒ではない！
40/62
4/4 More Text Editor
多様なテキストエディタ
4/4 More Text Editor
テキストエディタ → メモ帳 !!!
他にもいっぱいあります。確かに、メモ帳はテキストエディタですが、もっと色々な機能を持ったテキストエディタもあるのです。
42/62
4/4 More Text Editor
notepad(メモ帳), テキストエディット, Notepad++,
Sublime Text, InType, gPad, TeraPad, さくらエディタ,
秀丸エディタ, EmEditor, Mery, O’s Editor 2, mi,
Vertical Editor, MIFES, mkeditor, UnEditor, 真魚, jedit,
Emacs, ee, Vi, Vim......etc
43/62
4/4 More Text Editor
notepad(メモ帳), テキストエディット, Notepad++,
Sublime Text, InType, gPad, TeraPad, さくらエディタ,
秀丸エディタ, EmEditor, Mery, O’s Editor 2, mi,
Vertical Editor, MIFES, mkeditor, UnEditor, 真魚, jedit,
Emacs, ee, Vi, Vim......etc
44/62
評価基準
4/4 More Text Editor
45/62
着目する点
4/4 More Text Editor
01. 行番号02. 標準の色分け具合03. オートインデント04. 括弧の自動補完05. 用語の自動補完
06. 検索と置換07. タブ (ウィンドウ)
08. 独自コマンド09. 入門しやすさ10. 愛用しやすさ
46/62
着目する点
4/4 More Text Editor
LN. 行番号Sy. 標準の色分け具合AI. オートインデント(). 括弧の自動補完Wd. 用語の自動補完
SR. 検索と置換Tb. タブ (ウィンドウ)
Cm. 独自コマンドBg. 入門しやすさUf. 愛用しやすさ
47/62
notepad (メモ帳)
4/4 More Text Editor
48/62
4/4 More Text Editor
notepad (メモ帳)
Windows UbuntuMac
LN Sy AI () Wd SR Tb Cm Bg Uf
ないないないないない 検索のみないないいとも簡単に触れられる愛用は......ちょっと......
Windows 標準エディタきっと知名度 No.1
フォントくらいは変えられる
49/62
gPad
4/4 More Text Editor
50/62
4/4 More Text Editor
gPad
Windows UbuntuMac
LN Sy AI () Wd SR Tb Cm Bg Uf
ありちょっと少なめありなしあり 両方ありありありシンプルで惑う事無しちゃんと使えば高機能
前回のOhotech並盛で使用欲しい機能は大体ありタブ型インストーラ版とzip版あり
51/62
TeraPad
4/4 More Text Editor
52/62
4/4 More Text Editor
TeraPad
Windows UbuntuMac
LN Sy AI () Wd SR Tb Cm Bg Uf
あり広い範囲に対応ありなしなし両方ありなしあり周りのサポートが手厚いツールも相まって強豪
かなり有名な類いのエディタツールがたくさんあるツール込み版が公式にある
53/62
Vim
4/4 More Text Editor
54/62
4/4 More Text Editor
Vim
Windows UbuntuMac
LN Sy AI () Wd SR Tb Cm Bg Uf
ありかなり広い範囲に対応ありなし？なし？両方ありなし？あり一人では心折れるのでは使い続けると逃避不能
GUIがなくても使用できる熱狂的ファンと熱狂的アンチエディタの敷居を越えるとか
55/62
おまけ
4/4 More Text Editor
56/62
コーディングフォント
4/4 More Text Editor
文字をばちばち打っていて、見分けがつきづらい文字に心当たりがあるかと思います。: ; i I l . , などなど...... そんなときにはコーディングフォントを使いましょう。
57/62
ゆたぽんフォント
4/4 More Text Editor
個人的なおすすめはこいつです。なによりめんこいのでおすすめです。気の荒むような作業でも癒してくれるのではなかろうか。
: ; i I l . , ← こんなところに全角空白が！なんてのもわかりやすいのが特徴です。
58/62
統合開発環境
4/4 More Text Editor
「やたらと飾り付いたテキストエディタを見た」と、仰る場合、粗方それはIDE(統合開発環境)というものでしょう。テキストエディタを内包した強力な開発の手助けをしてくれるツールの事です。
59/62
4/4 More Text Editor
・Visual Studio
・WebMatrix
・Xcode
・Eclipse
・Net Beans
・MPLAB
・HEW
・Audicle
......etcVisual Studio 2012 の見た目
60/62
1. About Speaker
3. Why Text Editor
2. About Text Editor
4. More Text Editor
終
twitter :: @tomio2480
