クモのようにコツコツと

Webデザイナー イイダリョウのブログ。略称「クモコツ」

php の検索結果:

【pointer-events】フォームの送信ボタンに擬似要素を重ねてもイベントを発火させる

…。 ※参考:フォームPHPはじめの一歩($_GETと$_POSTの違い) - クモのようにコツコツと 送信ボタンをよりボタンとわかりやすくしたいのでCSSを当ててます。 .yomu { margin: 0 auto; width: 50%; height: 2em; margin: 0 auto; display: block; color: #fff; border: none; background: #666; border-radius: 5px; font-size…

フォームPHPはじめの一歩($_GETと$_POSTの違い)

…データ送信には外部のPHPフォームプログラムを利用していました。今回は、フォームPHPの$_GETと$_POSTを自分で書いて、動きの違いについて検証しました。 【目次】 フォームからサーバにデータを送信 HTMLフォームの基本 htmlファイルのphpファイル化 PHPコードを追記 $GETと$POSTのフォームを送信してみる method="get"のフォームはクエリパラメータに値を渡す $_GETはクエリパラメータを格納する $_GETはあとから打ち替えられる $_PO…

ローカル→Sourcetree→GitHub→Herokuに同期する方法(黒い画面不要!)

…) ローカルサーバでPHPファイルを作成 ローカル→Sourcetreeにコミット(更新)→GitHubにプッシュ(反映) GitHub→Herokuにデプロイ(本番環境を作る) 最後に Herokuに至る道 前々回、Laravelなどで作るWebサービスの公開方法を検討し、下記の2つに絞り込みました。 共用サーバの仕様をSSH接続できるプランにあげる PaaSのHerokuの無料枠を使う ※参考:Webサービスを公開するためのサーバ仕様比較(VPSとクラウドサービス) - …

ブログに埋め込めるオンラインIDE比較(サーバサイド版のCodePenを探して)

PHP

…n サンプルコード(PHP) ideone repl.it Paiza.io 最後に:その他のオンラインIDE フロントエンド言語御用達のCodePen CodePenはこのブログでいつも使っているオンラインIDEです。 ※参考:CodePen - Front End Developer Playground & Code Editor in the Browser ブログに埋め込めます。 See the Pen dot_e_18 by イイダリョウ (@i_ryo) on …

Webサービスを公開するためのサーバ仕様比較(VPSとクラウドサービス)

…刺激を受けて、自分もPHPのフレームワークlaravelで何かを作ってみようと思いましたが、なんと自分が契約しているレンタルサーバの仕様だとlaravelを公開することができないことがわかりました!ここ数日、サーバのことをいろいろ調べて時間を費やしたため、いったん記事にまとめます。 【目次】 laravelを公開するにはSSH接続が必要 レンタルサーバの種類(共用、VPS、専用、クラウド) クラウドサービス(SaaS、Paas、IaaS) 最後に laravelを公開するには…

Pythonの基本を理解するためにJSと比較する

…目の記事です。以前「PHPの基本を理解するためにJSと比較する」という記事を書きました*1。本記事はその「Python版」です!ちなみに私のPython歴は「Hello World」までです。Webデザイナーが新たなプログラミング言語を始めるときは「JS」と比較すると理解がしやすいと思います。よっしゃ、来年こそはPythonでデータ分析や機械学習に取り組むぞ〜〜(抱負) 【目次】 コメント 変数 関数 組み込み関数 文字列の連結 整数型→文字列型変換(str()関数) 文字列…

Smart Custom Fieldsの繰り返し(グループ)機能の出力タグ一覧

…WordPress、PHP、SQL文】Webデザイナーでもわかるサーバサイドの基本まとめ!(6記事) - クモのようにコツコツと Gutenbergの「ブロック」と「カスタムフィールド」の違い WordPress 5.0で搭載される新しい記事作成機能Gutenbergの「ブロック」。2018年12月現在、WordPress 4.9.8でもプラグインで先行体験できます。 Gutenberg | WordPress.org 私も早速触ってみました。いろんな種類のブロックを積み木状…

黒い画面だけでWebページを作成する - 前編:ファイル、フォルダの作成

「初めての黒い画面」以降、ちょいちょい黒い画面(ターミナル)に触れてきましてだんだんと慣れてきています。ここらで新たな試みをしてみます。そう、私は感じたのです。もしかしてだけど、もしかしてだけど、黒い画面だけで、テキストエディタ使わずにWebページが作れちゃうんじゃないの?と。実際にやってみた。

初めてのNode.js:インストール確認、REPL、Hello worldまで

JS

…ースソフト P = PHP(Perl、Python):プログラミング言語 オープンソースで無料提供されているのが共通点です。 ※参考:LAMP環境ってなに?Webサービスを作るための環境構築を理解しよう | 東京上野のWeb制作会社LIG Node.jsをここに当てはめるとすると、Node.js=PHP?いいえ、違います。Node.JSはどちらかというとApatchに近い位置付けです。 ※参考:初心者向け!3分で理解するNode.jsとは何か? つまりこうなりますね。 L =…

初めてのRuby:インストール確認、REPL、Hello worldまで

…す。どちらかというとPHPのechoに近い形ですね。 ※参考:PHPの基本を理解するためにJSと比較する - クモのようにコツコツと そして行末にセミコロン;がつかないところはPhtonと近いです。 rubyフォルダに移動(cd)、パス確認(pwd)、ファイル一覧表示(ls) ここからは前回と同じ工程になります。ターミナルを起動してcdコマンドを打ちます。 $ cd Desktop/ruby 場所がチルダ~からrubyに移動します。 コンピュータ名:ruby ユーザ名$ 念の…

初めてのPython(インストール〜Hello world)と初めての黒い画面

…プリなど用途が広い PHP:Webに特化。フレームワークはCakePHPが有名。WordPressにも採用されている。 Ruby:国産の言語!フレームワークRuby on RailsがWebに特化。 Pythonが人工知能向けというよりも、他の3つがWebメインでPythonは用途が広いんですね。 ※参考:Perl、Python、PHP、Rubyについて - Qiita Perlは今から手を出さなくてもいいかな…と個人的には思っていて、PHPはある程度触れていて、Python…

【WordPress、PHP、SQL文】Webデザイナーでもわかるサーバサイドの基本まとめ!(6記事)

…にサーバサイド言語(PHP、SQL文)の扉を叩いてみましょう! ※目次: サーバサイドの中でのWordPressの位置付け PHPの基本を理解するためにJSと比較する ざっくりWordPress:PHP書式とテンプレートタグの識別-前編 ざっくりWordPress:PHP書式とテンプレートタグの識別-後編 SQL文はLocal by FlywheelのAdminerから慣れよう(WordPressのDB操作:その1) AdminerからSQL文で「我輩は猫である」を「犬」にし…

AdminerからSQL文で「我輩は猫である」を「犬」にしてみる(WordPressのDB操作:その2)

…いたします。 なお、PHPの中でSQL文を書いてDBを直接操作する方法もあるようなので、今後そちらもトライしていきたいと思います。それではまた! ※参考:サーバサイドの基本まとめました! 【WordPress、PHP、SQL文】Webデザイナーでもわかるサーバサイドの基本まとめ!(6記事) - クモのようにコツコツと idr-zz.hatenablog.com *1:ダッシュボードが英語の場合は「Setting」の「Site Language」で日本語してください。 *2:我…

SQL文はLocal by FlywheelのAdminerから慣れよう(WordPressのDB操作:その1)

… プログラミング言語PHPで構成されたCMS(コンテンツマネジメントシステム)にWordpressがあります。 データベース言語SQLで構成されたRDBMS(リレーショナルデータベースマネジメントシステム)にMySQLがあります。 CMS:WordPress(プログラミング言語PHPで構成) RDBMS:MySQL(データベース言語SQLで構成) ※参考:PHPの解説(JSとの比較) PHPの基本を理解するためにJSと比較する - クモのようにコツコツと 通常MySQLはCU…

【HTML、CSS、JSの書式】これを読めばコードが読める!書ける!まとめ!(基本5+応用1記事)

…t End Developer Playground & Code Editor in the Browser 「Web制作 やりたい時が 始め時!」 さあ、Webクリエイターになろう! ※参考:サーバサイドについてもまとめました! 【WordPress、PHP、SQL文】Webデザイナーでもわかるサーバサイドの基本まとめ!(6記事) - クモのようにコツコツと idr-zz.hatenablog.com *1:ソルマック! *2:CSS、JSと紐づく目印になる *3:シャア

JS多次元配列に入れたデータをDOMに入力する(JSON未遂事件簿…)

JS

…ります。これによってPHPなどのサーバサイドからもアクセスや操作が容易になります。 データにするとHTMLテキストよりも拡張性や再利用性が高まるわけです。 次回は外部JSONファイルとして切り出して、アクセスしてみたく思います!昔からJSONはjQueryならシンプルな書式でアクセスできたようだけど、触る機会はなかった。 そして調べたところ、最近は他にもいろんな書き方が増えてきたようです。どれが一番ベターなのか検証したい。それでは! *1:本当は13日の金曜日にちなんで投稿し…

【JS】ローカルストレージの値をリンク先のフォームのinputタグのvalueに渡す!

JS

…m action="php/form.php" method="post" id="test" name="test"> <dl> <dt>名前</dt> <dd> <input type="text" name="名前" id="name"> </dd> </dl> <dl> <dt>E-mail</dt> <dd> <input type="text" name="E-mail" id="e-mail"> </dd> </dl> <dl> <dt>URL</dt> <dd…

【JS】フォームのinputタグにURLパラメータを渡す方法

JS

…m action="php/form.php" method="post" id="test" name="test"> <dl> <dt>名前</dt> <dd> <input type="text" name="名前" id="name"> </dd> </dl> <dl> <dt>E-mail</dt> <dd> <input type="text" name="E-mail" id="e-mail"> </dd> </dl> <dl> <dt>URL</dt> <dd…

CSS変数でドット絵マリオをルイージにしたった!

CSS

…のようにコツコツと PHPの変数ともよく似ていますね! ※参考:PHPの基本を理解するためにJSと比較する - クモのようにコツコツと 先ほどのマリオの3色を変数で定義するとこうなります。 /*基本色 */ /*体*/ $hada: #facd89; /*服*/ $fuku: #ff0000; /*他*/ $hoka: #638c0b; /*1行目の14列目*/ .dot_e li:nth-child(1) img:nth-child(14) {background: $ha…

三大フレームワークとかSPAとか仮想DOMとかわかりにくかったのでHellow Vue.jsしてみた!

JS

…d="app"><?php the_content(); ?></p> ※参考:ざっくりWordPress:PHP書式とテンプレートタグの識別-後編 - クモのようにコツコツと 上記のテンプレートタグのように、{{ message }}のところも何かを読み込んでくれそうな期待感。 ここら辺もVue.jsに「とっつき易さ」を感じさせてくれた部分です。 Vue.jsの基本書式 さあいよいよここにJSを書き加えると{{ message }}が「こんにちは びゅう!」になります。じゃ…

ローンチ後のWordPressサイトの中にテスト環境を作る

…非公開に テスト用のphpファイルを作成 プラグインテスト ウィジェットテスト 外部PHPファイルのインクルード 別デザインのテスト まとめ ※参考:WordPressについてはこちら ざっくりWordPress:PHP書式とテンプレートタグの識別-前編 - クモのようにコツコツと ざっくりWordPress:PHP書式とテンプレートタグの識別-前編 - クモのようにコツコツと 投稿ページではなく固定ページで 投稿ページと固定ページでは基本的にできることは同じなので、投稿ペー…

ざっくりWordPress:PHP書式とテンプレートタグの識別-後編

…(私もです)向け!「PHP書式」と「テンプレートタグ」が識別できるとコードが読みやすくなるよ、という記事です。 「前編」の続きになります。 前編ではWordPressのファイル構成と、デフォルトテーマTwenty Seventeeenのindex.phpファイルを中心に「インクルードタグ」「WordPressループ」について解説しました。 「後編」では、その他の.phpファイルにあるテンプレートタグ、そしてプラグインのメソッドもざっくりと見ていきましょう! 目次: conte…

ざっくりWordPress:PHP書式とテンプレートタグの識別-前編

「PHPの基本を理解するためにJSと比較する」でWordPressは「PHP書式」とWordPress独自の「テンプレートタグ」で構成されていると書きました。そしてPHPの基本書式について解説しました。 これを踏まえてWordPressのコードを見直すと、「テンプレートタグ」が見つけやすくなります。それではさっそくWordPressのコードを見ていきましょう。 前・後編の2回に分けて書きます。前編はWordPressのファイル構成、テンプレートタグのインクルードタグ、Word…

PHPの基本を理解するためにJSと比較する

…付け」で書いたようにPHP*1はサーバサイドのプログラミング言語です。現在、CMSの定番となっているWordPressはPHPで作られています。 WordPressのコードは「PHP書式」とWordPress独自の「テンプレートタグ」で構成されています。この二つが識別できるとWordPressのコードが読みやすくなり、テーマ作成やカスタマイズがしやすくなります。 まずはPHPの基本を理解するために、フロントエンドのプログラミング言語JSとの違いを見ていきましょう。 開始タグと…

サーバサイドの中でのWordPressの位置付け

…サーバサイドの言語 PHPのライブラリ、フレームワーク PHPのWordPressとphpMyAdmin SQLのMySQL 終わりに サーバサイドとは 「Webの基礎知識」の中でも書いたようにWebサイトはサーバ上にあるデータ(静的ページ)をブラウザがダウンロードして表示します。 例えばFacebookなどのSNSの場合、ユーザーがSNSにアクセスするとブラウザがサーバ上の最新投稿データをダウンロードし、ブラウザ上でHTML、CSS、JSがデータを処理して画面に表示します。…

はてなブログで何が埋め込められるか

…gins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fidr.zzz%2Fposts%2F1934756040073543&width=500" width="500" height="479" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe> 結果 結論 QiitaではTw…