ワークショップ「お問い合わせフォームを作成する」の第1回目はお問い合わせフォームの入力ページのHTMLを作成します。 この記事のポイント お問い合わせフォームの入力ページを作成する フォームの入力データが実際に送信＆受信できるか確認する ワークショップ第1回目は、お問い合わせフォームを作成するファイルを作成し、基礎となるHTMLを作成していきます。 早速ですが、実際にファイルを作成してコードを書いていきましょう。 まず、「index.php」というファイルを新しく作成して、以下のHTMLコードを書いてください。 ※今回作成するコードは以下のGithubのページからダウンロードすることができます。 vol.1のサンプルコード – Github index.php <!DOCTYPE> <html lang="ja"> <head> <title>お問い合わせフォーム</title> <sty
本稿はCodeZineに2015年12月28日に掲載された記事の再掲となります。 クロスサイトスクリプティング(XSS)は、古くから存在し開発者にもっともよく知られたセキュリティ上の問題のひとつでありながら、OWASP Top 10でも2010年に引き続き2013年でも3位と、未だに根絶できていない脆弱性です。 本記事では、Webアプリケーションの開発においてXSSを根絶するために必要な対策の基本を本気でお伝えします。 はじめに OWASPでは開発者に向けたセキュリティ対策のためのドキュメントやチートシートを多数用意しており、XSSへの対策としても「XSS (Cross Site Scripting) Prevention Cheat Sheet」というドキュメントが用意されています。 ただし、このXSS Prevention Cheat Sheetはシンプルなルールを定めたチートシートで
拙作の「MarkDown#Editor」ですが、次版では、Markdown Extraの実装を検討しています。 でも、そのためには本家Extraの仕様をよく理解していないとつくれません。 Michel Fortin – PHP Markdown Extra ただ、本家ホームページは全部英語。がんばれば読めないわけではありませんが、楽をしたいなあ、誰か訳していないかなあ、とウェブをうろちょろしてみたのですが、誰もしてくれてなくて・・・ うーん(笑)。 じゃあ、どうせしっかり調べるなら、僕が全訳してしまおうか、という感じでやってみました。 もし英語の得意の方で、かつMarkdown Extraに精通されていて、微妙に本家とニュアンスがちがうだとか、真逆のこと書いてあるということがあれば、適宜ツッコミを入れてください。修正を加えて行きたいと思います。 また、以下の場所に参照しやすいよう、ファイル
レスポンシブだけじゃいられない？時と場合によるユーザーエージェント判別の方法 2013.06.14 | 初心者向け | 覚えておきたい 先週、某iPhoneアプリをリリースした際に公式サイトを担当したネイビーです。 iPhoneアプリだから公式サイトはiPhoneで見れればいい！というわけではないんですね。知りませんでした。だったらレスポンシブで！と行きたいものの、ニョーンと伸び縮みするスタイルが万人受けするものでもありません。 iPhone向けとPC向けのページを作ってユーザーエージェントで振り分ける方針が決まりつつ、いつどこで判別したらよいものか？リリース前日まで悩んでしまいました。 PHPによる判別 スマホ向けとPC向けのコンテンツを振り分ける際にまず思いつくのは、サーバ側のプログラムでユーザーエージェントを判別して処理を分岐する方法です。端末によってコンテンツの種類や量を調節したり
何となく"マルコフ連鎖"という単語に魅かれて、ちょっとやってみました。 →mecab でマルコフ連鎖をためしてみる。 - コードを舐める日々 まずスクレイピング まぁ、当然(?)、PHPでやる訳ですが、まずスクレイピングをどうしようかなと思ったんですが、HTMLScrapingという素晴らしいPHPクラスがあるので、ありがたく使わせて頂く事にしました。 →http://www.rcdtokyo.com/ucb/contents/i000851.php <?php try { $hs = new HTMLScraping(); $url = 'http://www.asahi.com'; $xml = $hs->getXmlObject($url); $li = $xml->xpath('//div[@id="HeadLine"]/ul[@class="Lnk FstMod"]/li[1]/
HTMLのIDとclassに顔文字記述しても、CSSではスタイルが適用されません。 ただCSSをごにょごにょするだけで、ID, classを顔文字、日本語でもコーディングすることができます。 誰が得をするのか全くわからないけど、紹介します。 HTMLのID, classを顔文字にする HTMLのID, classを顔文字、または日本語で書きます。 下準備はこれでおｋ。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body ID="（( ◉౪≡౪◉ )）≡౪◉ )）"> <div class="(」・ω・)」うー！"> <h1 ID="(／・ω・)／にゃー！">にゃー！</h1> </div> </body> </html> CSSでごにょご
最近上京してきたんだけど、入谷から会社までくるのに徒歩10分の道のりで迷子になっちゃって、なんか知らない間に浅草の方まで行っちゃって、会社に遅刻しちゃって、東京ってマジ迷路だよね。あ、どうも、僕です。 今日はWebサービスを開発する上で最低限おさえておきたいセキュリティ対策について書こうと思うよ！ セキュリティホールって、 案外簡単な見逃しでできちゃうんだよね。 バリバリのハッカーしかハッキングなんてしないから、 うちのサイトは安全だなんて思ってたら大間違いだよ！ 今回は、その攻撃方法と、 それを防ぐための対策方法をセットにして書こうと思うよ！ 最低限、これだけは守っとかないと、 あなたのWebサービス、攻撃されちゃうよ！ ちなみに、言語はPHPを例とするよ！ ほかの言語にも当てはまるから、 攻撃方法と対策をセットで頭に入れておくこと！ クロスサイトスクリプティング (XSS) よくきくよ
今回、WordPressのテンプレを作るときに気にしたのが「スマートフォン対応はどうするの？」ということでした。 結局ブログの構造が単純なものだったので、CSS3 の Media Queries（メディアクエリ）というものを採用しています。 Media Queriesだけではなく完全にスマートフォンサイトを作成してしまう方法もあるので、一概にコレだ！とは言い切れません。どの方法もメリット・デメリットがありますので、どの方法がいいかはサイトに合わせて選んでください。 以下、まとめです。 1.PC用とは別にスマートフォンサイトを作成する PCサイトにアクセスしたときにユーザーエージェントを判定してスマートフォンサイトにリダイレクトさせる方法をとります。※.htaccessで振り分けます 例）iPod/iPhone/iPad、Androidの場合は /sp にジャンプ！ RewriteEngi
（記事が長すぎたので前編・中編・後編に分けました） 僕ももう、リストラされそうなとあるおっさんなんですが、先日Webサービスを公開しました。 きっかけになったのはこの記事です。 自分でWEBサービスを作りたいと思っている人へ http://anond.hatelabo.jp/20101203150748 こんな事できたら良いなぁと思っていると、他にもやっている方たちがいました。 たった2日で製作されたWebサービス「お部屋晒し」って？ http://matome.naver.jp/odai/2131952812556433001 WEBサイトを発注してみた。 http://anond.hatelabo.jp/20120318122617 Rails3 と jQuery で、真面目にオシャレなエロサイトをつくってみました - h300 http://d.hatena.ne.jp/inouet
WordPressのプラグインを開発しよう（初級編） WordPressのプラグインを作れるようになればネットでちやほやされるかもしれない！？ ということでプラグイン開発方法をさらっと解説してみます。 投稿日2012年09月11日 更新日2012年10月02日 プラグインってなんだろう。 WordPressのテンプレートをカスタマイズしてるとfunctions.phpにコードを書くことがあると思います。 基本的にこのコードをプラグインフォルダに入れるだけでプラグインになります。 そのテンプレートに依存したものはfunctions.phpに記述したままでもいいと思いますが、ある程度使い回せるものでしたらプラグイン化すると良いと思います。 簡単なプラグイン 簡単な例を見てみましょう。 functions.php に次のようなコードがあるとします。 functions.php function
スマホからのアクセスを判別して動作を切り替えるCSS、PHP、Javascript、.htaccess CSSで切り替える デバイスの幅によって動作をきりかえます。下記だと最大幅480pxの場合は「sp.css」を参照します。 <link rel="stylesheet" type="text/css" media="only screen and (max-device-width:480px)" href="./layout/sp.css"/> <link rel="stylesheet" type="text/css" media="screen and (min-device-width:481px)" href="./layout/pc.css" /> PHPで切り替える ユーザーエージェントを判別してPHPで条件分岐します。 <?php $ua=$_SERVER['HTTP_U
WordPress のプラグインを作るには以下のページが参考になります。 プラグインの作成 – WordPress Codex 日本語版 以上のページを見ると WordPress のプラグインは難しいように見えますが、実は以下のファイルを保存して /wordpress/wp-content/plugin/ ディレクトリにポイっと入れるだけでプラグインとして動きます。 プラグインを作るときの雛形 以下のコードを example.php として保存すれば終わりです。 <?php /* Plugin Name: プラグインの名前 Plugin URI: プラグインの配布URL Description: プラグインの説明 Version: 1.0 Author: プラグイン作者名 Author URI: プラグイン作者URL */ // ここにコードを書く ?>
こんにちは。株式会社コミュニティコム代表取締役の星野邦敏です。 WordPressのバージョンが、日本語では2012年6月15日に、3.3.2から3.4にバージョンアップされました。 3.4から加わった条件分岐タグとして、 wp_is_mobile関数 があります。 これは、Webサイトを閲覧する端末のヘッダー情報を見て、パソコン用のコンテンツと、スマートフォン用のコンテンツを切り分ける、WordPressの条件分岐タグです。 具体的には、WordPressテーマに、以下のようなソースコードを記述すると、パソコン用のコンテンツと、スマートフォン用のコンテンツを、切り分けることが可能となります。 <?php if (wp_is_mobile()) :?> スマートフォン用コンテンツをココに書きます。 <?php else: ?> パソコン用コンテンツをココに書きます。 <?php endif
Home > WordPress > HTML5のmicrodataで情報を付加したパンくずリストを、WordPressに設置する方法。 WordPressでパンくずリストを表示させるには、「Breadcrumb NavXT」のような便利なプラグインを利用したり、プラグインなしでも短いコードで実現可能ですが、私はHTML5のmicrodataでパンくずリストに情報を付加させたかたちで設置したかったので、その方法をシェアしたいと思います。 これからSEO的にもセマンティック技術はますます無視できない存在になっていくと思うので、少しずつ取り入れていきたいですね。 ところで、microdataって何？ という人は、下記のサイトやページでわかりやすーく解説されているので、是非ご覧になってみてください。 Google、MS、Yahoo!、構造化データマークアップの標準化で協力 HTMLにセマンティッ
プログラミングを学べる、みたいなサイト が凄く増えている印象ですが、また似たよ うなサイトを見かけましたのでご紹介です。 実践しながら学べるサイト・(un)classroom。 実践といっても、穴埋め問題っぽい感じで、 手を動かして学べるようになってるだけで すが。 こういうサイト、日本でも増えていく気もします。需要が高い事は明白ですし、このように前例が出来ればインスパイアされるものですのでいずれ増えてくるんじゃないでしょうかね・・ まだ出来たばかりでPHPの基礎とFacebookアプリの作り方しか教室が無いんですが、今後に期待という事で・・ 最初の授業です。「PHPは<?phpで始まって?>で終わらせます」とあります。基礎のキですね。で、右側のsubmitで実行してみましょう、といった流れで進んでいきます。 で、2ページ目でレッチチャレンジ、という感じで穴埋めし、先ほどと同じようにsub
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
