JavaScript勉強会

JavaScriptの学習日記

Webサイト制作

Webサイト制作の学習マップ

プログラミングの初心者が、短期間でWebサイトの作成方法を学ぶには、どのような順番で勉強していけば良いでしょうか? 今回は、基本となる技術要素を検討してみます。 Webサイト制作に関わる知識はたくさんありますが、まずは基本となる骨格を作り、さらに…

サブスクリプション方式の料金徴収代行サービス

サブスクリプションのサービスを作る場合、お客さんの支払いを簡単にするにはどうしたら良いでしょうか? オンラインでお金を払ってもらう仕組みを簡単に用意する方法を調べてみました。 サブスクリプションとは? 月額の会費制のサービス 料金の徴収代行サ…

GraphQLのメモ

使いやすい静的サイトジェネレーターが欲しいです。 使い慣れたPukiWikiをカスタマイズする手もありますが、ネットを閲覧するデバイスが増えた現代では、時代遅れになってしまった感は拭えません。 いろいろ調べてみたら、 Markdown形式やAsciiDoc形式でコン…

AMPでWebページの表示を高速化

Webページの表示を高速化する手段として「AMP」という仕組みがあります。 Accelerated Mobile Pages (AMP) とは? Accelerated Mobile Pages - Wikipedia Accelerated Mobile Pages (AMP) は、Googleが中心となって立ち上げた、モバイルでのウェブサイト閲覧…

既存の技術で開発する工夫

何かを作るとき、ワクワクする感覚と面倒くさい感覚の両方が混在している場合があります。 アクセル … 楽しい、ワクワク ブレーキ … 辛い、面倒くさい で、問題はこの「面倒くさい」という気持ちですね? どうしたら、面倒くさいを減らせるか、減らせなくて…

静的サイトジェネレーターの人気ランキング「StaticGen」

Webサイトを作るとき、表示速度を早くするために、静的ページを中心にしたいです。 静的ページ=早い:Webサーバーに置いたHTMLファイルをそのまま表示 動的ページ=遅い:アクセスのたびにプログラムでHTMLを生成して表示 Webサイトのコンテンツ制作を管理…

Webサイトで使われている技術を解析するツール「Wappalyzer」

Webサイトをどうやって作っているか?を調べるツールがありました。 「Wappalyzer」というツールです。 www.wappalyzer.com Wappalyzerは、ChromeやFirefoxのプラグインとして提供されており、インストールすると使えます。 ブラウザーでWebサイトを閲覧した…

手描きの絵からHTMLコードを作ってくれる「Sketch 2 Code」

AIを活用した便利なツールがありました。 Webページのデザインを手描きで下書きして、それをHTMLコードに自動で変換してくれる「Sketch 2 Code」というツールです。 Microsoftが、AzureのAIサービスの活用例として公開しているみたいです。 https://sketch2c…

WinSCP Portableの日本語化

WebサーバーにSSHで接続して、ファイルをアップロードするとき、WinSCPというGUIツールが便利です。 WinSCP - Wikipedia ja.osdn.net WinSCPは、Windows向けのオープンソースのSFTPおよびFTPクライアントであり、旧来のSCPプロトコルもサポートしており、ロ…

WordPressのプラグイン

WordPressの使い方メモ。 今回はWordPressのプラグインです。 jsstudy.hatenablog.com プラグイン WordPressの機能を拡張するための「プラグイン」が、いろいろ用意されています。 https://ja.wordpress.org/plugins/ WordPressにプラグインを追加する方法は…

WordPressのインストール

WordPressの使い方メモ。 今回はWordPressのインストールです。 jsstudy.hatenablog.com インストール 前回、WordPressのインストーラーをダウンロードした後の続きの作業です。 WordPressのダウンロード - JavaScript勉強会 WordPressの公式サイトにあるイ…

WordPressのダウンロード

WordPressの使い方メモ。 今回はWordPressのダウンロードです。 jsstudy.hatenablog.com ダウンロード WordPressの公式サイトから、日本語のインストーラーのZIP圧縮ファイルをダウンロードします。 https://ja.wordpress.org/download/ 最新のバージョンは…

WordPressでホームページを作る方法

WordPressでホームページを作る方法を学んでみます。 学習メモのまとめです。 WordPressとは? WordPressは、ブログを作るソフトウェア ブログだけでなく、CMS(コンテンツ管理システム)としても使われている。 PHPとMySQLで動作している。 GPLライセンスで…

WordPressのメールフォーム「Contact Form 7」

最近、WordPressでホームページを作る方法を学んでいます。 WordPressの調査 - JavaScript勉強会 今回は、WordPressのメールフォームについて調べてみました。 Contact Form 7とは? WordPressはプラグインで機能を拡張できます。 WordPressにメールフォーム…

WordPressの調査

知り合いから、ホームページの制作について相談されました。 「こんなかんじのホームページを作ってみたい」とのことで、そのWebサイトのHTMLソースコードを見てみると、WordPressを使って作られていました。 WordPressでホームページを作る方法について、学…

CodeIgniterでURIスキームを変更する方法

Webサイトで、HTTPでアクセスしてきたユーザーにHTTPSのページに移動してもらいたいとき、サーバー側でHTTPSへリダイレクトさせれば良いかな? HTTPS - Wikipedia HTTPS (Hypertext Transfer Protocol Secure) は、HTTPによる通信を安全に(セキュアに)行う…

Webサーバーを用意する方法

JavaScriptを学習してWebサイトを作れるようになったら、公開用のWebサーバーが欲しくなります。 Webサーバーは、どうやって用意したら良いでしょうか? テストサーバー 仮想環境 レンタルサーバー 「マネージド」と「アンマネージド」の違い 無料サーバー X…

Webサイト制作【4】 Bootstrap準備編

JavaScript学習の一環として、Webサイト制作の練習もやってみます。 今回は、CSSフレームワーク「Bootstrap」を準備します。 用語 CSSフレームワーク jQuery レスポンシブデザイン グリッドシステム CSSフレームワーク CSSフレームワーク - Google 検索 CSS…

Webサイト制作【3】 Visual Studio Code準備編

JavaScript学習の一環として、Webサイト制作の練習もやってみます。 今回は、プログラムを書くツールを準備します。 以前用意した「Visual Studio Code」に、PHP用の設定を追加してみます。 用語 IDE 統合開発環境 - Wikipedia 統合開発環境、IDE (Integrate…

Webサイト制作【2】 CodeIgniter準備編

JavaScript学習の一環として、Webサイト制作の練習もやってみます。 今日は、PHPのWAF(Web Application Framework)の1つである「CodeIgniter」を用意してみます。 用語 フレームワーク 制御の反転 Apache htaccess アプリケーションフレームワーク - Wiki…

Webサイト制作【1】 XAMPP準備編

JavaScriptは、Webサイトを作るときによく使われます。 JavaScript学習の一環として、Webサイト制作の練習もやってみましょう。 用語 サーバーサイド(バックエンド) クライアントサイド(フロントエンド) LL(Lightweight Language 軽量プログラミング言…