Texteditor - Ohotech 並盛 #5

>100 Views

September 11, 13

スライド概要

Ohotech 並盛 #5 にて。
何故テキストエディタが必要か。Wordとは違うのか。
データの内容にも触れながら、簡単に説明したつもり。

シェア

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.
[beta]
<!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;

Text
Editor

}
#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>
Ohotech 並盛 #5
</div>
</body>
@tomio2480
</html>

2.

1. About Speaker 2. About Text Editor 3. Why Text Editor 4. More Text Editor

3.

1/4 About Speaker

4.

1/4 About Speaker 西原 翔太 – tomio2480 北見工業大学 電気電子工学科 オホテク – Ohotech その他各地勉強会に居たりする 情報処理技術研究会 – Syoriken 現在は宣伝部長 (非公式) 04/62

5.

1/4 About Speaker 旭川 18年 → 北見 4年目 (Last !) 電気システムコースは強電が専門 最近は美術芸術界隈にお世話に 月3回くらい札幌 (参考 : @tututen) Program, Electronic Work 本日は Program + Web のお話 05/62

6.

1/4 About Speaker 注意 1 06/62

7.

1/4 About Speaker 今日の内容が分からない人 僕の話を聞いてから色々試してみて下さい。 1. エディタのインストール 2. 他の環境構築 3. HTMLなどの確認 自分で出来る場合はお好きになさって下さい。 07/62

8.

1/4 About Speaker 注意 2 08/62

9.

1/4 About Speaker 今日の内容がすでに分かる人 僕を無視して以下の作業をしましょう。 1. HTML の復習 2. CSS の復習・予習 3. 実力試験 4. 自分の作業 09/62

10.

2/4 About Text Editor

11.

2/4 About Text Editor Text Editor 11/62

12.

2/4 About Text Editor と す き て の Text Editor なんで しょ! ? た ぃ で え 12/62

13.

2/4 About Text Editor と す き て の Text Editor なんで しょ! ? その通りです た ぃ で え 13/62

14.

2/4 About Text Editor 参考 : 右側主要部の規則 Text Editor 今回はしっかり 其々の意味をとらえましょう。 14/62

15.

2/4 About Text Editor エディタ エディタ(またはエディター、editor)は、コンピュ ータ上で各種のオブジェクトを編集するソフトウェ ア。 単にエディタという場合、テキストエディタを指 すことが多い。 引用 : Wikipedia - エディタ 15/62

16.

2/4 About Text Editor Text Editor 16/62

17.

2/4 About Text Editor テキスト テキスト(英語: text、ドイツ語: Text、フランス語: texte)は、文章や文献のひとまとまりを指して呼ぶ 呼称。 言葉によって編まれたもの、という含みを持つ 語で、織物(Textile テクスタイル)と同じくラテン 語の「織る」が語源である。 引用 : Wikipedia - テキスト 17/62

18.

2/4 About Text Editor コンピュータ用語のテキスト コンピュータ用語では、通信や解析や表示の対象とな る文字データ(文字列)を指す。文字の表示の仕方な どについて何も付加情報がつけられていないものを特 に「プレーンテキスト」、それをファイルに保存した ものをテキストファイルと呼び、編集にはしばしばテ キストエディタを使用する。 引用 : Wikipedia - テキスト 18/62

19.

2/4 About Text Editor Text Editor 19/62

20.

2/4 About Text Editor テキストエディタ コンピュータで文字情報(テキスト)のみのファイル、 すなわちテキストファイルを作成、編集、保存するた めのソフトウェア(プログラム)である。 一般的に、 文字情報の入力、削除、コピー、貼り付け、検索、置 換、整形などの機能を備えている。 引用 : Wikipedia - テキストエディタ 20/62

21.

2/4 About Text Editor テキストエディタ ワープロソフトは高機能な反面、起動や終了に時間が かかり、動作が鈍重で、出力されるファイルが大きく なる傾向がある。その点、テキストエディタは小回り が利く、素早く動けるなどのメリットがある。禁則処 理など日本語編集に特化した機能を搭載したテキスト エディタもある。 引用 : Wikipedia - テキストエディタ 21/62

22.

2/4 About Text Editor 要するに 22/62

23.

2/4 About Text Editor テキストエディタ コンピュータ上で文字データのみを扱い、編集や保存 は勿論のこと、割と自在に編集できるソフトウェア。 ワープロのような機能は持たないのが一般的。 と言った感じでしょうか。 23/62

24.

3/4 Why Text Editor

25.

3/4 Why Text Editor 実験 テキストエディタの 優位性を確かめる実験です。 25/62

26.

3/4 Why Text Editor 実験目的 テキストエディタとワードソフトウェアの違いを, htmlファイルの編集, 保存, Webブラウザでの表示を 以て確認すること. 26/62

27.

3/4 Why Text Editor 実験手順 1. Microsoft Office Word と メモ帳を用意。 2. 両ソフトウェアで同じ文字列を打ち込む。 3. 互いに html ファイルとして保存。 4. ブラウザでの表示を確認する。 27/62

28.

3/4 Why Text Editor Word で編集している様子 メモ帳で編集している様子 28/62

29.

3/4 Why Text Editor 結果 29/62

30.

3/4 Why Text Editor Wordで編集した方 メモ帳で編集した方 ※ Google Chrome での検証 30/62

31.

3/4 Why Text Editor Wordで編集した方を メモ帳で編集した方を メモ帳で開いた様子 メモ帳で開いた様子 ファイルサイズ : 10.8 KB ファイルサイズ : 515 B 31/62

32.

3/4 Why Text Editor マルチスタイルテキスト プレーンテキスト 32/62

33.

3/4 Why Text Editor コンピュータ用語のテキスト コンピュータ用語では、通信や解析や表示の対象とな る文字データ(文字列)を指す。文字の表示の仕方な どについて何も付加情報がつけられていないものを特 に「プレーンテキスト」、それをファイルに保存した ものをテキストファイルと呼び、編集にはしばしばテ キストエディタを使用する。 引用 : Wikipedia - テキスト 33/62

34.

3/4 Why Text Editor テキストエディタ コンピュータで文字情報(テキスト)のみのファイル、 すなわちテキストファイルを作成、編集、保存するた めのソフトウェア(プログラム)である。 一般的に、 文字情報の入力、削除、コピー、貼り付け、検索、置 換、整形などの機能を備えている。 引用 : Wikipedia - テキストエディタ 34/62

35.

3/4 Why Text Editor テキストエディタ ワープロソフトは高機能な反面、起動や終了に時間が かかり、動作が鈍重で、出力されるファイルが大きく なる傾向がある。その点、テキストエディタは小回り が利く、素早く動けるなどのメリットがある。禁則処 理など日本語編集に特化した機能を搭載したテキスト エディタもある。 引用 : Wikipedia - テキストエディタ 35/62

36.

3/4 Why Text Editor プレーンテキスト プレーンテキスト (plain text) とは、コンピュータ上 で文章を扱うための一般的なファイルフォーマット、 または文字列の形式である。ワードプロセッサで作成 した文章とは違い、文字ごとの色や形状、文章に含ま れる図などといった情報を含まない。 引用 : Wikipedia - プレーンテキスト 36/62

37.

3/4 Why Text Editor おまけ 37/62

38.

3/4 Why Text Editor .docxをWordで開いた様子 .htmlをWordで開いた様子 38/62

39.

3/4 Why Text Editor 要するに 39/62

40.

3/4 Why Text Editor 思い通りに表示されない テキストエディタで編集しないと、自分の予期しない 文字列を勝手に追加されてしまうため、予期せぬ動作 をすることになる。 ワードソフトとテキストエディタは一緒ではない! 40/62

41.

4/4 More Text Editor

42.

4/4 More Text Editor 多様なテキストエディタ テキストエディタ → メモ帳 !!! 他にもいっぱいあります。 確かに、メモ帳はテキストエディタですが、もっと 色々な機能を持ったテキストエディタもあるのです。 42/62

43.

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

44.

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

45.

4/4 More Text Editor 評価基準 45/62

46.

4/4 More Text Editor 着目する点 01. 行番号 06. 検索と置換 02. 標準の色分け具合 07. タブ (ウィンドウ) 03. オートインデント 08. 独自コマンド 04. 括弧の自動補完 09. 入門しやすさ 05. 用語の自動補完 10. 愛用しやすさ 46/62

47.

4/4 More Text Editor 着目する点 LN. 行番号 SR. 検索と置換 Sy. 標準の色分け具合 Tb. タブ (ウィンドウ) AI. オートインデント Cm. 独自コマンド (). 括弧の自動補完 Bg. 入門しやすさ Wd. 用語の自動補完 Uf. 愛用しやすさ 47/62

48.

4/4 More Text Editor notepad (メモ帳) 48/62

49.

4/4 More Text Editor Windows Mac Ubuntu Windows 標準エディタ きっと知名度 No.1 フォントくらいは変えられる notepad (メモ帳) LN ない Sy ない AI ない () ない Wd ない SR 検索のみ Tb ない Cm ない Bg いとも簡単に触れられる Uf 愛用は......ちょっと...... 49/62

50.

4/4 More Text Editor gPad 50/62

51.

4/4 More Text Editor Windows Mac Ubuntu 前回のOhotech並盛で使用 欲しい機能は大体ありタブ型 インストーラ版とzip版あり gPad LN あり Sy ちょっと少なめ AI あり () なし Wd あり SR 両方あり Tb あり Cm あり Bg シンプルで惑う事無し Uf ちゃんと使えば高機能 51/62

52.

4/4 More Text Editor TeraPad 52/62

53.

4/4 More Text Editor Windows Mac Ubuntu かなり有名な類いのエディタ ツールがたくさんある ツール込み版が公式にある TeraPad LN あり Sy 広い範囲に対応 AI あり () なし Wd なし SR 両方あり Tb なし Cm あり Bg 周りのサポートが手厚い Uf ツールも相まって強豪 53/62

54.

4/4 More Text Editor Vim 54/62

55.

4/4 More Text Editor Windows Mac Ubuntu GUIがなくても使用できる 熱狂的ファンと熱狂的アンチ エディタの敷居を越えるとか Vim LN あり Sy かなり広い範囲に対応 AI あり () なし? Wd なし? SR 両方あり Tb なし? Cm あり Bg 一人では心折れるのでは Uf 使い続けると逃避不能 55/62

56.

4/4 More Text Editor おまけ 56/62

57.

4/4 More Text Editor コーディングフォント 文字をばちばち打っていて、見分けがつきづらい文字 に心当たりがあるかと思います。 :;iIl., などなど...... そんなときにはコーディング フォントを使いましょう。 57/62

58.

4/4 More Text Editor ゆたぽんフォント 個人的なおすすめはこいつです。なによりめんこいの でおすすめです。気の荒むような作業でも癒してくれ るのではなかろうか。 : ; i I l . , ← こんなところに全角空白が! なんてのもわかりやすいのが特徴です。 58/62

59.

4/4 More Text Editor 統合開発環境 「やたらと飾り付いたテキストエディタを見た」と、 仰る場合、粗方それはIDE(統合開発環境)というもの でしょう。テキストエディタを内包した強力な開発の 手助けをしてくれるツールの事です。 59/62

60.

4/4 More Text Editor ・Visual Studio ・WebMatrix ・Xcode ・Eclipse ・Net Beans ・MPLAB ・HEW ・Audicle Visual Studio 2012 の見た目 ......etc 60/62

61.

1. About Speaker 2. About Text Editor 3. Why Text Editor 4. More Text Editor

62.

終 twitter :: @tomio2480