無料でHTML、PHP、CSS、Ruby、jQueryのプログラムを勉強する方法 動画でもなく実践で必ず身につくプログラム勉強サイト紹介

こんにちは。nekonomoridesignのyoshyです。プログラミングを勉強したいけどどうしていいかわからない。webデザインは出来るけどプログラムは出来ない、やってみたい。そんな人におすすめのサイトを今日は紹介したいと思います。

プログラミングレッスンサイト
Progate 無料プログラムレッスンサイト

最初、私もこんな無料で勉強出来るサイトがあるとは知りませんでした。このサイトを知ったきっかけは、今の会社に入社するまえ、プログラミングの勉強を自主的に行うようにと言うことで教えられたサイトなのです。このプログラミングレッスンサイトの特徴は・・・

  • 簡単な登録(Eメールと名前だけ)で即開始できる。
  • HTML+CSS(基礎)、HTML+CSS(応用)、PHP、Ruby、jQuery、を無料で学べる。
  • 初歩からやっていけるので基礎力が身につく
  • 独学でやってたことを復習できる
  • ヒント機能があるので自主勉強形式でも行き詰らない
  • 実際にプログラムを手打ちして覚えて行くので忘れにくい
  • エディターなどソフトも必要ない状態でプログラムを実際に打ち込みながら覚ええる形式でより実践的

という至れり尽くせりなプログラム勉強サイトなのです。

動画レッスンよりも、実際に出された課題をこなしていくほうが覚える

動画レッスンも最近はやっていますが、個人的に私の場合は、見ているだけでは覚えられないたちなので、このProgateが良かったです。
入社した会社(Webプログラム会社)が薦めてくるだけあって、本当に実践的で良いレッスンが受けられるのは凄いと思います。

プログラムは自分でプログラムを入力してみて、で、思い通りに動かなくて
「あれ・・なんで動かないの・・表示されないの・・・」
という絶望感を味わったほうが成長は早いです(笑)

手打ちでプログラム言語を打ち込んでいくと、50%くらいの確立でタグの打ち間違え、単語ミス、開始括弧l、閉じ括弧のミスなどが原因だったりします。
そういうのは、動画を見てるだけでは無理です。実際にやってみて、ミスって、初めて自分の癖みたいなのもわかりますし、タグの1つでプログラムが動かなくなる事を肌で覚えたほうが早いです。

デバッグ力(直す力)がある人は成長できる

プログラムの仕事を少しやってわかった事があります。
Filemakerでのプログラムのときでもそうですが、自分が組んだものが動かなかったとき、または、思い通りではなかったとき、表示が思うように出来なかったとき、プログラムソースを見て、バグ(間違え)を見つけなければなりません。

その時に、ミスった経験がない場合、たった1個の文字のうち間違えに多大なる時間がかかる場合もあります。絶対こんなとこはミスしないだろうと言うところが意外と間違えているパターンが、プログラムの場合は多く存在します。(コピペでもってきて途中までしかコピペされてなかったとかいう悲しいパターンとか・・)

普段から、デバッグを見つける能力を高める事こそが、より正確なプログラムを打てる用にもなりますし、そのためにもやはり独学だけでなく「基礎力」を最初からもう一度体に叩き込むのも良いと思います。

独学で勉強していた人が再復習するにもこのProgateでのプログラミング練習はおすすめ

私も独学でHTMLもCSSもやってきましたが、このProgateでの復習は今に役立って居ます。是非、プログラミングをやってみたいけど何からしたらいいかも判らない。独学でやってきたのを確かめたい、新しいプログラムを触ってみたいけど何からしていいかもわからない、と言う人は、このProgateでプログラムを練習したり、触ったりしてみると良いかもしれません。

おすすめです!

 

仕事の便利ツール支援ツールサイト 付箋、クラウドスペース、オンラインストレージ 厳選3サービスを紹介

こんにちは。nekonomoridesignのYoshyです。今日は、私がお仕事で実際に使っていて便利だなと思うものをいくつかご紹介したいと思います。

Lino 付箋と写真を共有できるブラウザだけで使える無料の付箋とキャンパス
無料の付箋と写真共有 Lino

このLinoというサービス、リアルの付箋のようにぺたぺたと画面上に付箋を置いておけるブラウザ型ソフトで、ログインさえすればどこでも付箋を確認できるため、ノマドワーカーにもオススメ。個人用と共有用とあるので、グループを作り、共有化すれば、付箋内容を共有できたりします。
やることリストなども作ったり、簡易メッセージを記載したり出来るので、少人数のグループワーキングなどにもオススメ。ビジネスだけでなく、家族間でも使えます♪

グループチャットやタスク管理、ファイル共有が容易に出来るチャットワークス
チャットワークス ChatWork

このChatWorks、複数人が参加するグループチャットでコミュニケーションができて、メッセージの返信もスムーズにでき、ファイルの共有もドラッグするだけで簡単。操作が簡単で無料で出来るのがうれしいところです。ビデオカメラやマイクがあれば、音声会議が出来たりもして、グループ間でもやり取りに最適。これを導入すれば、SOHO活動や、分業・ノマドワーカーにとってもメリットになりますし、在宅ワーク等への実現への近道となると思いました。

初期登録も不要!全てフリーで使えてパスワード設定も出来るオンラインストレージ
容量無制限・無料オンラインストレージFirestrage

このFirestrageは、オンライン登録も不要で、アクセスすればその場で使える、便利すぎるぐらい便利なサイトです。デザインデータや写真データなど、重たくてメールでは送れない、相手とクラウドでのファイル共有は出来ない・・でも取引先や相手に重いデータを送りたい時に重宝するサイトです。
送りたいファイルをあらかじめZip形式などで圧縮しておき、このサイトにアクセスして、ファイルを指定して、ダウンロード期限やパスワード設定をするだけで、アップロードさえ終われば、出来上がったURLを相手にメールで送付するだけでダウンロードしてもらえます。

ファイル共有よりも安心。重いデータの送付にはオンラインストレージが最適

外部サイトリンクも禁止しているような厳重な会社さんが相手だと少し難しいかもしれませんが、オンラインアクセスでデータを受け取ってもらえるので、ファイル共有よりも比較的安全度は高め?なきがしますし、何より重いデータを扱いたい時に便利です。

今まではCDやDVDに焼いていたものも、とりあえずチェックという段階だけでしたら、このオンラインストレージを利用して最初のデータの確認を先にしてもらう事が出来ます。

等など、今は便利なサービスが無料で使えるものも多くあります。
何ももっていなくても、仕事が出来る環境を整える事は出来る世の中です。

ノマドワーカー、SOHOワーカーは便利サービスを活用しよう

ノマドワーカーになりたいと願う人は、是非こういったサービスも活用して、「何も持たず」とも、自分の才能と技術で働けるようになっていって欲しいなと思います。

何かほかに便利なサービスがまたあったらご紹介しますね。

それでは、有意義なワークライフを!

wordpressのTwentyfourteenテーマのブログサイトにファビコンを設定する方法

こんにちは。nekonomoridesignのYoshyです。
今日は、wordpressのカスタマイズ2個目。
Twentyfourteenのテーマを使っているサイトに「fabiconの設定をしよう!」です。

fabicon(ファビコン)って何?

百聞は一見にしかずです。コレです。↓↓

fabiconの説明図 タグバナー
ファビコンとは何でしょうか

よく、サイト名の横に付いたり、ブックマークをしたときに並んでいるアイコンみたいなやつです。
これを、ファビコンfabiconといいます。
コレを設定しておくと、ブックマークやお気に入りに煎れてもらった時に、マークが出てきて、覚えてもらいやすかったりします。
ブログサイトだし・・・とか、一般企業のサイトだから・・・何て考えず、会社・個人名・ブログ名を印象付けるため、しっかりと細部まで作りこんだサイトと思ってもらえるためにも、私はファビコンの設置を奨めたいと思います。

っということで、私も作ったのですが、猫の杜デザイン、なので、「猫のあしあと」をモチーフにしたファビコンにしました。

・・・で。そのファビコンって、どうやって作るのかを今日は書きたいと思います。
私は、フォトショップで作りましたので、その手順と、登録方法です。

フォトショップでのファビコンの作り方

fabi-1

まず、新規作成から、48×48ピクセル、背景透明で作成開始。

fabi-2

レイヤーを1枚新しく追加します。

fabi-3

ファビコンは小さい画像なので、例では、簡単なハートマークで作っています。実際にファビコンを作る時も、単純なものにしたほうがいいと思います。複雑なものは見づらいかもしれません。

fabi-4

画像を作ったら、「web用に保存」します。

fabi-5

保存形式を選びます。
fabi-6

設定は、「PNG-8」で保存しましょう。背景を透明にする必要があります。48×48ピクセルが作れたら、今度は、32×32ピクセル、16×16ピクセルも同様の方法でつくって保存しておきましょう。
保存できたら、次は、「ico」形式を作ってくれるサイトさんにアクセスします。

PNG形式のファイルを、.ico形式で保存しなおす方法

 

私がお世話になっているのは、ファビコン favicon.icoを作ろう!さんです。
fabi-7

このサイトさんは、各大きさの画像をまとめて「ico」形式に変換してくれるという素晴らしいサイトさんです。本当に役立たせて頂いています。ありがとうございます。

fabi-8

画面の指示通り、3種類の画像をそれぞれアップロードしていきます。

fabi-9

3つの大きさ全てをアップロードしたら「favicon.icoを作成」のボタンをクリックします。

fabi-11
fabi-10

クリックしたら、画像が出来上がりました。プレビューもしてくれます。とっても親切なサイト様です。

画像に問題が無ければ、「ダウンロード」ボタンをクリックし、任意の場所に保存してください。

fabi-12

WordPressにファビコンを設置する方法

保存したら、Wordpressの管理画面を立ち上げて、「メディア」から「ファイルをアップロード」をクリックします。

fabi-13

先ほど任意の場所に保存した、「.ico」形式のファイルを指定してアップロードします。

fabi-14

アップロードした画像をクリックすると、詳細が見られるので、右のほうにある画像URLをコピーしてメモ帳などに貼り付けておきます。

メモに保存したら、次に「外観」から、「テーマの編集」をクリックし、右側の種類から「ヘッダー(header.php)」を選びます。
fabi-15

この画面の、からの間の任意の場所に、このような文字を打ちます。
出来れば、と記載されている下の段とかが最適かとおもいます。

—————-↓以下————————————-

<link rel=”shortcut icon” href=”※ココに先ほどコピーした画像のURLを記載”>

—————-↑ここまで———————————
※メモ帳に貼り付けたURLの例。
http://xxxxxxx.ico ←こんな画像URLを、href=”” の “” の間に入れます。

コレをいれたら、「ファイルを更新」をします。

これで、ファビコンが設定されるようになります。反映されるまで、もしかしたら少し時間がかかるかもしれませんが、1日経っても代わりが無い場合は、タグが間違っているかもしれませんので、再度、header.phpを編集してみてくださいね。

ファビコンで、自分のサイトを認識してもらう可能性を高めましょう♪

それではまた!