Archive for the ‘ ドットインストール ’ Category

ドットインストールに「お問い合わせ管理システム」のレッスンを追加! #dotinstall

Pocket

さてドットインストールに新しいレッスン追加のお知らせです。今回はちと地味なのですが、お問い合わせフォーム&管理システムを作ってみました。

Conta

↑ 今回はちょっと長くて全25回です。

Query

↑ 地味ですがビジネスの現場ではお問い合わせフォーム&管理システムは必須ですよね。

データをフォームで入力してもらい、それを一覧にして編集、削除ができるというものですね。

いつものようにわかりやすさを優先したので今回は管理ユーザーの認証なんかを省いちゃっていますが、いわゆるCRUD(Create, Read, Update, Delete)のざっくりとした実装方法がわかるので良いのではないでしょうかね・・・。なお、削除部分は無駄にAjaxにしてみましたので、そちらも参考になるのでは、と思います。

» お問い合わせ管理システムを構築する – ドットインストール

また、今回のレッスン追加で総動画数は400本になりました!年内に400本を目指していたので目標達成です。うれしい!

それから現在のユーザー数はおかげさまで8,000名強、招待状の発送ペースもわりとすぐに届く状態ですので是非ご活用ください。じっくり育てていきたいと思います。

» 3分動画でマスターするプログラミング学習サイト – ドットインストール

ドットインストールに「ツイッターボットの作り方」「lessの基礎」を追加しました!他 #dotinstall

Pocket

さてドットインストールに新しいレッスンを追加したのでお知らせしておきますよ。総本数でいうと372本になりました。

New 1

↑ 全25レッスン、動画は372本になりました。

以下、追加したレッスンとそれ以外のお知らせをざっと。

■ ツイッターボットの作り方

すんごく簡単なものですが、ツイッターボットの作り方を紹介するレッスンを作りました。TwitterOAuthのライブラリを使わせてもらったので数行で出来ちゃうんですけどね・・・。

Twi

↑ ま、指定した内容をつぶやくだけのものですが。

いつものように大胆にはしょりまくったので「URL直打ちでつぶやけちゃう」とかいろいろあるのですが(汗)、アプリの登録、設定、APIドキュメントの見方など、基本的な流れはわかっていただけるかとおもいます。

» ツイッターボットを作る – ドットインストール

これをベースに今度はDBからデータをひっぱってきたり、つぶやきに反応したり、といったものも作ってみたいですな・・・。

■ lessの基礎

あまり初心者向けではないですが、個人的に「どうなってんじゃろ?」と思っていたlessをレッスンにしてみました。

Less

↑ サイト制作者に人気ですよね。

CSSを書くときに変数(というより定数)や関数が使えるという記法ですね。ちょっとCSSが長くなってきたら確かに使ってみたいかも知れません。どちらにしろ「あぁ、こういうのがあるんだ」と知るにはいいかな、と思います。

» LESSの基礎 – ドットインストール

というわけで、以下はお知らせですよっと。

■ 招待状発送をスピードアップ!

招待状の発送スピードを大幅にあげています。現状、招待状を申請してからだいたい1日〜2日で届くかと思います。

またすぐ欲しい人はツイッター検索などをしてみると良ろしいかと・・・。

なお、招待メールは迷惑メールに入ってしまう可能性もありますのでそちらもあわせてご確認いただければと思います。

■ ユーザー数が6,000名を超えました!

おかげさまでユーザー数も6,000名を超えました(というか6,800名ちょい)。ツイッター検索なんかを見ても評判が良いようで嬉しい限りです。細かいところでいろいろご指摘を受けていますが、修正は随時施しつつ、勢いを保ったままコンテンツの拡充ができればと思います。

■ Facebookページの「いいね!」も2,000超えしました!

こちらも嬉しい限り!ありがとうございます。

Iine

↑ 2,000超えた!人の顔が見えるからうれしいですよね・・・。

ドットインストールのFacebookページは以下からどうぞ。よ、よろしければ「いいね!」を・・・。

» (dot)インストール

■ 「みんなの豆知識」へ名称変更

試験運用していた「みんなのアドバイス」機能ですが、レッスンのアドバイスというよりも、こちらへの機能改善、質問などが相次いだため(わかりづらくてすみません・・・)、「みんなの豆知識」へ名称を変更しました。

Mame

↑ 微妙な違いですが、より使い方が明確になったのではないかと思います。

しばらくこの表記で試験運用を続けたいと思います。

さて今回は以上ですかね。

年末ではありますが年内の一般公開に向けてひきつづき作業をしていきますよっと。年末年始にドットインストールを使って少しでもプログラミング学習をしていただければ、と思います。これからも応援、どうぞよろしくお願いいたします。

» 3分動画でマスターするプログラミング学習サイト – ドットインストール

ドットインストールのハッシュタグは「 #dotinstall 」をご利用くださいね

Pocket

Tw

運営者として「dotinstall OR ドットインストール」でいつも検索しているのですが、「招待状あげますよ!」「招待状欲しい」というマッチングがうまくなされていないような・・・。

ハッシュタグをつければもうちょっとうまくいくような気もするので、「 #dotinstall 」でお願いします、と言ってみるテスト・・・。

また、普通にツイッター検索で、

» Twitter / Search – dotinstall

とか、

» Twitter / Search – ドットインストール

とかを見てみると招待状を配っている人が見つかるかもです。是非ご活用くださいね。

» 3分動画でマスターするプログラミング学習サイト – ドットインストール

『ドットインストール』をプチリニューアルしました!(&招待枠増量中!) #dotinstall

Pocket

Dotinstall

さて、「なかなか招待状が届かない・・・」というお叱りを受け続けていたドットインストールですが(す、すみません・・・)、今回プチリニューアルを施しました。

以下、ざっと変更点をご紹介。

■ 招待枠を増やしました!

すべてのユーザーの招待枠を10名に増やしました。また、あわせて招待待ちの方へのメール発送をスピードアップしております。「まだ来ないよ・・」という方はお友達に招待していただくか、こちらからの招待状発送をお待ちいただければと思います。

■ 新規レッスンを追加、動画は352本に!

先日追加した「ローカル開発環境の構築」に続き、以下の3つのレッスンを追加しました。総動画数は352本になりました。

Game

↑ ミニゲームなどのレッスンも追加。

現在もどんどん作成中なので、年内には400本超えを目指したいところです。

■ 「みんなのアドバイス」を試験運用中!

あくまでも試験運用中なのですが、「みんなのアドバイス」機能を作りました。「このレッスンではここに気をつけよう!」「Windowsだとこうだよ」といったことを投稿できる(承認制の)掲示版です。

しばらくはこちらで内容を確認しながらの運用となります。もし他の人へのアドバイスがあれば是非ご投稿ください!

Advice

↑ こういった感じでレッスンの内容を補足していければと思っています。

以上、ユーザーの方は是非お試しいただければと思います。「日本最大の無料動画チュートリアルサイト」をめざしてつっぱしりますので応援よろしくお願いいたします。

» 3分動画でマスターするプログラミング学習サイト – ドットインストール

「ローカル開発環境を構築する」レッスンをドットインストールに追加しました

Pocket

さて先日のリリース後、細かいバグやらの修正にてんてこまいでしたが、ドットインストールに新しいレッスンをようやく追加することができました(しかしまだ招待制・・・すみません)。

今回はお手元のPCにローカル開発環境を構築するためのレッスンです。

Local

こちらのレッスンからどうぞ。

手元にWebサーバーやらDBサーバーやらがあるとPHPとかサーバースクリプト系の開発に便利なのですが、ローカル開発環境の構築ってわりとハードル高いですよね。

Screen 3

↑ 手元でPHPとか動くと便利です。

こうした環境で有名なのはXAMPPMAMPなのですが、個人的にあまりいい思い出がなかったので、がっつり仮想環境を作りこみました。

将来、本当にWebサービスを作るときのことを考えると、はやいうちにサーバーを立てる練習をしておいたほうがいいと思うのですよね・・・。

さて、今回使ったツール&ソフトウェアは以下のとおり。無料で揃えられるものにこだわりました。

これらのツールを使ってローカルにサーバーを立てていきますが、わかりやすさを優先したので、いつものように大胆にはしょりまくりました。

「rootでSSHログインできちゃう」「鍵認証じゃない」「iptables切りまくり」「Windowsって何?」といった具合ではありますが、ざっくりと構築の流れを理解してもらえるのではないかと思います。

僕自身もローカル開発環境が整うことで段違いに効率がアップしたので、すでにユーザーの方は是非ご覧下さいな。

それから招待待ちの方はもうしばらくお待ちを・・・現在、一般公開に向け、鋭意開発中です(@fkojiが)。

さて今日もずんどこレッスン作りますかね。すごく、楽しいです。

» 3分動画でマスターするプログラミング学習サイト – ドットインストール

Tumblrにfacebookのlikeボタンやらtwitterボタンやらはてブボタンをつける方法

Pocket

ドットインストールの公式ブログ(Wordcampで発表したのにTumblr・・・)にいろいろボタンをつけたのでそのやり方をシェアしておきます。

Tum 1

↑ こんな感じね。

ざざっと。

■ facebookのlikeボタン

一番面倒ですな。まずはHTML宣言をこちらに差し替えます。

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="https://www.facebook.com/2008/fbml" xmlns:og="http://ogp.me/ns#" xml:lang="en" lang="en">

次にheadタグ内にOGP関連のタグをごそっと。

<!-- START For Facebook Open Graph -->
{block:PostSummary}
<meta property="og:title" content="{PostSummary} - {Name}" />
{/block:PostSummary}
<meta property="og:url" content="{Permalink}" />
<meta property="og:type" content="article" />
{block:Posts}
{block:Photo}<meta property="og:image" content="{PhotoURL-250}" />    {/block:Photo}
{block:Text}<meta property="og:image" content="{PortraitURL-128}" /> {/block:Text}
{block:Photoset}<meta property="og:image" content="{PortraitURL-128}" /> {/block:Photoset}
{block:Quote}<meta property="og:image" content="{PortraitURL-128}" /> {/block:Quote}
{block:Link}<meta property="og:image" content="{PortraitURL-128}" /> {/block:Link}
{block:Chat}<meta property="og:image" content="{PortraitURL-128}" /> {/block:Chat}
{block:Audio}<meta property="og:image" content="{PortraitURL-128}" /> {/block:Audio}
{block:Video}<meta property="og:image" content="{PortraitURL-128}" /> {/block:Video}
{block:Answer}<meta property="og:image" content="{PortraitURL-128}" /> {/block:Answer}
{/block:Posts}
<meta property="og:description" content="{MetaDescription}" />
<!-- For Facebook Open Graph END -->

そして最後に文末ぽいところに以下のタグを入れます。スタイリングはお好みで。

<iframe src="http://www.facebook.com/plugins/like.php?href={Permalink}&amp;layout=standard&amp;show_faces=true&amp;width=300&amp;action=like&amp;font&amp;colorscheme=light&amp;height=30" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:400px; height:30px;" allowTransparency="true"></iframe>

なお、このやり方はこちらで教えてもらいました。

» How to add facebook like-button in tumblr posts with opengraph protocol | Eyedea Lab

■ Twitterボタン

次、Twitter。まずは以下のサイトでボタンのコードをゲットします。

» Twitter / ツイートボタン

そのコードのaタグ内でdata-url、date-textを次のように指定します。

<a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="dotinstall" data-lang="ja" data-url="{permalink}" data-text="{Title}">ツイート</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>

あとはそれをお好みの場所に貼り付けるだけです。

なお、出典はこちらね。

» Add a Twitter Button to your Tumblr Blog

■ はてブボタン

おもむろに次のコードを貼り付けましょう。

<a href="http://b.hatena.ne.jp/entry/{Permalink}" class="hatena-bookmark-button" data-hatena-bookmark-title="{Title} - {block:PostTitle}{PostTitle}{/block:PostTitle}" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

以下のサイトで教えていただきました。感謝!

» not Haruki – Tumblr(タンブラー)にはてなブックマークボタンを導入する方法

以上ですかね。Tumblrを公式ブログなんかにしている人も多いかと思いますのでよろしければご参考までに。

» 「ドットインストール」公式ブログ

プログラミング学習サイト『ドットインストール』の現状とこれから

Pocket

さて先日リリースした「ドットインストール」ですが、おかげさまで順調にユーザー数を伸ばしております。ご利用いただいている方、ブログやツイッターなどでご紹介いただいた方には深くお礼申し上げます!

IMG 0250

» 3分動画でマスターするプログラミング学習サイト – ドットインストール

さて、まだリリースから5日ほどですが、現在の状況とこれからの計画をまとめておきます。

■ ユーザー数など

当初、ユーザー数を1,000名に限定しようと思っていたのですが、サービスが好評だったのとサーバー的に大丈夫そうなので、順次ユーザー数を増やしている状況です。

ちなみに現在の登録ユーザー数は1,600名ちょいです。また招待状待ちの方が5,000名近くいらっしゃいます。様子をみながら順次招待させていただきますのでもうしばらくお待ちください。

■ なぜベータ版?招待制?

最初から一般公開しないのはなぜ?とよく聞かれますが、以下の理由で現在はクローズドベータにしています。

  1. こちらで気付いていない不具合を洗い出すため。
  2. サーバーの負荷を調査するため。
  3. レッスン内容に誤りがあった場合に修正するため。

おかげさまでいくつかのご指摘をいただいており、現在それらを修正中です。

映像の撮りなおしなども含まれるので多少時間がかかっていますが、なるべく早めに修正して一般公開にこぎつけたいところです。

■ これからの計画について

一般公開は年内中を予定しています。あわせて他のレッスンなども充実させていきたいところです。こちらについては目処がつき次第、ブログやツイッター、facebookなどで発表していきますね。よろしければフォローなど是非お願いいたします。

いまはレッスンやサイトの修正にばたばたしておりますが、どんどん魅力的なレッスンを充実させていき、「日本最大のプログラミング学習サイト」を目指します!

またレッスン内容もWeb系だけではなくて、iPhoneやAndroidアプリなんかにも手を出していきたいところです。こちらも準備中なのでお楽しみに。

» 3分動画でマスターするプログラミング学習サイト – ドットインストール

■ おまけ

以下、開発にまつわる雑談です・・・。

  • 友人に手伝ってもらって録音機材を充実させました!これで(これから収録するものについては)だいぶ音質がよくなるはずなので楽しみです。
  • DSC_0516.jpg

  • サービス名を「.インストール」という表記から「ドットインストール」に変更しました。「モーニング娘。」的なところを目指したのですが、うまく浸透しなかったようですw。
  • ドットインストールのレッスン内容は細かいところを大胆にはしょることを特徴にしているのですが、やはり詳しい方から「ここはおかしくない?」というご指摘をいくつかいただいています。それらは随時修正していきますが、個人的な力量の限界を感じているので、言語ごとにアドバイザーをつけるなどして回避していきたいところです。ただ、100%完璧を目指して遅くなるよりも、スピードを重視し、間違えたらすみやかに修正する、というスタンスでいきたいと思っています。
  • ブログを書くのも楽しいですが、こうしてサービスを作って育てていくのもかなり楽しいですね。今回は開発してくれる仲間がいるので、得意分野にしぼって注力できるのでうれしい限り。細かいところでちょっとした仕掛けを仕込んでいたりしますので是非探してみてくださいね。

以上ですかね。淡々と実現したい世界を作っていきたいと思いますのでよろしければ応援よろしくお願いいたします!

3分動画でマスターする初心者向けプログラミング学習サイト『ドットインストール』を始めます

Pocket

さて突然ですが、3分動画でマスターする初心者向けプログラミング学習サイト『ドットインストール(dotinstall.com)』なるものを立ち上げました。

Top

» 3分動画でマスターするプログラミング学習サイト – ドットインストール

ずっとプログラミング教育がやりたくて、ひとりでうむー、と悩んでいたところ、@fkojiが快く手伝ってくれることになり、そこから一気に拍車がかかって(といっても5ヶ月かかりました)昨日リリースとなりました。感謝感激!

■ 何ができるサイトなの?

3分動画で、プログラミングの「ざっくりとした仕組み」がわかるサイトです。すっごく初心者向けなのですが、だらーっと眺めているだけである程度はわかるようになっています。

Lessons

↑ リリースに際して299本の動画を用意しました。

■ このサービスが目指すところ

すごく正直にいうとこのサイトでコードが書けるようになるとは思っていません。そうではなくて、「プログラミングに興味をもってもらうこと」「だいたいの仕組みをわかってもらえること」が大事だと思っています。

Shinkei

↑ ミニゲームをつくる過程などを説明しています。

Jquer

↑ こうした基礎的なレッスンも用意しました。

たとえるならば中学英語的なレベル、が目指すところです。

それを学んだからといって実践的なビジネス英語がしゃべれるわけではないですが、観光旅行に行ったときになんとなくわかる、すっごく困ったら外人とカタコトでしゃべれる、困ったときにどう調べればいいかがなんとなくわかっている、といったレベルです。

もっと勉強したい人にとっては、ネット上にたくさんの情報があふれています。ただ「最初の一歩」が見つからない人が多いのでは、と思っていたのでこのサイトを作りました。

■ 誰が対象なの?

繰り返しますが、超初心者向けです。

はっきりいって中級者、上級者にとっては「は?」的な内容です。またレッスンの内容も、細かいところを大胆に省いているので、「PHPのレッスンでclass省いているとか何しちゃってんの?」的な感じでもあります。

そのあたりはお叱りを受けても仕方がないと思いますが、「まずは興味をもってもらう」というのが主目的になっていますのでどうぞご理解ください・・・。

■ 有料?

無料です。完全に。日本最大の無料動画チュートリアルサイトをめざします。

■ 動画でしゃべっているの誰?

僕です。

ずっと声だしとかしていませんでしたが、今回はどうしてもこのサイトをスピーディーに立ち上げたかったので全部自分で撮りました。いろいろ今回は本気です。

Douga

↑ 動画でだらだら見ていくことができます。

音楽業界の人に見せたときには「録音レベルひどいな」と言われたりとか、「あー」とか「えー」とか言い過ぎ、とか、「後ろに救急車とおったよね、今?」とかありますが、どうかご容赦ください・・・。

■ アクセスするには?

現在、招待制&先着1,000名限定になっています。お友達で使っていそうな人がいたら招待してもらってください。

このまましばらく様子をみて、2〜3週間後には一般リリースできればいいな、と思っています。

追記: トップページにメアド登録フォームを用意しました。準備ができ次第、招待状を発送します。

追記: 一般公開を開始しました。ユーザー登録が必要ですがどなたでもご利用になることができます。

追記: 登録なしでもすべての動画が見られるようになりました(学習状況の管理およびレッスンのソースコード閲覧にはユーザー登録が必要です)。

■ 最後に

いろいろ他にもあるのですが、取り急ぎリリースということで。

個人的な夢ですが、僕は自分が死ぬまでに「国語、算数、理科、社会、英語、プログラミングが必修」になっていればいいと思っています。

そうじゃないと日本はこれから大変だな、と。別に国粋主義者とかでもないですが、やはり日本が好きなのはしょうがないですよね。

これからの時代、とてつもない可能性を秘めたスキルはプログラミングだと思うのです。

コードをばりばり書けるようになる、はすべての人が目指さなくてもいいと思いますが、ざっくりとした仕組みはみんなが知っておくべきだと考えます。

・・・といった思いで作りました。じっくり育てていきますので、応援してもらえたらうれしいです!

» 3分動画でマスターするプログラミング学習サイト – ドットインストール

注記 (11/30 16:41): サービス名の表記を「.インストール」から「ドットインストール」に変更しました。