ブックマーク / office-ing.hatenablog.com (95)

  • 【CODEYマンツーマンレッスン後記】~HPをWordPressに移植~ - Webサイト専門プログラマの言いたい放題

    HTMLCSSの基レッスンを終えた 生徒さんとWordPressのレッスン。 HTMLのレッスンで作成したHPを、 WordPressのテンプレートに移植する 手順について学びました。 1.get_header(), get_footer() の挙動、 引数指定時の動作について。 2.wp_head(), wp_fooot() の役割。 3.テンプレートファイルの分離。 など、HTMLのサイトとの概念レベルの 相違点について、実習形式でレッスン。 今回はHTMLの移植まで。 次回、CSSの移植とパスの修正を行い、 ページの見た目を完成させます。 【生徒さんの感想】 「あ、なるほど!わかってきました^^」 「そことそこが繋がってるんですね。」 目が行き届く完全マンツーマンだから、 生徒さんの理解度にあわせた教え方、 生徒さんのペースにあわせた実演操作が 可能です。 ↓↓↓「自分で作れる力

  • 【PCの中はイベントだらけ】 - Webサイト専門プログラマの言いたい放題

    プログラミング講座の教材でちょうど イベント処理について解説しています。 私たちは何気なくキーボードを使って メールやチャットで文字を打ちますが、 キーボードを押すと画面に文字が出る のはなぜでしょうか? PCがキーボードからの入力信号を 監視してくれているおかげですね。 そして、入力を検知すると、起動中の アプリケーションはそれをきっかけに 画面に文字を表示します。 この「きっかけ」のことを、 プログラミングの世界では「イベント」 と呼んでいます。 マウスを動かしたり、 ブラウザの画面をスクロールしたり、 アプリケーションを起動したり終了したり、 ありとあらゆる操作がイベントです。 PCの中は常にイベント三昧、 大忙しなんですね。 ↓↓↓「自分で作れる力」を身につけたいあなたへ↓↓↓ 【1】CODEMYマンツーマンレッスン codemy-lesson.office-ing.net ⇒30

    【PCの中はイベントだらけ】 - Webサイト専門プログラマの言いたい放題
  • 【Android4.2以前はflex互換性に要注意】 - Webサイト専門プログラマの言いたい放題

    メニューを横並びにするためにfloatを使わずflexを使う場合の注意点です。 Android4.2以前の古い機種はflexの古い文法に準拠していて現在の(新しい)文法と互換しないため、表示が崩れます。 なので、古いAndroidスマホにも対応するためには、新旧両方の文法を併記する必要があります。 詳しくはこちらの記事が参考になりますよ。 CSSから考えるデザインのディテール第2回:FlexBoxで作る柔軟な横並びメニュー | Adobe Creative Station

  • 【メーン料理に物申す!】 - Webサイト専門プログラマの言いたい放題

    今に始まったことじゃないけど、 メイン料理のことをメーン料理と 表記するTVのテロップに違和感。 英語を日語に取り入れるとき、 カタカナ表記をどちらにするかで 分かれるんだと思いますが、 発音として正しいのはメインです。 mainと書いてメインと読む。 プログラミングの世界でmain関数の ことを「メーン関数」と呼ぶ人は いないだろうし。 確かに、Eメールの「メール」も 発音は「メイル」だけど、表記は 「メール」が一般的ですよね。 どっちでもいいのでしょうけど、 私が何となく嫌だなと感じるのは、 語源や発音など、来の定義を 間違って覚えてしまう人が増える のではないかという懸念からです。 「意味が通じれば困らないでしょ」 というのは正論だけど、 私が危惧しているのはそこじゃない。 「メーン⇒main⇒メイン」 という置き換え思考ができない人が 増えると、ものごとを学習する力が 弱くなる

    【メーン料理に物申す!】 - Webサイト専門プログラマの言いたい放題
  • 【公開中のホームページのメンテナンスは深夜にやるべき】 - Webサイト専門プログラマの言いたい放題

    ※記事の最後にプレゼント企画のご案内があります。 ウェブサイトとかシステムの修正は ユーザーのアクセスが少ない夜間に 行ったほうが良いですね。 仮のテスト環境を用意していない 場合は、少しでもユーザーさんに 修正中のページを見せないように。 どうしても時間の都合で昼間に行う場合は、 ホームページの持ち主に了承を得た上で、 「工事中です」 といったページをトップページに設置して おいて、作業が終わったら解除しましょう。 ところで、 メンテナンスをかけたサイトでも、 新着情報など日々更新される部分に HTMLタグの間違いが混入すると、 ブラウザのコンソールにエラーや 警告がすぐに出るんですよね。 「あれ?昨日直したのになぜ?」 タグの閉じ忘れなら、ブラウザは ある程度は目をつぶってくれるので 見た目は崩れないこともありますが、 ブラウザの種類によってはちゃんと コンソールに警告を出しています。

  • 【PostCSSを推奨するわけじゃありません】 - Webサイト専門プログラマの言いたい放題

    www.webprofessional.jp PostCSSという、CSSを効率よく書けるようにする仕組みについて紹介された記事なんだけど、私はこの手の情報に両手をあげて賛同はしかねます。 もちろん、技術を紹介する側の人たちは実際にそれを使うことで便利さを感じていたり、将来性への期待を実感しているのだろうから、「これはすごいよ!ぜひ使おうよ!」と賛美する気持ちはよくわかる。 けど、フレームワークを使って作られたウェブのページやサイトをその後メンテナンスするのは、エンジニアだけとは限らないということを忘れちゃいけないんです。 たとえば、とあるエンジニアがフレームワークを使って作ったものを、エンジニアではない人がメンテナンスをしたり、同じエンジニアでも、そのフレームワークを使えない(使わない)人が関わると、誰かが行った修正によって、フレームワークが規程する「ルール」から外れてしまう。 人によっ

  • 【レッスン後記】~診断コンテンツを作ろう~ - Webサイト専門プログラマの言いたい放題

    ウェブで診断系コンテンツを作ろう! ということで、受講8時間目になる 生徒さんとレッスンしてきました。 今までJavaScriptとjQueryの基操作を 演習課題を通して学んできましたが、 いよいよ集大成です。 コンテンツを設計して、ウェブで形に していくためのプログラムの骨格を 作り始めました。 ・どんな変数が必要か? ・どんなイベント処理が必要か? これをしっかりと考えて、 プログラムに落とし込んでいきます。 ↓↓↓「自分で作れる力」を身につけたいあなたへ↓↓↓ 【1】CODEMYマンツーマンレッスン codemy-lesson.office-ing.net ⇒30分無料相談あり ⇒知りたいことだけ学べる個人レッスン ▼レッスンの記録をご覧いただけます。 https://www.facebook.com/codemy.lesson/ 【2】プログラミング講座CODEMY offic

    【レッスン後記】~診断コンテンツを作ろう~ - Webサイト専門プログラマの言いたい放題
  • 【ホームページ作成の本、最終校正v2】 - Webサイト専門プログラマの言いたい放題

    『ホームページ作成のツボとコツがゼッタイにわかる』 2回目の著者校正がやっと終わりました。 週明けに宅急便で出版社へ送ります。 原稿200ページがB4で入っているので、 10センチぐらい厚みがあります。 になると2センチぐらいなのにね。 実は今回の校正で一番苦労したのは、 目次の前にくる「はじめに」の部分。 を手に取ってくださる読者の皆さんに 届けたい想いを書いていくと3ページを 超えてしまい、「もう少しコンパクトに」 と出版社の方からご指摘いただきました。 推敲してどうにか1ページ半にしましたが、 たかが1ページ半の文章を書きあげるのに 苦労しました。 来月上旬に印刷書に入るそうです。 ★★★★★★★★★★★★★★★★★★ Amazonが並ぶようになったら、 ご購入いただいた方全員に、漏れなく 数万円相当のプレゼントを差し上げます。 注文番号を添えてコメント欄または 著者のFa

    【ホームページ作成の本、最終校正v2】 - Webサイト専門プログラマの言いたい放題
  • 【レッスン後記】~パンくずリストをスタイリッシュに~ - Webサイト専門プログラマの言いたい放題

    札幌の生徒さんと久しぶりの レッスンをしてきました。 最近のデザインで注目されている パンくずリストに作り変えようと、 WordpressのプラグインのCSSを カスタマイズしました。 CSSは意外と奥が深いので、 CSSを使ってサイト制作しているけど、 この文法は知らなかった、 というケースが少なくありません。 今日はCSSのセレクタのルールのうち、 ・属性名で絞り込む方法 ・直下の要素を絞り込む方法 を扱いました。 また、裏ワザ的なテクニックとして、 プラグインが出力するHTMLのうち idやclassがついていないテキストの 部分をCSSを使って非表示にする 方法もご紹介しました。 ↓↓↓「自分で作れる力」を身につけたいあなたへ↓↓↓ 【1】CODEMYマンツーマンレッスン codemy-lesson.office-ing.net ⇒30分無料相談あり ⇒知りたいことだけ学べる個人レ

    【レッスン後記】~パンくずリストをスタイリッシュに~ - Webサイト専門プログラマの言いたい放題
  • 【向上心の強い人】 - Webサイト専門プログラマの言いたい放題

    新規のご相談をいただいたので、 面談をしていました。 Wordpressのレッスンです。 30分、スカイプでお話をしたのですが、 自分で調べながら、今の自分にできない ことを真摯に受け止め、それを乗り越える 道筋をつけたいという思いがとても強い 方でした。 そういう方は、はじめてのメール1通でも 礼儀正しく、一緒に目標を達成する過程も とても楽しく感じられます。 ↓↓↓「自分で作れる力」を身につけたいあなたへ↓↓↓ 【1】CODEMYマンツーマンレッスン codemy-lesson.office-ing.net ⇒30分無料相談あり ⇒知りたいことだけ学べる個人レッスン ▼レッスンの記録をご覧いただけます。 https://www.facebook.com/codemy.lesson/ 【2】プログラミング講座CODEMY office-ing.hatenablog.com ⇒動画と個別添

    【向上心の強い人】 - Webサイト専門プログラマの言いたい放題
  • 【レッスン後記】~使うだけじゃもったいないWordpress~ - Webサイト専門プログラマの言いたい放題

    今日はご自身のデザイン作品を ワードプレスを使って掲載して おられる生徒さんとレッスン。 ワードプレスは使っているけど、 インストールやカスタマイズを 自力で行うのは初めてです。 ・データベースの概念 ・ワードプレスのインストール ・ワードプレスのフォルダ構造 ・テーマを着せ替える など、アメブロのようなブログ との共通点を引き合いに出して 解説しました。 次回はテンプレート構造のお話。 「ぜひ聞きたいです」 と仰っていただけました。 ↓↓↓「自分で作れる力」を身につけたいあなたへ↓↓↓ 【1】CODEMYマンツーマンレッスン codemy-lesson.office-ing.net ⇒30分無料相談あり ⇒知りたいことだけ学べる個人レッスン ▼レッスンの記録をご覧いただけます。 https://www.facebook.com/codemy.lesson/ 【2】プログラミング講座COD

    【レッスン後記】~使うだけじゃもったいないWordpress~ - Webサイト専門プログラマの言いたい放題
  • 【レッスン後記】~Wordpressのデーターベースを理解する~ - Webサイト専門プログラマの言いたい放題

    Wordpressはサイトを作る人だけでなく 使う側の人にとっても使い勝手をよく するためのプラグインが豊富です。 プラグインの便利さを支えているのは、 Wordpressの舞台裏であらゆるデータを 管理してくれているデータベースの おかげです。 Wordpressに限らず、データベースの 一般的な構造と、プログラムとの対話 手段であるSQLという言語について、 概要だけ知っておくと、限りなく広い 応用力が身に付きます!! カスタムフィールドを設置するための プラグインを題材に、今日のレッスン ではデーターベースとテンプレートを つなぐ仕組みに踏み込みました。 ↓↓↓「自分で作れる力」を身につけたいあなたへ↓↓↓ 【1】CODEMYマンツーマンレッスン codemy-lesson.office-ing.net ⇒30分無料相談あり ⇒知りたいことだけ学べる個人レッスン ▼レッスンの記録をご

    【レッスン後記】~Wordpressのデーターベースを理解する~ - Webサイト専門プログラマの言いたい放題
  • 【レッスン後記】~検索ロボット来ないで!~ - Webサイト専門プログラマの言いたい放題

    商用サイトの販売ページなど、 購入者にしか見せたくないページが ネット検索に載ると困りますよね? そんなときどうするか? というのが今日のレッスンでした。 1.リファラーをチェックする 2.IDとパスワードで認証制にする 3.検索ロボットの巡回を拒否する 4.検索結果からの削除を申請する などの対策が考えられます。 今日のレッスンでは、 3と4を併用する方法をお教えしました。 検索ロボットの巡回を拒否する www.google.com サーチコンソール(旧:ウェブマスターツール)を使います。 サイドバーにあるメニューから 「クロール->robots.txtテスター」 を開き、 robots.txtの文法に沿って、テスト用の設定を入力します。 画面下に、ページやディレクトリ単位で設定を確認する欄が ありますので、URLを入力して検索ロボットの種類を選んで テストします。 検索ロボットに来てほ

    【レッスン後記】~検索ロボット来ないで!~ - Webサイト専門プログラマの言いたい放題
  • 【面談後記】~SEOで順位が上がらない理由~ - Webサイト専門プログラマの言いたい放題

    とある業種のホームページを作って いらっしゃる方と面談を行いました。 そのホームページ、偶然の不幸ですが サイト名に含まれる地名と同じ地名の 街が他府県にもあり、他所のサイトが 上位に表示されていました。 ソースコードを見ると「うむむ!」 と感じたと同時に、検索エンジンは 素直だなと感じたのでした。 地名だけに致命傷だなと。 次回から、ソースレベルでの内部対策 の改善と、クローラー対策をサポート。 その先に、WordPressの活用を視野に 入れたレッスンを予定していきます。 ↓↓↓「自分で作れる力」を身につけたいあなたへ↓↓↓ 【1】CODEMYマンツーマンレッスン codemy-lesson.office-ing.net ⇒30分無料相談あり ⇒知りたいことだけ学べる個人レッスン ▼レッスンの記録をご覧いただけます。 https://www.facebook.com/codemy.le

    【面談後記】~SEOで順位が上がらない理由~ - Webサイト専門プログラマの言いたい放題
  • 【レッスン後記】~WordPressの仕組みを知る面白さ~ - Webサイト専門プログラマの言いたい放題

    今夜のレッスンはWebデザイナーのSさん。テーマはWordPressでした。 ・HTMLサイトとCMSの質的な違い ・ウェブサイトが表示されるまでの流れ ・DNSサーバーとは? ・ドメインとIPアドレスの関係とは? ・ブラウザはウェブページをキャッシュにダウンロードしている ・CMSはページにアクセスされたときサーバー上でHTMLを作り出す ・テンプレートファイルの役割 ・テンプレート階層のルール ・データベースの中身を見る 次回から、実務向けのトピックスをお教えしていきます。 ↓↓↓「自分で作れる力」を身につけたいあなたへ↓↓↓ 【1】CODEMYマンツーマンレッスン codemy-lesson.office-ing.net ⇒30分無料相談あり ⇒知りたいことだけ学べる個人レッスン ▼レッスンの記録をご覧いただけます。 https://www.facebook.com/codemy.

    【レッスン後記】~WordPressの仕組みを知る面白さ~ - Webサイト専門プログラマの言いたい放題
  • 【Google関係の著作権について】 - Webサイト専門プログラマの言いたい放題

    出版社から届いた校正用の印刷物を 総チェックしているのですが、 Google関連ツールの解説ページで スクリーンショットを使って良いか どうかが懸念事項に挙がりまして。 Googleの利用規約によると、 Google検索の検索結果ページは 特にGoogleに対しては使用許可を とる必要はないそうです。 でも、 GoogleドキュメントやAnalytics等、 ツールに関しては特例がある模様。 しかし、スクリーンショット無しで 文章だけで解説するのは無理ですし、 挫折してしまう読者が出てしまうと 思います。 なので、出版社の方にGoogleへの 許可申請を行っていただいています。 出版物って、私たちが思う以上に 著作権に関する意識が高いようです。 ↓↓↓「自分で作れる力」を身につけたいあなたへ↓↓↓ 【1】CODEMYマンツーマンレッスン codemy-lesson.office-ing.n

    【Google関係の著作権について】 - Webサイト専門プログラマの言いたい放題
  • 【これ本当にエイチツーオーなの?】 - Webサイト専門プログラマの言いたい放題

    焼き肉べ放題の帰り、大阪駅前 グランフロントで、巷でウワサの かき氷を4人でいただきました。 コレ、かき氷とは呼べませんよ。 ガリガリゴリゴリ削った氷とは 思えない、前代未聞の滑らかな 感でした。 フローズンよりもスムージーよりも きめが細かく、これ当に水分子 (H2O)で出来ているの? と疑ってしまいました。 ちょっと高いけど、値段だけの 価値はありました。

    【これ本当にエイチツーオーなの?】 - Webサイト専門プログラマの言いたい放題
  • 【2人がかりでも私に勝てない】 - Webサイト専門プログラマの言いたい放題

    甥っ子2人と奥さんと4人で大阪。 お皿に店名が書いてあります(笑) べ盛りのお年頃のはずなのに、 彼らのの細さにはビックリです。 私ひとりで彼ら2人分の3倍は べたんじゃないかと思います。 近所にあった牛角が撤退して以来、 久しぶりの牛角でした。 スタミナ充填! 来月出版予定のの校正作業、 頑張ってます!

    【2人がかりでも私に勝てない】 - Webサイト専門プログラマの言いたい放題
  • 【レッスン後記】~メールフォームを設置しよう~ - Webサイト専門プログラマの言いたい放題

    今日のレッスンは、お問い合わせ用の メールフォームの設置でした。 ・HTMLと送信先プログラムの連携 ・name属性の使われ方 ・無料で使えるプログラムの入手 次回はFTPソフトの使い方と、サーバーへの設置です。 ワンポイントレッスン メールフォームのプログラムは無料配布されているものもあれば、 有償で設置まで行ってくれるところもあり、さまざまです。 しかし、どんなフォームにも共通する基を押さえておけば、 設置マニュアルに書いてあることを理解したり、 書いていないことでもカスタマイズできる可能性が広がります。 ▼フォームの基形 <form action="送信先プログラムのパス" method="post"> <label for="your_name">お名前</label><input type="text" id="your_name" name="お名前"> <label fo

    【レッスン後記】~メールフォームを設置しよう~ - Webサイト専門プログラマの言いたい放題
  • 【数学が私たちの安全を支えている話】 - Webサイト専門プログラマの言いたい放題

    高速道路のカーブの曲率などを決める際、 ブレーキを踏みやすくドライバーが事故を 起こしにくいように数学が使われています。 高校で習う微分・積分です。 複雑な図形の面積や体積を求めたり、 物理学の発展にも大きく寄与している 数学です。 私たちの安全を支える科学技術の裏側に、 高等数学が使われているなんて、 ちょっと驚きですよね。 なぜこんな話を出すかというと、 プログラミングの知識も同じだからです。 普通に考えたら、プログラミングスキル なんてなくたってブログは書けるし、 ワードプレスだってある程度は使えます。 でも、それを支えている仕組みを知ると 応用範囲が格段に広がるだけでなく、 効率的なメンテナンス方法に気付いたり、 「あんなこともできるだろう」 というアイデアが広がります。 プログラムのコードが書けなくても、 プログラムで作られたいろんなツールを 利用している人は、概念レベルで相当な

    【数学が私たちの安全を支えている話】 - Webサイト専門プログラマの言いたい放題