Linuxの勉強を始めよう ～2. Linuxをどこへインストールする？～

前回はLinuxディストリビューションについて紹介しましたが、今日は今時のLinux活用事例について紹介します。


2. Linuxをどこへインストールする？

まずはやってみたいことを簡単に考えてみましょう。
難しく考え始めたらあれもこれもとなってしまい、なかなか着手できずじまいになってしまいがちです。
軽い気持ちで、「サーバーを構築したい」とか「LPICをとってみたい」とか「電子工作をしてみたい」とか
そんなノリで始めて行ったほうが長く続けられると思います。
逆に何も思いつかずに闇雲に進めても長く続けられないかもしれません。
長く継続して勉強できること、それがLinuxの興味へと繋がると思います。

やってみたいことを思いついたら、どこかへLinuxをインストールして自分の環境を構築しましょう。
Linux環境を手に入れるのも、数年前に比べたら非常に環境構築しやすい状況になっています。
オススメは下記のとおりです。

・サーバーを構築してみたい　→　クラウド環境（IaaS）を利用する
・LPICをとってみたい　→　仮想PC（VMware、VirtualBoxなど）を利用する
・電子工作をしてみたい　→　小型PC（Raspberry piなど）を利用する
・Linuxをガチで勉強してカーネルハックなどしてみたい　→　中古、もしくはジャンクPCを利用する

サーバー運用の仕事をしているので、自分用のサーバーをどこかに用意したいという方は、
IaaSといったクラウドサービスを利用することがおすすめです。
仕事ではMicorosoft Azure、AWSなどを利用されてる方も多いかと思いますが、
個人での利用する場合は、さくらインターネットやConoHaといった、もう少し安価で利用できるものでも十分でしょう。
1ヶ月600円くらいから利用できるものもありますので、
自宅サーバーを構築して電気代がかかってしまうよりも、安くて使いやすいかもしれません。

手元にちょっとしたLinuxマシンを置いておきたいという場合は、Raspberry piといった小型PCを使うのがおすすめです。
Raspberry piはいくつか種類がありますが、3000円くらいから利用できるものもあります。
ちょっと面倒くさいと感じる箇所もあるかもしれませんが、いろいろ弄りながら遊べるという点は魅力的です。

環境を何度壊してもいいからLinuxをガチで勉強したいという場合は、
中古PC屋やジャンク屋に行って、古いPCを購入してしまうのもありだと思います。
5年位前のCore2Duo世代のPCであればLinuxは十分なほど動きますし、値段も5000円位から手に入るでしょう。
オープンソースカンファレンスなどへ足を運び、展示ブースを見渡すとわかるかと思いますが、
ガチなLinux使いほどちょっと古めのPCを常用マシンとしていたりするものです。


3. コミュニティー活動にも参加してみよう！

さて、Linuxがインストールが終わって一見落着！
…ではなく、ここからがLinuxを始めるスタートラインです。
ただインストールした後でも、この後何をしよう？とか、ここがわからなくて先に進めない！なんてことがあると思います。
そんな時に役に立つのがコミュニティーです。

OSSのコミュニティーの活動はソースコードを書くことだけではありません。
バグを報告すること、それによってバグが解決されることも、OSSコミュニティーには重要な要素となります。
ただし、OSSのMLなどは有償のサポートセンターではありませんので、少しだけ注意が必要です。
あまりいい加減な質問をしてしまうと、誰にも相手にされない可能性もあります。
まずは何がしたくて何ができなかったのか、明確に伝えられるようにしましょう。
難しいと思ってしまうかもしれませんが、これもひとつのスキルですよね！

（参考）技術系メーリングリストで質問するときのパターン・ランゲージ（ http://www.hyuki.com/writing/techask.html ）

やっぱしMLなどは堅苦しくてそんなのムリ！という方は、勉強会などに参加してみてはいかがでしょうか。
勉強会にもいろんなパターンがありますが、懇親会がある場合にはその場で知ってそうな人に聞いてみるのもひとつの手です。
また、下記のLinuxユーザグループ（=らぐ）では活動報告会形式をとっています。
いろいろやってみて躓いた話などをすると非常に盛り上がるので、ぜひ一度足を運んでみましょう。

（東京）小江戸らぐ（ http://hatochan.dyndns.org/koedolug/ ）
（主に東海地方）東海道らぐ（ http://tokaidolug.colorfultime.net/ ）
（関西）LILO（ http://lilo.linux.or.jp/ ）
（鹿児島）鹿児島らぐ（ https://kagolug.org/ ）

※筆者の知ってる範囲で記載しました。ここでもやってるという方がいらっしゃいましたら一報をお願いいたします。

また、全国各地で開催されるオープンソースカンファレンスなどに足を運ぶと、
Linuxのことに限らず、オープンソースに関するあらゆる展示、セミナー等が無料で見ることができます。
このようなイベントに足を運んでみるのも、興味を持つひとつのきっかけになるかと思います。

・オープンソースカンファレンス（ http://www.ospn.jp/ ） ※2/26,2/27は東京で開催されます！
・関西オープンフォーラム（ https://k-of.jp/ ）　※2015年のURLに飛びますが今年もあると思います


最後に。
最初から大きなことをするよりも、小さなことから少しずつ始めるのがいいかと思います。
もちろん失敗はつきものです。
失敗しても、その次へと継続することが大切だと思います。

それではLinuxを楽しんでいきましょう！
Have a lot of fun!!!

monipet
　　動物病院の犬猫の見守りをサポート
　　病院を離れる夜間でも安心

ASSE/CORPA
　　センサー、IoT、ビッグデータを活用して新たな価値を創造
　　「できたらいいな」を「できる」に

OSGi対応 ECHONET Lite ミドルウェア
　　短納期HEMS開発をサポート！

GuruPlug
　　カードサイズ スマートサーバ

株式会社ジェイエスピー
　　横浜に拠点を置くソフトウェア開発・システム開発・
　　製品開発(monipet)、それに農業も手がけるIT企業

Linuxの勉強を始めよう ～１．Linuxディストリビューション編～

今年ももう(？)２ヶ月が経過しましたが、「今年こそは新しいことを勉強していくぞ」という方に向けてのお話です。

ここ最近、エコシステムというキーワードとともに、OSSの活用が徐々に注目されつつあります。
そのOSSを活用していく中で、どうしても避けては通れないものはLinuxではないでしょうか。
しかしLinuxを勉強するのにどこから手を付けていいのか、迷っている方も多いかと思います。
今回は今時のLinuxの学び始めを紹介していきます。
今日はまず、今時のLinuxディストリビューションについてです。


1. Linuxディストリビューションは何を選ぼう？

　Linuxディストリビューションとは、コミュニティーなどがLinuxを使いやすい形にまとめて、配布しているもののことを言います。
　Linuxをインストールするのに一番手っ取り早い方法は、Linuxディストリビューションを利用することでしょう。
　初心者の方は、比較的情報の集まりやすいUbuntuから始めると、とっつきやすいと思います。
　また仕事でLinuxを触れてる方は、仕事と同じディストリビューション（主にCentOSやFedoraでしょうか）を使ってみるのもありでしょう。
　ですが本気でLinuxを学びたい場合は、敢えて仕事とは違うディストリビューションを使ってみても面白いと思います。
　ここでは、CentOSやUbuntuといった誰でも知ってるディストリビューションの紹介は割愛して、
　上記以外で是非とも知っておきたいディストリビューションを３つ紹介します。


　・Debian（ http://www.debian.or.jp/ ）　～非常に活発な開発コミュニティー～

　DebianはUbuntuの派生元ディストリビューションとして有名ですが、その魅力はなんと言っても豊富なパッケージ数でしょう。
　これはDebianの開発者が非常に多いという点に起因していると思います。
　日本語ML（メーリングリスト）もユーザ用と開発者用がそれぞれあり、どちらも非常に活発なMLです。
　他のディストリビューションとは比較にならないほどの投稿数となっています。

　最新バージョンであるDebian 8（=Jessie※）では、インストール時にデスクトップ環境が選択できるようになっており、自分好みのデスクトップをインストールできます。
　Debianの場合、デスクトップ環境にはGNOME, Xfce, KDE, Cinnamon, MATE, LXDEと非常に豊富な選択肢がありますが、
　これもやはり開発者数が多いからこそ成せるものでしょう。
　なおDebianでは、ややハイスペックなPCを利用する場合はGNOME、古めのPCで動かしたい場合はXfceを選択する方が多いのではと思います。
　※ちなみに、Debianのコードネームは全てトイ・ストーリーのキャラクター名になっています。

　Debianプロジェクトには、Debianフリーソフトウェアガイドライン（DFSG）と呼ばれるガイドラインが存在し、
　Debianが考える「フリーなソフトウェアとは何か」というのを定義して、これを満たしたフリーソフトウェアでDebianは構成されています。
　このようにガイドラインを明確にすることで、開発者を増やしていったのかもしれませんね。

　・The Debian Free Software Guidelines (DFSG)（ http://www.debian.org/social_contract#guidelines ）
　・「あなた」と オープンソース／フリーソフトウェア、 そして「Debian」 （やまね氏の解説）（ http://www.slideshare.net/henrich_d/20081107-k-ofsession ）

　毎月、東京Debian勉強会（ https://tokyodebian.alioth.debian.org/ ）、関西Debian勉強会（ https://wiki.debian.org/KansaiDebianMeeting ）も開催されています。
　興味のある方は是非そちらも参加してみましょう。


　・Linux Mint（ http://linuxmint-jp.net/ ）　～DistroWatchで常にトップのディストリビューション～

　DebianはUbuntuの派生元ディストリビューションでしたが、Linux MintはUbuntuの派生先ディストリビューションですね。
　日本ではあまり知られていないディストリビューションかと思いますが、
　DistroWatch（ http://distrowatch.com/index.php?language=JP ）のページヒットランキングでは、2011年から常にトップをキープしています。
　（こうしてみるとFedoraやCentOSに偏向しがちな日本はちょっと特殊なのかもしれませんね…）

　Linux Mintのデスクトップ環境は、Debianほどではありませんがやはり豊富な選択肢があります。
　Debianのようにインストール時にデスクトップ環境を選択するのではなく、
　インストーラそのものが、Cinnamon版、MATE版、KDE版、Xfce版と分かれています。
　（Mintというと、ちょっとハイスペックなPCの場合はCinnamon、古めのPCでさくさく動かしたい場合はMATEを使う方が多いようです）
　なお最新版のLinux Mint 17.3はUbuntuベースとなっており、インストーラもUbuntuとほとんど似たものとなっていますが、
　DebianベースのLMDE2というものも存在し、Debianに慣れた人はこちらの方がおすすめでしょう。
　Linux Mintの使い方などについては、下記のドキュメントをご覧ください。

　・Linux Mint Cinnamonエディション オフィシャルユーザーガイド（PDF）（ http://www.linuxmint.com/documentation/user-guide/Cinnamon/japanese_17.0.pdf ）
　　（Linux Mintのコードネームは女性の名前だったのですね…）

　使い勝手としては、Ubuntuと似たようなUIながら、さらにシンプルで初心者に扱いやすい印象を受けます。
　日本語環境を整えるのがやや手間がかかる面もありますが、
　そこさえ乗りきれればとても扱いやすいディストリビューションと言えるでしょう。

　世界で最も注目されているディストリビューションLinux Mintを、是非試してみてはいかがでしょうか。


　・openSUSE（ https://www.opensuse.org/ ）　～YaSTでサーバーからデスクトップまでオールマイティーなディストリビューション～

　最後に紹介するのは、こちらも老舗のひとつであるopenSUSEです。
　某Linuxの雑誌にその特徴を「欧州」という（謎の）分類で紹介されてしまうほど、ヨーロッパでは非常に根強い人気を誇っています。
　openSUSEというとデスクトップ環境はKDEと思われがちですが、正確にはKDEの他、GNOME、Xfceなどがインストール時に選択できます。
　比較的古いPCで利用したい場合は、Xfceを選択するとさくさく動くと思います。

　openSUSEの特徴といえば、なんといってもYaSTでしょう。
　YaSTはWindowsでいうところのコントロールパネルみたいなもので、メニューを選択していくだけであらゆる設定ができてしまいます。
　それだけにとどまらず、アドオンを追加していくことでApacheやSambaといったサーバーの設定も全てYaSTから行えます。
　そのため、簡単なテストサーバーを構築したりするときには、非常に便利なディストリビューションと言えるでしょう。
　裏返すとほとんどメニューから選択するだけで何でもできてしまうため、設定ファイルの使い方などを覚えられなかったりします。
　LPICの勉強にはあまり向いていないかもしれませんね。

　また昨年11月にリリースされた最新版openSUSE Leap 42.1では、商用版であるSUSE Linux Enterpriseとコアな部分を統合しました。
　これによりオープンソースでありながら、商用版と同レベルの安定性に達することを期待されています。

　・openSUSE Leap 42.1 とは？ （ちょっと古い記事ですが）（ http://www.slideshare.net/ftake/opensuse-leap-421 ）

　最近ではopenSUSEの日本コミュニティーもコミケで冊子を販売するなど、徐々に活発になってきました。
　まだopenSUSEを使ったことがない方は、是非一度お試しいただけたらと思います。


・まだまだ他にもある…

　他にも注目されているLinuxディストリビューションは沢山あります。
　・ローリングリリースモデルで注目を浴びているArch Linux
　・某国立大学で絶大な人気を誇るGentoo Linux
　・Windowsに画面がそっくりで初心者にも優しいZorin OS

　その他にも挙げればキリがないほど沢山あるので、いろいろ試して自分に合ったものを使ってみるのが一番でしょう。

　次回はLinuxを活用する方法を紹介していきます。

monipet
　　動物病院の犬猫の見守りをサポート
　　病院を離れる夜間でも安心

ASSE/CORPA
　　センサー、IoT、ビッグデータを活用して新たな価値を創造
　　「できたらいいな」を「できる」に

OSGi対応 ECHONET Lite ミドルウェア
　　短納期HEMS開発をサポート！

GuruPlug
　　カードサイズ スマートサーバ

株式会社ジェイエスピー
　　横浜に拠点を置くソフトウェア開発・システム開発・
　　製品開発(monipet)、それに農業も手がけるIT企業

データ転送

今回はデータ転送について、紹介していきたいと思います。

現在のコンピューター内では、記憶媒体へのデータ転送はシリアルATAという規格が主流となっていますが、
シリアル以前にはパラレルケーブルによるデータ転送しかありませんでした。

パラレル転送は複数の経路を使い並列でデータ転送するのに対し、シリアル転送は１本化したデータを転送します。
普通に考えれば、パラレルの方が効率が良いように思えるのですが、同時に転送したデータが揃うまで待ち合わせが発生する
という制約によりシリアル転送を高速化する流れが主流となり、現在に至っています。

では、パラレル方式のデータ転送から紹介して行きましょう。

◆IDE（Integrated Drive Electronics）

　コンピューターと記憶媒体の接続方式として規格化されたものは、これが最初だと思われます。
　しかし、容量が504MBを超える領域が認識できない問題があり、次のEIDEが登場します。

◆EIDE（Enhanced IDE）

　1994年頃に504MBの限界を超えるための拡張がIDEに施されました。
　さらに、転送モードによる高速化やATAPI規格対応も行われました。
　パラレルケーブルは40芯か80芯のフラットケーブルなのですが、
　プライマリー（マスター／スレーブ）とセカンダリー（マスター／スレーブ）の標準化により
　最大４台まで接続可能となりました。

◆ATAPI（ATA Packet Interface）

　当時の記憶媒体として、HDDを除けばCDドライブがメインでしたが、IDE規格では
　制御コマンドが存在せずHDD以外は接続できませんでした。
　そこで、SCSI形式の制御コマンドを発行できる規格として登場しました。

　ちょうどこのあたりが、Windows95が登場した時代です。

◆ATA33/ATA66/ATA100/ATA133

　EIDEの頃に出てきた転送モード（モード名はUDMAXX）で、改良された規格が続々と現れます。
　転送速度は33～133MB/sなので、今となっては速さは感じませんが、新しい規格が世の中に出るたびに
　わくわくしながら新しいマザーボードに買い替えていた気がします。

◆SATA/SATA2/SATA3

　パラレルからシリアルへ移り変わりの際、速度のメリットよりもケーブルがスリムになったことで喜んだものです。
　転送速度はというと、SATAが150MB/sでSATA2で300MB/sになり、SATA3だと600MB/sです。
　旧世代のパラレル転送を上回り進化を続けていますが、そろそろ理論的に限界が見えているようでもあります。
　HDDよりもデータ入出力が格段に速いSSDで、500MB/sを超えるものも出回ってきていて
　このままだとSATA3の次の規格が出てくるか、別の規格へシフトしそうなところです。

過去の記事で、CPUのスペック的な理論限界値を迎えてからの動向を紹介しましたが、
データ転送に関しては、まだまだ行けそうな雰囲気はあります。
コンピューター内部の機器同士を繋ぐ規格を含めれば、もっと速い規格があるからです。
とはいえ、CPUが電気の伝わる速度が原因で性能的な限界を迎えたのと同じように、
データ転送も最終的には、電気の伝わる速度によって限界を迎える日が来るのでしょうか・・・

と思っていたら、SATA ExpressとかM.2とか新しい規格があるし・・・

monipet
　　動物病院の犬猫の見守りをサポート
　　病院を離れる夜間でも安心

ASSE/CORPA
　　センサー、IoT、ビッグデータを活用して新たな価値を創造
　　「できたらいいな」を「できる」に

OSGi対応 ECHONET Lite ミドルウェア
　　短納期HEMS開発をサポート！

GuruPlug
　　カードサイズ スマートサーバ

株式会社ジェイエスピー
　　横浜に拠点を置くソフトウェア開発・システム開発・
　　製品開発(monipet)、それに農業も手がけるIT企業

変速機

今回は自分の好きな分野に戻り、
自動車の変速機について紹介したいと思います。

現在、世間で走っている自動車は、オートマチックトランスミッション（AT）
または無段変速機（CVT）が大多数を占めます。
昔からあるマニュアルトランスミッション（MT）、
その進化系であるデュアルクラッチトランスミッション（DCT）まで含め
大雑把ですが合計４種類の方式に分類することができます。

では、古い順に説明していきましょう。

◆マニュアルトランスミッション（MT）

　エンジンから出力された動力は、トランスミッション内の歯車を経由してタイヤへ伝達されます。
　減速比が異なる歯車を経由させることにより、変速させる仕組みです。
　変速時に歯車を切替える際は、クラッチ操作が必要となります。
　スポーツカーで採用されるケースが多い理由は、機械的な構造が単純で小型軽量化できる点と
　操作感が良い点に尽きます。

◆オートマチックトランスミッション（AT）

　クラッチ操作を自動化した変速機を指します。
　トルクコンバーターを利用して変速させる仕組みですが、
　現在ではクラッチの役目だけに留め、変速機能は別に変速機を付随する方が主流です。
　変速機の機能はもちろん電子制御され、走行状況に応じて自動的に
　減速比の切り替えが行われます。

　名前は知っているけど原理は知らなかったトルクコンバーターですが、意外と単純な原理でした。
　ATフルードと呼ばれるオイルに満たされた円盤状の容器の中にクラッチが内蔵されています。
　クラッチ板にブレード（タービンの羽のイメージ）が付いていて、
　回転が速く力強くなるほど、クラッチ板が密着するようブレードに角度が付いています。

◆無段変速機（CVT）

　クラッチ操作を自動化する部分はオートマチックトランスミッションと同じく
　トルクコンバーターを利用しています。（使っていない事もあるようです・・・）
　違う部分は減速比を切り替える仕組みで、プーリーとベルトで力を伝達します。
　ただのプーリーでは減速比を切り替えられませんので、
　円錐形のコマのようなものを２つ向き合わせた形のプーリーを利用します。
　２つのコマの間に出来た谷の部分にベルトを掛けて力を伝達させますので、
　プーリー間の距離を調整することにより、ベルトが掛かる部分が高くなったり低くなったり変化します。
　結果的にプーリーの径を無段階に調整できるわけです。

　発進時は、エンジン側のプーリーで径が大きい方にベルトを掛け
　タイヤ側のプーリーで径が小さい方にベルトを掛けて力を出します。
　高速巡航時は逆に、エンジン側のプーリーで径が小さい方、
　タイヤ側のプーリーで径が大きい方にベルトを掛けて速度を稼ぎます。
　無段階なので、常にエンジンが得意としている回転域で走れるため、
　理論上は一番燃費の良い変速機と言えると思います。

◆デュアルクラッチトランスミッション（DCT）

　市販されたのは2000年前半ですが、自動車用の変速機としては最新です。
　仕組みはというと、文字通りクラッチが２つ存在し、それぞれが奇数段の減速比をもつ変速機と
　偶数段の減速比をもつ変速機へと接続されています。

　発進時、奇数段の変速機が１速の状態でクラッチを繋げます。
　偶数段の変速機は２速の状態でクラッチを切って待機します。
　徐々に速度が上がり、シフトアップのタイミングになると、
　奇数段側のクラッチを切って偶数段側のクラッチを繋げます。
　次は奇数段の変速機を３速に変え、シフトアップのタイミングを待ちます。
　つまり、クラッチを切ったり繋げたりするだけで、シフトチェンジが完了するので
　シフトチェンジが非常に速く、パワーロスが少ない利点があり、
　最近はスポーツカーで採用されるようになってきています。

変速機の歴史を振り返ると、ゼロから構築されるものではなく、
既存の技術の応用、改良により新しい技術が構築されています。
アイデアに行き詰ったら、既存の技術を振り返ってみるのも良いかも知れません。

monipet
　　動物病院の犬猫の見守りをサポート
　　病院を離れる夜間でも安心

ASSE/CORPA
　　センサー、IoT、ビッグデータを活用して新たな価値を創造
　　「できたらいいな」を「できる」に

OSGi対応 ECHONET Lite ミドルウェア
　　短納期HEMS開発をサポート！

GuruPlug
　　カードサイズ スマートサーバ

株式会社ジェイエスピー
　　横浜に拠点を置くソフトウェア開発・システム開発・
　　製品開発(monipet)、それに農業も手がけるIT企業

HTML5のお勉強 第6回 ～Drag & Drop API～

今回はDrag & Drop APIについてご紹介します。
名前の通りブラウザ上でドラッグアンドドロップ操作を可能とするためのAPIとなっています。
HTML5で対応される前から、jQueryUIなどのライブラリを利用することで実現されていましたが、
ブラウザがネイティブに対応したことでより動作の軽いドラッグアンドドロップを実現できます。

今回解説する内容の簡単なデモを用意しました。まずはこちらをご覧ください。

Drag & Drop API デモ
ソースコード


では、順を追って解説します。


◆ 最低限やらないといけないこと
ドラッグアンドドロップを実現するためには、次の4つを必ず行う必要があります。

○ 1.ドラッグ要素の draggable 属性を true にする
　ドラッグしたい要素には draggable=true という属性指定をする必要があります。
　※a および img 要素の場合はデフォルトでドラッグ可能なため必要ありません。
　例えばHTMLを次のように書きます。

　

ドラッグ可能

○ 2.ドラッグ要素の dragstart イベント処理を指定する
　draggable=trueな要素をドラッグすると、
　dragstart というイベントが発生します。
　イベント発生時に次のようなJavaScript処理を行うことで、
　ドラッグ要素のゴーストイメージが表示されるようになります。

　var drag = document.getElementById("drag");
　drag.addEventListener(function(e) {
　　e.dataTransfer.setData("text", "ドロップした際に渡すテキストデータ");
　}, true);

　※e.dataTransfer.setData(format, data)の引数について
　　・format
　　　"text" / "text/html" / "text/plain" のいずれかでデータ形式を指定します。
　　・data
　　　ドロップした際に渡すテキストデータを指定します。

○ 3.ドロップ要素の dragover イベント処理をキャンセルする
　ドラッグしたい要素に draggable=true と指定したように
　ドロップしたい要素にも処理を行う必要があります。
　次のJavaScriptコードのように dragover イベントをキャンセルすることで、
　その要素をドロップ可能な要素にすることができます。

　var drop = document.getElementById("drop");
　drop.addEventListener("dragover", function(e) {
　　e.preventDefault();
　}, true);

○ 4.ドロップ要素の drop イベント処理を指定する
　e.dataTransfer.getDataを呼ぶことで、
　ドラッグ時に setData された文字列を受け取ることができます。
　また、デフォルトでは setData で渡された文字列をリンクとして開こうとします。
　dragover イベントと同じく e.preventDefault() を呼んで
　デフォルト動作をキャンセルする必要があります。

　var drop = document.getElementById("drop");
　drop.addEventListener("drop", function(e) {
　　var text = e.dataTransfer.getData("text");
　　alert(text);
　　e.preventDefault();
　}, true);

　※e.dataTransfer.getData(format)の引数について
　　・format
　　　"text" / "text/html" / "text/plain" のいずれかでデータ形式を指定します。
　　　setData と同じデータ形式を指定する必要があります。


◆ 他にできること
ドラッグアンドドロップを実現する最低限の動作としては
上記4つになりますが、他にもできることがいくつかあります。

☆ ドラッグ中のゴーストイメージを指定する
　最初にお見せしたデモで使用していますが、
　任意のイメージをドラッグ中のゴーストイメージとして
　表示させることができます。

　var drag = document.getElementById("drag");
　drag.addEventListener(function(e) {
　　e.dataTransfer.setData("text", "foobar");
　　var ghost = document.createElement("img");
　　ghost.src = "画像URL";
　　ghost.width = "画像幅";
　　e.dataTransfer.setDragImage(ghost, 画像X座標, 画像Y座標);
　}, true);

　※e.dataTransfer.setDragImage(image, x, y)の引数について
　　・image
　　　ゴーストイメージとして表示させたい要素です。
　　　img 要素である必要はなく、 div 要素などを渡すと、
　　　その要素のゴーストイメージが表示されます。
　　・x, y
　　　ゴーストイメージの座標です。
　　　マウスカーソルを基準としたオフセット指定となります。

　ただし、読み込み中の img 要素を setDragImage に渡すと
　ゴーストイメージが表示されないため注意が必要です。
　ドラッグ処理が始まるよりも前にあらかじめ読み込みを終えている必要があります。

☆ ファイルを読み込む
　通常はローカルファイルの読み込みに input 要素を使用しますが、
　上記3および4で解説したドロップ可能な要素でも同じことができます。
　次のコード例では、ファイルが1つ以上ドロップされたとき、
　最初に認識したファイルの中身をテキストとして読み込みます。

　var drop = document.getElementById("drop");
　drop.addEventListener("drop", function(e) {
　　if (e.dataTransfer.files.length > 0) {
　　　var reader = new FileReader();
　　　reader.addEventListener("load", function(e) {
　　　　drop.innerHTML = e.target.result;
　　　}, true);
　　　reader.readAsText(e.dataTransfer.files[0]);
　　}
　　e.preventDefault();
　}, true);

　input 要素でファイル読み込みを行おうとすると、
　画面上に「[参照...] ファイルが選択されていません。」といった表示になるほか、
　クリックすると自動的にファイル選択ダイアログが表示されます。
　これらの表示・処理をさせたくない場合はここで解説した方法が有効です。


jQuery UI などのライブラリを頼った方が使い勝手は良いかもしれませんが、
軽快な動作を求める場合などは有力な技術だと思います。
ぜひ使ってみてください。

monipet
　　動物病院の犬猫の見守りをサポート
　　病院を離れる夜間でも安心

ASSE/CORPA
　　センサー、IoT、ビッグデータを活用して新たな価値を創造
　　「できたらいいな」を「できる」に

OSGi対応 ECHONET Lite ミドルウェア
　　短納期HEMS開発をサポート！

GuruPlug
　　カードサイズ スマートサーバ

株式会社ジェイエスピー
　　横浜に拠点を置くソフトウェア開発・システム開発・
　　製品開発(monipet)、それに農業も手がけるIT企業