Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”utf-8”>
<title>
Ohotech 並盛 #5
</title>
<style type=”text/css”>
<!--...
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
月3回くらい札幌 (参考 : @tututen)
Program, Electronic Wor...
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)は、コンピュ
ータ上で各種のオブジェクトを編集するソフトウェ
ア。 単にエディタという場合、テキストエディタを指
すことが多い。
引用 : Wiki...
Text Editor
2/4 About Text Editor
16/62
テキスト
2/4 About Text Editor
テキスト(英語: text、ドイツ語: Text、フランス語:
texte)は、文章や文献のひとまとまりを指して呼ぶ
呼称。 言葉によって編まれたもの、という含みを持つ
語で、織物(Text...
コンピュータ用語のテキスト
2/4 About Text Editor
引用 : Wikipedia - テキスト
コンピュータ用語では、通信や解析や表示の対象とな
る文字データ(文字列)を指す。文字の表示の仕方な
どについて何も付加情報がつけ...
Text Editor
2/4 About Text Editor
19/62
テキストエディタ
2/4 About Text Editor
コンピュータで文字情報(テキスト)のみのファイル、
すなわちテキストファイルを作成、編集、保存するた
めのソフトウェア(プログラム)である。 一般的に、
文字情報の入力、削除、コピー...
テキストエディタ
2/4 About Text Editor
ワープロソフトは高機能な反面、起動や終了に時間が
かかり、動作が鈍重で、出力されるファイルが大きく
なる傾向がある。その点、テキストエディタは小回り
が利く、素早く動けるなどのメリッ...
要するに
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. ブラウザでの表示を確認する...
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 - テキスト
コンピュータ用語では、通信や解析や表示の対象とな
る文字データ(文字列)を指す。文字の表示の仕方な
どについて何も付加情報がつけられ...
テキストエディタ
3/4 Why Text Editor
コンピュータで文字情報(テキスト)のみのファイル、
すなわちテキストファイルを作成、編集、保存するた
めのソフトウェア(プログラム)である。 一般的に、
文字情報の入力、削除、コピー、貼...
テキストエディタ
3/4 Why Text Editor
ワープロソフトは高機能な反面、起動や終了に時間が
かかり、動作が鈍重で、出力されるファイルが大きく
なる傾向がある。その点、テキストエディタは小回り
が利く、素早く動けるなどのメリットが...
プレーンテキスト
3/4 Why Text Editor
プレーンテキスト (plain text) とは、コンピュータ上
で文章を扱うための一般的なファイルフォーマット、
または文字列の形式である。ワードプロセッサで作成
した文章とは違い、文...
おまけ
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, M...
4/4 More Text Editor
notepad(メモ帳), テキストエディット, Notepad++,
Sublime Text, InType, gPad, TeraPad, さくらエディタ,
秀丸エディタ, EmEditor, M...
評価基準
4/4 More Text Editor
45/62
着目する点
4/4 More Text Editor
01. 行番号
02. 標準の色分け具合
03. オートインデント
04. 括弧の自動補完
05. 用語の自動補完
06. 検索と置換
07. タブ (ウィンドウ)
08. 独自コマンド
0...
着目する点
4/4 More Text Editor
LN. 行番号
Sy. 標準の色分け具合
AI. オートインデント
(). 括弧の自動補完
Wd. 用語の自動補完
SR. 検索と置換
Tb. タブ (ウィンドウ)
Cm. 独自コマンド
B...
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 
ない
ない
ない
ない
ない 
検索のみ
ない
ない
いと...
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 
あり
ちょっと少なめ
あり
なし
あり 
両方あり
あり
あり
シンプルで惑...
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 
あり
広い範囲に対応
あり
なし
なし
両方あり
なし
あり
周りのサ...
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 
あり
かなり広い範囲に対応
あり
なし?
なし?
両方あり
なし?
あり
一人...
おまけ
4/4 More Text Editor
56/62
コーディングフォント
4/4 More Text Editor
文字をばちばち打っていて、見分けがつきづらい文字
に心当たりがあるかと思います。
: ; i I l . ,   などなど...... そんなときにはコーディング
フォントを使いま...
ゆたぽんフォント
4/4 More Text Editor
個人的なおすすめはこいつです。なによりめんこいの
でおすすめです。気の荒むような作業でも癒してくれ
るのではなかろうか。
: ; i I l . ,   ← こんなところに全角空白が!...
統合開発環境
4/4 More Text Editor
「やたらと飾り付いたテキストエディタを見た」と、
仰る場合、粗方それはIDE(統合開発環境)というもの
でしょう。テキストエディタを内包した強力な開発の
手助けをしてくれるツールの事です。...
4/4 More Text Editor
・Visual Studio
・WebMatrix
・Xcode
・Eclipse
・Net Beans
・MPLAB
・HEW
・Audicle
......etcVisual Studio 2012...
1. About Speaker
3. Why Text Editor
2. About Text Editor
4. More Text Editor
終
twitter :: @tomio2480
Upcoming SlideShare
Loading in …5
×

Texteditor - Ohotech 並盛 #5

727 views

Published on

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

  • accessibility Books Library allowing access to top content, including thousands of title from favorite author, plus the ability to read or download a huge selection of books for your pc or smartphone within minutes ,Download or read Ebooks here ... ......................................................................................................................... Download FULL PDF EBOOK here { https://urlzs.com/UABbn }
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Texteditor - Ohotech 並盛 #5

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

×