カテゴリー: プログラミング

WordPressでJavaScriptが読み込まれない時の3つの注意点

Posted on by event@mityu-ka

WordPressでJavaScriptが読み込まれない時の3つの注意点

 

WordPressのカスタマイズや、自作テーマを作ったりしていると
Carouselやボタンアクションなど独自の機能を追加したくなりますよね。

この記事では、

  • どこにJavaScriptファイルを読み込めばいいか分からない。
  • WordPressのテーマにJavaScriptファイルを読み込めない。
  • 設定したファイルが読み込まれているかを確認したい。

こんな悩みを抱えている方に向けて書きました。

目次

  • どこにJavaScriptファイルを読み込めばいいか分からない。
  • WordPressのテーマにJavaScriptファイルを読み込めない。
  • 設定したファイルが読み込まれているかを確認したい。

結論

  • テーマフォルダの中にあるfunctions.phpでJavaScriptファイルを読み込む。
  • wp_enqueue_scriptを使う。
  • デベロッパーツールのSourcesにJavaScriptファイルを確認する。

どこにJavaScriptファイルを読み込めばいいか分からない

WordPressを使い始めた頃に悩むことの1つが、
どこにJavaScriptファイルを読み込むか？ですよね。

 

この画像は#underscoresという、WordPressの自作テーマ用ファイルですが、
wp-content\themes\[テーマ名]\functions.phpにJavaScriptを読み込ませます。

WordPressのテーマにJavaScriptファイルを読み込めない。

そして、
functions.phpにこのように記述するとJavaScriptファイルを読み込めます。
※ハイライトした個所です。


[my_blogsite-addslider]と[‘/js/addslider.js’]の箇所は、
お使いの環境に合わせて変更してください。

設定したファイルが読み込まれているかを確認したい。

画像1⇒画像2の順番に進むと、設定したファイルが読み込まれているかの確認ができます。

画像1

画像2


WordPressにJavaScriptファイルを読み込む時に、
私が少しつまづいたのでまとめました。

WordPressテーマの自作シート

Posted on by event@mityu-ka

WordPressのテーマを自作する時に使っているツールをまとめました。

開発環境

Visual Studio Code

ベースファイル

Underscores | A Starter Theme for WordPress

画像圧縮フリーソフト

ラッコツールズ工房

iloveimg

ファビコン

Favicon Generator. For real.

プログラミングを独学するなら使いたい3つのツール

Posted on by event@mityu-ka

「プログラミングを独学するなら使いたい3つのツール」

目次

  • 出来るだけお金を掛けずに学びたい
  • プログラミングを学ぶ、おススメのツールが知りたい
  • プログラミングの学び方
  • まとめ

私がプログラミングを学び始めた時に悩んだこと

「プログラミングを学ぶ=本」だと思っていて、ググることもあまりしていませんでした。
そして、本に書いてある通りにコードを書いても動かないことも多くて挫折する。
その繰り返しでした。

初心者の独学プログラマーが挫折する理由は、思った通りに動かないからです。
まず動くコードを理解してから変えていくとプログラミング学習は続くはずです。

出来るだけお金を掛けずに学びたい

スピードと使えるお金のバランスが大切です。
と言うのも、私がひとり親をしていて使えるお金が少なかったからです。
理想はTechAcademyなどのスクールで学びたかったのですが、お金がなくて利用できませんでした。
この記事を読んでくださっている方はプログラミングに興味がある方でしょうが、
プログラミングの挫折率が90%とも言われるくらいです。
まずはお金をかけずに学んでみて、
・続けられそうか？
・学んで何をしたいか？
ボヤっとでも良いのでイメージを作ることをおススメします。

プログラミングを学ぶ、おススメのツールが知りたい

ツイートでもお伝えした通り、私がおススメするツールは3つです。
・Progate
・YouTube
・Udemy
完全にゼロからのスタートだったら、Progateから始めることをおススメします。
と言うのも、Progateはプログラミング環境もセットになっているからです。

これは私の実体験ですが、プログラミング環境を作るために1週間かかりました…

XamppとVS Code、コマンドプロンプトの設定をググりながら取り組んでましたが、
中々できなくて苦しみました。
せっかくプログラミングを学ぼうと思ったのに、
環境設定でやる気をなくしてはもったいないですよね。

とは言え、プログラミングの開発環境は必須です。
「プログラミング 環境設定 vscode」で検索すると多くの記事がアップされています。
参考にしながら設定してみてください^^

だいぶ話が逸れましたが、
”お金をかけずにプログラミングを学ぶ”ならYouTubeがベストです。
と言うのも、日本だけでなく海外の方の動画も見れるからです。
それも無料で！
デバイスサイズや画質によってはコードが見にくい時もありますが、
オシャレなサイトやナビゲーションバーというメニューだったりを15分ほどで学べます。
もちろん英語ですが、慣れです。
「とにかく画面のコードをマネて書く」だけで完成するので頑張りましょう。

最後にUdemyですが、動画を買って学ぶコンテンツです。
正規料金だと24,000円くらいするけど、年に何回かあるセールだと1500円前後になります。
Udemyに登録するとメルマガでセール情報が届くので、その時に買うことをおススメします。

プログラミングの学び方

1. Progateでサイトの全体像をつかむ。
2. 気になる言語をProgateで深掘りする。
3. YouTubeで学びたい言語+englishで検索する。
4. YouTube動画を見ながらコードをそのままマネて書く。
5. Udemyで学びたい動画を安く買う。
6. 見ながら学ぶ。

この繰り返しをおススメします。
お金がかかるのはUdemyくらいなので、
何から始めればいいか分からない人やお金をかけられない人におススメの勉強法です。

まとめ

私のようにひとり親で使えるお金が少なかったり、何から始めればいいか分からない人は、
「Progate⇒YouTube⇒Udemy」の順番で学ぶことをおススメします^^

プログラミングの基本を学んでも稼げない3つの理由

Posted on by event@mityu-ka

プログラミングの基本を学んでも稼げない3つの理由

このツイートを深掘りすると、

  1. 基本的なコードを組み合わせたり、応用させるのが難しい
  2. お客さんから要望された機能に分解するのが難しい
  3. 基本ばかりだと、答えを自分で見つける力が育たない

基本的なコードを組み合わせたり、応用させるのが難しい

ある程度、基本を学んだら自分のサイトを1から作ることをおススメします。

積み上げ式で学んでいくと、
実際にお客さんから要望される機能との繋がりが分かりにくいからです。

とは言え、基本がなければ何も理解できませんよね。

まずサイトの基本的な構成をドットインストールやProgateで学んで、
学んだことを全て使って自分のサイトを1から作る。

その流れで進むと、わりとスムーズに行けるはずです。

ゴールとしてのサイトを作ってみて分からない所を洗い出す

この作業が必要です。

分からない所があったらググる。

ググっても分からなかったら、teratailなどで質問する。

プラス、ドットインストールやProgateで基本に戻ってみる。

このループを回すことで、少しずつだけど分かってきます。

「お客さんから要望された機能をどうやって実装するか？」

この、”要望された機能”を基本的なコードに分解する作業がかなり大変なんですよね。

私もドットインストールやProgateで、
HTML/CSSやPHP、JavaScriptを1年ほど学んできましたが、
要望された機能に落とし込むことが出来ませんでした(-_-;)

もちろん、頭の良い人だったらさっと出来るはずですが、
私の場合はとても難しかったです。

だからこそ、

基本ばかりだと、答えを自分で見つける力が育たない

サイトを作ってみると実感しますが、
「ゴールと基本の間」が分からなくて苦しみます。

基本はあくまでも基本なので、
そのままコードを書いても欲しい機能に到達することは稀です。

ゴールとしてのサイトから逆算してコードを考えると、
「ゴールと基本の間」を自分で見つける力が育ってくるはずです。

私も独学でプログラミングに取り組んでいるので、
分からない時はかなり苦しんでいます(笑)

そんな時はゴールと基本を行き来することをおススメします。

最後に

この記事を読んで下さった方も似た状況のはずなので、
独学プログラマー向けの記事をこれからもアップしていきます。

地方こそプログラミングスキルが必須な理由

Posted on by event@mityu-ka

地方こそプログラミングスキルが必須な理由は、

付加価値は低い割に脳力を使って、疲れる割に稼げない仕事が多いからです。

楽して稼げる仕事がもてはやされますけど、トイレ掃除の仕事だろうと、ホワイトカラーと言われる仕事だろうと、どんな仕事も尊いです。

とは言え、時間あたりの単価を最大化するために最もニーズのあるスキルを選んでいくのは必須の考え方だと思います。

この最もニーズのあるスキルを学んで身に付ければ、自分にとっては勿論

自分を軸として高付加価値な集団を作る事も可能だからです。

有益な状況=付加価値の高い仕事だと仮定すると、

それは、

プログラミングを軸とした仕事と言えます。

  • ARやVR技術を扱えるプログラマーが少ないこと。
  • スキルを身に付けていれば世界を相手に仕事が出来ること。

このツイートで挙げましたが、

スキルを身に付けるには時間がかかると思うので、

今からどんどん触れていって作っていく。

「やってみる」状況をつくっていきたいです。

Webやサービスを作れるだけでは不十分だと言われてますが、

まずは、

使う側から作る側へ移動することを最初の目標にする。

そして次の目標として、仕掛ける側へ移動する。

その他大勢から1歩抜け出すために出来ることをする意識を大切にしていて、

「自分を軸として高付加価値な集団を作り人を動かして仕掛ける側へ移動する」

この考えはTSUKUCONのコンサルラーニングに対する基本的な考え方になってます。

いまは最初の目標である作る側へ移動するために、

YouTubeとUdemyを利用して英語×プログラミングの組み合わせで学んでいます。

受注力を上げるこんな方法

Posted on by event@mityu-ka

「クライアントの要望を意識する」

  • 中々仕事を受注できないけど、どんなことをすればいいだろう？
  • 自分のサイトのイメージが沸かない
  • ただプログラミングを学んでるだけだとつまらない
  • もっと形がイメージできる方法でプログラミングを学びたい

こんな悩みを抱える方に向けて記事を書きました。

結論

プログラミングスキルでお金を稼ぐなら、既存のサイトを真似て作る経験が役に立ちます。

と言うのも、クライアントが提示するイメージを基にサイトを作るからです。

求められるのはあなたのアイデアやデザインでなくて、クライアントの要望を満たすことだからです。

目次

「完成させるために真似る」

プログラミングをしていて私がハマったポイントが、

作っている時に色んなアイデア出てきてしまって途中でやめてしまったことです。

なので、既にあるサイトを完成図として作りきります。

余計なことを考えずに作り切る。

完成させることで自信にも繋がりますし、自分のポートフォリオ作りにも役立ちます。

これが真似る利点の1つ目です。

「仕事を受注するために真似る」

真似る利点の2つ目が、仕事を受注するために真似るです。

クラウドワークスやランサーズで仕事を受注するためには、

・実力を示すためのポートフォリオ

・クライアントが欲しいサイトを作る時間を見積もる

この2つが必要だと感じました。

そのために既存のサイトを真似て作る経験が生きてくると考えたわけです。

「イメージを作る為に真似る」

クラウドワークスやランサーズの仕事内容を見ていると、

クライアントが要望する完成イメージを基にサイトを作る仕事が多いように感じます。

その完成イメージに対して自分自身がイメージを具体的に作るコードのイメージがないと厳しい時があると思ったわけです。

私だったらBootstrapベースで作られた既存のサイトを真似て、

目的に応じたサイト作りに活かすイメージ力も磨いてきます。

これが真似る利点の3つ目です。

「真似してみたいサイトはこちら」

Responsive Web Designのリンクはこちら⇒ https://responsive-jp.com/

このサイト真似れば実力磨き放題です。

この中から自分なりに機能を組み合わせて、独自サイトを作るのもありだと思います。

「まとめ」

プログラミングスキルでお金を稼ぐために、3つの「真似る」利点を挙げました。

クライアントが提示するイメージを基にサイトを作るためにどうしたらいいか？

そうして「真似る」に行き着きました。

まずはお金を稼ぐことを第一目標にして、その次に独自サイトを作っていくのが良さそうだと考えてます。

失敗から振り返るおススメ独学プログラミング学習法

Posted on by event@mityu-ka

「プログラミングは動画で学ぶ」

・プログラミングを学ぼうと考えてるけど、何から学んだ方がいいだろう？

・おススメの本ってある？

・オンラインスクールってどうなんだろう？

 

私自身が独学でプログラミングを学んできて2年経ちますが、

年数から考えると身に着いてない方です。

その理由は、プログラミングを本で学習して壁にぶつかってしまったからです。

なので、これからプログラミングを学ぼうと考えているなら

  1. 「manablog」を読む
  2. ドットインストールかProgateで学ぶ
  3. YouTube動画などで学ぶ
    ※不明点があったら「teratail」で質問する

この3ステップが良い方法だと思います。

 

目次

  1. プログラミングは動画学習がとてもおススメ
  2. 無料で学べるドットインストールとProgateとにかくおススメ
  3. 基本分かってきたらYouTube動画をマネる
  4. 本での学習をおススメしない3つの理由環境
  5. 参考サイト
  6. まとめ

 

「プログラミングは動画学習がとてもおススメ」

と言うのも、プログラミングの本で学習して壁にぶつかってしまったからです。

私は独学で2年プログラミングを学んできましたが、

最初の1年半は本を見ながらコードを書いたけど動かない…。

検索したけど分からない…壁にぶつかって挫折して今に至ります。

本で学ぶ問題点を挙げるとしたら、

コードを書いて動かなかった時にきちんと動くコードが分からないことと、

検索した情報の中から正しい情報を選べないんです。

これが動画だと、コードの意味も解説してくれて動きの中で学べます。

書いたコードが動くとどうなるか？結果が見えるのが非常に大きいと思います。

 

「無料で学べるドットインストールとProgateとにかくおススメ」

1年半壁にぶつかってから、動画学習に切り替えました。

最初に使ったのが「ドットインストール」と言うプログラミング学習サイトです。

HTML/CSS&JavaScript&PHP、流行りのPythonなど多くの言語を

基本的な内容は無料で学べて、1動画3分程なのでスキマ時間でも学べます。

有料ですが、応用的な内容も学べて動画を見ずに作るとこまでやり切れば必要な知識やスキルは身に着くと感じてます。

ドットインストールが動画なのに対して、Progateは静止画です。

「静止画なら本で学ぶのと同じでは？」と思うかもですが、

Progateの良い所は

・プログラミング環境とセットになっていること

・出される問題に対してコードを書いたら正否がきちんと分かる

・きちんと動くコードが理解できる

この3点です。

プログラミングは意図した内容通りに動かないと意味ないので、

きちんと動くコードを作り切る経験を積むのが一番大事だと思います。

 

「基本分かってきたらYouTube動画をマネる」

YouTubeでプログラミングと検索してみてください。

数え切れないくらいの動画がアップされてます。

その中からどの動画を選ぶか悩むと思いますけど、

私は「manablogを運営されているマナブさん」がおススメしている動画に取り組んでます。

※個人的にプログラミングの師匠だと思っています

(動画タイトル、URLはこの記事の最後に載せときます)

手順はこれです。

・学ぶ動画を決める

・内容通りに一緒にコードを書く

・コードの意味を理解する

・他の動画を見てコードを書くの繰り返し

動画の目的はタイトルに書かれているので、コードの意味は理解しやすいはずです。

プログラミングは色んな書き方があるので、

マネして”きちんと動くコード”を理解していくのがYouTube動画学習のポイントです。

「本での学習をおススメしない3つの理由」

  1. 環境設定が上手く出来ない
  2. 書いてある通りにコード書いても動かない
  3. 分からない時に聞けない

 

  1. 環境設定が上手く出来ない

プログラミングを始めようとすると、エディタとかローカルサーバーとか書いたコードを表示するための環境が必要なります。この環境作りで結構つまづくんです。

設定方法を検索して書いてある通りに進めたつもりが出来ていなかったり。

分からないことばかりなので、検索した言葉の意味を理解するのも一苦労です(-_-;)

なので、予め環境がセットになっているProgateなどを使うと楽に出来ると思います。

 

  1. 書いてある通りにコードを書いても動かない

全てではないですけど、本に書いてある通りにコードを書いたけど動かない時があるからです。

“ドットインストールとProgateで学ぶ&“YouTube動画をマネる”

の部分でも話してますが、

きちんと動くコードを書けないと挫折するので

初心者は本で学ばない方が良いと考えてます。

 

  1. 分からない時に聞けない…

独学の最大の悩みは、検索して解決方法を探るけど分からないとハマって嫌になることです。

そんな時に聞ける人がいるかどうかがプログラミングを続ける分かれ目になります。

でもプログラミングについて分からないことがあったら聞ける場所が「teratail」です。

即レスを期待してはいけないですけど、質問して教えて貰える環境があるので利用しない手はないです。(※リンクは参考サイトに貼っておきます)

 

参考サイト

これからプログラミングを学ぼうと考えているなら

1.「manablog」を読む

2.ドットインストールかProgateで学ぶ

3.YouTube動画などで学ぶ

※不明点があったら「teratail」で質問する

この流れで学ぶと楽だと思います。

 

(動画学習サイト)

・ドットインストール⇒ https://dotinstall.com/

・Progate⇒ https://prog-8.com/

 

(成果を出している方に学ぶ)

・マナブさんのmanablog⇒ https://manablog.org/

 

(プログラミングで分からない時は)

・teratail⇒ https://teratail.com/

 

まとめ

プログラミングを学ぼうと思った理由が何か次第ですけど、

いきなり高いお金を払ってスクールに入る必要はないと思います。

まずは無料のプログラミング動画で感覚を掴んで、

さらにレベルアップしたいなと思ってからでも良いと考えてます。

プログラミング学習は何から始めるか？

Posted on by event@mityu-ka

いざプログラミングを始めようと決めて、次に悩むのがプログラミング言語だと思います。

今の流行りはPythonですが、目的と作りたいサイトやアプリによって変わります。

プログラミングを学ぶ目的は何？

今日こんなツイートしたのですが、

趣味で学ぶなら何でもいいと思います。

でも、仕事としてお金を稼ぐためならリサーチして決めた方が良いと思います。

どのようにリサーチするか？

私がしているリサーチ方法がこれです。

  • クラウドワークスで「コーディングのみ」で仕事を検索する
  • 仕事内容から求められているプログラミング言語を把握する

これだけです。

多分10分あれば大まかな傾向が掴めるはずです。

仕事の絶対量を考えて決める

お金を稼ぐためにプログラミングを学ぶので、ある程度は相手に合わせる必要あります。

けれど、マイナー過ぎて仕事の絶対量が少ないと頭打ちになるのでおススメしません。

個人的なおススメは3つです。

  • PHP+SQLのセット
    ⇒サイトに入力した内容をデータベースに保存したり、読み込んだりする。
  • HTML/CSS
    ⇒サイトの基本構造であるHTMLと、見た目を作るCSSの組み合わせ。
  • JavaScript
    ⇒Androidでもiphoneでも動くアプリ、ハイブリッドアプリを作れる。
    ⇒ユーザーが入力した内容で動くサイトが作れる。
  • WordPress
    ⇒言語ではないですが、導入方法と仕組みを理解してカスタマイズ出来ると仕事になります。

クラウドワークスで仕事探すと10件中3件くらいが該当します。

人気のあるサイトを見て決める

「このサイトかっこいいな！」と思う気持ちは大切です。

動きのあるサイトや、シンプルだけどデザインが作りこまれたサイトを見ることで、

学んだ結果をイメージしやすいです。

気になるサイトがあったら右クリックして「ページのソースを表示」を選んでみてください。

ずらっとコードが表示されます。

そのコードを見て、「この部分を表示するにはこんなコードを書いてるんだな」と勉強します。

そこから学ぶ言語を決めるのもありです。

まとめ

  • プログラミングを学ぶ目的は何か考える
  • お金を稼ぐためだったら、リサーチする
  • 仕事の絶対量を考えて決める
  • 人気のあるサイトを見て決める

最後に

プログラミングはあくまでも手段でしかないです。

一番大事なことはプログラミングを学んでどうやってお金を稼ぐのか？

稼ぐ方法を決めておくことが大事です。

簡単に始められるWordPressだからこそ動画で学ぶ

Posted on by event@mityu-ka

ドットインストールでサイトの構造を学ぶ

  • WordPressの導入は凄く簡単
  • サイト構造が分かりにくくてカスタマイズに困る
  • 触ってはいけないファイルがある
  • 人気のCMSなので情報が多すぎて逆に迷う

そんな特徴があるWordPressです。

このサイトはさくらインターネットを使って作ってますが、

WordPressのインストールは本当に簡単です。

WordPressの導入は凄く簡単

導入方法は別記事にまとめていきますが、本当に簡単です。

普通にブログサイトを作るだけなら特別な知識もスキルもいらないかもしれないです。

だったらなぜサイトの構造を学ぶ必要があるのか？

サイト構造が分かりにくくてカスタマイズに困る

使っていくと実感しますが、独自の機能が欲しくなります。

WordPressはPHPという言語をベースに作られてますが、

そもそもサイトを作っているファイルの構造が分かりにくいのです。

触ってはいけないファイルがある

さくらインターネットの場合、

サーバコントロールパネルからログインすると

ファイル一覧を表示する「ファイルマネージャー」があります。

沢山のファイルが格納されていて、触ってはいけないファイルもあります。

(ちなみに、触っていけないファイルをいじってしまいクラッシュさせました…)

どのファイルを触れば良いか？基本的な部分を学んでおかないと簡単に壊れます。

人気のCMSなので情報が多すぎて逆に迷う

WordPressで検索すると約2,120,000,000件もの情報があります。

※2020年2月20日時点。

構造を理解していない状態でカスタマイズしようとすると、

その情報が正しいかの判断出来ません。

「〇〇の機能をつけるにはこのコード！」と書いてあって、

それをコピペしてイメージ通りの動きをしなかった時に実力が出ます。

構造を理解してなくて、ベース言語のPHPが分からないと

何が違うのか見当がつかなくて挫折します…

経験すると分かって貰えると思いますが挫折って本当に辛いので、

WordPressの構造を学んでおくと挫折防止になります。

まとめ

  • WordPressの導入は凄く簡単
  • サイト構造が分かりにくくてカスタマイズに困る
  • 触ってはいけないファイルがある
  • 人気のCMSなので情報が多すぎて逆に迷う

なので、ドットインストールでWordPressの構造を学ぶと挫折防止になります。

関連情報

ドットインストール ⇒ https://dotinstall.com/



プログラミングは完成品を改造すると楽です

Posted on by event@mityu-ka

2月16日のツイートがこれなんですが、

いきなり0からサイトとかアプリを作ろうとするとかなりの確率で挫折します(-_-;)

私はWordPressでスタートしましたが、

いきなりカスタマイズしようとしてサイトにアクセス出来なくなりました…

そして修理するために20,000円くらい支払いました…

なので、これからWordPressでサイト作ろうと思っている方がいたら

ドットインストールで基本を学ぶことをおススメします。

WordPressの構造とか、どこをいじるとどう変わるか？とか

そう基本的な部分を動画で学習してからカスタマイズへ移ると良いと考えてます。

WordPressはPHPと言うプログラミング言語で作られてます

だからと言っていきなりPHPから学ぶと挫折しやすいかも…

私がサイト壊した理由がここにあります。

WordPressの構造を理解せずにPHPを学んで(しかも表面的に)、

カスタマイズしようとした結果、コードがぐちゃぐちゃになりました(-_-;)

焦らないとにかく焦らない

焦った所でプログラミングは出来るようになりません。

本業の会計職が終わってからコツコツプログラミング学んできましたが、

中々出来なくてとにかく焦ってました。

結局出来るようになりたいなら、小さくコツコツとです。

完成したコードを改造すると楽

独学でプログラミングを学んでいる私が行き着いた学習法の1つがこれです。

ドットインストールの動画でサイト作ります。

そこに何でも良いので機能を追加します。

これだけです(笑)