APIテスト（JSON形式でPOSTする）に使える汎用的なHTMLフォーム - Qiita
この記事は移行しました！最新の内容はこちらをご覧ください😀 API開発時にPOSTでメソッド渡さなければいけなくてその度にHTML書いて送信して〜ってのをやってたのですが、 いい加減毎回作るの面倒なので汎用的なのを作りました！ 画面こんな感じ ポイント！ APIのURLが書き換えられる Methodも切り替えできる パラメータ名と値が書き換えられる パラメータが足りなければ add で追加できる パラメータは [] で配列にも対応 ソース <html> <head> </head> <body> <h1>JSONでデータを送信する</h1> <p>Url: <input type="text" id="url" name="url" size="100" value="https://example.com/api/hoge"></p> <p>Method: <input type="t
Visual Studio Codeを使うなら絶対に入れておきたい拡張機能Top20【2022最新版】 - Qiita
この記事はNuco Advent Calendar 2022の14日目の記事です。 VSCodeに必須の機能20個を紹介していきます。 インストール数と星の数は記事作成時点(2022年11月時点)のものです。 Japanese Language Pack for Visual Studio Code vscode-icons Code Spell Checker zenkaku Path Autocomplete Prettier - Code formatter indent-rainbow GitLens Git History HTML CSS Support Output Colorizer TODO Highlight vscode-random Atom One Dark Theme Trailing Spaces REST Client Live Server Jupyter
ブラウザ上で使えるJavaScript製テキストエディタAce入門 - Qiita
Aceとは ブラウザ上で使えるJavaScript製のテキストエディタです。貧弱なテキストエリアの代替として使うと便利です。特徴として、 100言語以上のシンタックスハイライト Sublime風、Chrome DevTools風など、自由に選べる多数のテーマ マルチカーソル リアルタイム構文チェック などなど、スタンドアロンのエディタと比べても決して引けをとらない高機能なエディタです。 公式サイト 詳しい使い方を知りたいならばAPI Referenceから。 サンプルサイト 各種パラメータの効果を見た目で確認することが出来ます。 インストール 今回のサンプルでは全てCDNを使用しますので何もインストールする必要はありません。 ダウンロードして使いたい場合は https://github.com/ajaxorg/ace-builds/ ←こちらから。 最小のサンプル <!DOCTYPE ht
【Javascript】リアルタイムプレビュー付き簡易htmlエディタ - Qiita
今回はJavascriptを使ってhtml作成をある程度楽にする簡易エディタをつくりたいと思います。 似たようなhtmlファイルを大量につくりたいならいいかも 内容をゴリゴリ書くなら然程労力は変わらないと思う… プレビュー 必要最低限の機能しか実装してないけどちょっと工夫すれば そこそこ実用的なものが作れるかと思います。そして楽！ クリックでデモページのzipファイルダウンロード Win,MacのChromeでのみ動作確認済みです 10/17 リンク間違ってました…ごめんなさい ソースコード <html> <head> <title>qiita_js003</title> <meta charset="utf-8"> <meta name="viewport" content="width=320, minimum-scale=1.0, maximum-scale=2.0"> <style
私家版 Slim Framework チュートリアル (3) 〜 表示編 - Qiita
この記事について PHP のマイクロフレームワークのひとつである、Slim Framework ですが、チュートリアルがいまいちイケてないので、お題を流用しつつ、初学者にももう少し分かりやすくなるよう、アレンジしてみようという試みです。 本記事は第3回で、前回はこちら。 私家版 Slim Framework チュートリアル (2) 〜 ルーティングと新規作成編 - Qiita 概要 今回は、チケットの表示用ページ（一覧および１件）を実装していきます。 5. 一覧表示 5.1. View ファイルの作成 View ファイルをつくります。 templates/tickets/index.phtml というファイルを作成してください。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"/> <title>チケット管理</ti
Selenuimで要素を選択する方法まとめ - Qiita
Seleniumの findElement, findElementsメソッドでHTML要素を選択する方法のまとめです。 個人的に(自動生成された等の理由により)カスタマイズ不可なサイトをテストすることが多く、主に次の画面に遷移する際の要素選択について、使ったことのあるパターンをまとめてみました。 各項のスクリーンショットは、上がサイトの例、下がChromeの検証機能(デベロッパーツール)で要素を表示したものです。なるべくそのまま載せるようにしましたが、Qiita用に横幅を短くしたり、実データは削除したりと、多少修正しているものもあります。 1) id属性 で検索 id属性 で検索できる例： 目的のHTML要素にid属性 が設定してある場合、それを指定して検索するだけです。
あなたがまだ使っていないかもしれないHTML5の便利機能10選 - Qiita
こんにちは、たかとーです🧑🎤 こちらは、10 useful HTML5 features, you may not be usingの翻訳記事になります。 当記事は、Tapasさんの許可を得て翻訳しています。Tweet 10 useful HTML5 features, you may not be using HTML5は新しいものではありません。最初のリリース（2008年1月）以来いくつかの機能を使用してきました。100DaysOfCodeの取り組みの一環として、HTML5の機能リストをもう一度よく見てみました。何か見つけたかな？私は今のところあまり使っていません。 この記事では、過去にあまり使ったことがなかったが、今では便利になったHTML5の機能を10個挙げています。また、Netlifyでホストされている、実際に動作する例を作成しました。参考になることを願っています。 htt
[サーバレス] Googleスプレッドシートでスクレイピング - Qiita
スクレイピングがやりたかったんだけど、サーバの管理がめんどくさくなったので、Googleスプレッドシートの上でスクレイピングを出来るようにした。 やりたいこと 献血で、400mlAB型の血液が不足してます、A型は今大丈夫です、みたいな情報が、献血センターのwebサイトに掲載されるようになった。 たとえば 宮城県赤十字血液センターの今週の献血状況。AB型の人は成分献血にするか、次の機会にしたほうが良いらしい。 これ以外の県も、各県の献血センターに掲載されている こういう情報をオープンにしてくれたのはとてもうれしいことなんだけど、webページに掲載されたって、ぼくらがわざわざ見に行かない限り気が付かない。できればこう、SNSで「今週の献血状況」みたいなことを発表してくれるといいよね。そしたら、「あ、AB型足りない？今週は余裕があるからじゃあぼく行くね」みたいなことが出来ていいと思うのよ。 ない
![[サーバレス] Googleスプレッドシートでスクレイピング - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/887726243bc177ea271bd5e4156739bf5152ac79/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCJUUzJTgyJUI1JUUzJTgzJUJDJUUzJTgzJTkwJUUzJTgzJUFDJUUzJTgyJUI5JTVEJTIwR29vZ2xlJUUzJTgyJUI5JUUzJTgzJTk3JUUzJTgzJUFDJUUzJTgzJTgzJUUzJTgzJTg5JUUzJTgyJUI3JUUzJTgzJUJDJUUzJTgzJTg4JUUzJTgxJUE3JUUzJTgyJUI5JUUzJTgyJUFGJUUzJTgzJUFDJUUzJTgyJUE0JUUzJTgzJTk0JUUzJTgzJUIzJUUzJTgyJUIwJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz1jMDMxYmRhZGMzYzgxODQ4YzQ4OWVjOTIzYTk5NjgzNg%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBtb2d5YSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9Y2Y1YTI5ZDlmNGVjNjYwMWRkYjAyNjZiM2UyMTMyMDg%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g6YGL5Za26ICF44Ku44Or44OJ%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%2523212121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3D6702fb6f54a8fa3741edd3899a82a324)
canvasにローカル画像を表示 - Qiita
概要 html5を使ってローカルに有る画像ファイルを表示する簡単なhtmlを作ってみました。イメージの描画にcanvasを使用しています。 参考にさせて頂いたページ http://qiita.com/junya/items/0f977ae7f8f620fd83e7 http://d.hatena.ne.jp/oovu70/20111122/p1 ソースの説明 ファイルの読み込みに加え、イメージのロードも非同期になりますので、コールバックで処理をしないとcanvasへの描画は上手くいきません。 html要素として予め定義しているcanvasをセレクトしています。 getContext()メソッドで描画機能を有効にしています。jQueryのセレクタを使っていますのでcanvas[0]とします。 naturalHeight, naturalWidthでイメージのサイズを得ることが出来ます。縦横比
S3のSSL通信 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 2019/07/11：コメント欄のご指摘を受け実験結果を一部削除。(HTMLのパスを間違っており変な実験結果を載せてました。お恥ずかしい・・・） S3は HTTPSをサポートしていない？ 「 S3は、HTTPS通信できないですよね？ 」と言う話しが会話ででてくる事がよくあり「あれ、実際HTTPS通信問題なく使えているのに、その話し良く聞くけどなんでだっけ」と思う事があるので、メモしておきます。(この記事中のテスト用のリンクは予告なく削除される事がありますのでご了承下さい) 結論としては、 S3デフォルト(「REST APIエンドポイント
curl とxpath でお手軽スクレイピング - それマグで！
この記事は [クローラー／Webスクレイピング Advent Calendar 2015] の一つとして書きました。 公開遅いけど。ごめんね この記事の目標 curl コマンドの使い方を覚えつつ、スクレイピングをやっていきます。 この記事で紹介すること curl curl + grep curl -s curl + md5sum curl + md5sum + mail curl + cookie curl + cookie + xpath curl + xpath + xpath シェルスクリプト実行 用意するもの curl xpath libxml grep ruby nokogiri cookie pry 知っておくと便利な知識 css2 css3 xpath jq js への対応 基本方針は「JSに対応しない」 だって、リクエストヘッダ見てたらわかるもん。 curl コマンドでWE
クローラ作成に必須！XPATHの記法まとめ - Qiita
最近クローラーを作成する機会が多く、その時にXPathが改めて便利だと思ったので XPathについてまとめてみました！ XPathを学ぶ方の役に立てれば幸いです。 初級編 XPathとは XPathはXML文章中の要素、属性値などを指定するための言語です。 XPathではXML文章をツリーとして捉えることで、要素や属性の位置を指定することができます。 HTMLもXMLの一種とみなすことができるため、XPathを使ってHTML文章中の要素を指定することができます。 例えば、 <html> ... <body> <h1>ワンピース</h1> <div class="item"> <span class="brand">iQON</span> <span class="regular_price">1,200円</span> <span class="sale_price">1,000円</sp
Markdown記法 チートシート
Markdown記法のチートシートです。 記法はGitHub Flavored Markdownに準拠し、一部拡張しています。 Qiitaでシンタックスハイライト可能な言語一覧については、 シンタックスハイライト可能な言語 をご覧下さい。 Code - コードの挿入 Code blocks - コードブロック たとえば、「Ruby」で記述したコードをファイル名「qiita.rb」として投稿したいときは、 バッククオート（`） か チルダ（~） を使用して以下のように投稿するとシンタックスハイライトが適用されます。 コードブロック内でコードブロックを書きたい場合は異なる記号を使うことで書けます。
PythonとBeautiful Soupでスクレイピング - Qiita
Pythonでスクレイピングというネタはすでに世の中にもQiitaにもたくさん溢れていますが、なんとなくpyqueryが使いやすいという情報が多い気がします。個人的にはBeautiful Soupの良さも知ってもらいたいと思うのでここではBeautiful Soupを使っていきたいと思います。 ちなみにこのエントリーはほとんどの部分がBeautiful Soup4のドキュメントの要約です。もっと詳しい情報が知りたい場合はドキュメントをご覧ください。 英語 http://www.crummy.com/software/BeautifulSoup/bs4/doc/ 日本語 http://kondou.com/BS4/ よくある勘違い pyqueryはjQueryのようにcssセレクタを使ってHTMLを扱うことができる点がBeautiful Soupよりも使い易いという意見がありますが、それBe
CasperJSでWEBサイトをスクレイピングしてみる - Qiita
前回の投稿（CasperJSでWEBサイトの画面キャプチャを取得してみた）の続きです。環境構築の方法（Mac）については、前回の投稿をご覧ください。 はじめに とある事情で、Qiitaの Organizationページ(自社の) をWEBスクレイピングしました。 とある事情というのは、自社のブログ に、自社メンバーのQiita新着投稿をブログパーツ的に表示したかった。 Qiitaへゴリゴリ負荷をかけるものではないです^^; CasperJS は CoffeeScript をそのまま解釈してくれるので、今回は CoffeeScript で書いてみます。 ちなみに CasperJS は仮想ブラウザ？的に動いているので、対象ページが JavaScript 等で動的に描写されるページでも、スクレイピングできるはず..です。 今回の成果物 QiitaをWEBスクレイピングして、こういうブログパーツ（
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CakePHP3でURLリンクを書く方法 - Qiita
[LAMP]VagrantでCentOS7+Apache2.4+PHP7.1+MySQL5.7&Phalcon3.1.2環境を構築する - Qiita![[LAMP]VagrantでCentOS7+Apache2.4+PHP7.1+MySQL5.7&Phalcon3.1.2環境を構築する - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/9058b0dc461f1f0abd7ba1a7739dd0ca46a2784e/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGMzI2MDglMkZwcm9maWxlLWltYWdlcyUyRjE0NzM2ODU5NDA_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmZtPXBuZzMyJnM9YjkwMzViMzM4ZjFjOWNiNWY2ZGM5OGYxYTFkN2VjNTI%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253Dbaffb6b27f63acc84f34ee4daa3f3d07%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCTEFNUCU1RFZhZ3JhbnQlRTMlODElQTdDZW50T1M3JTJCQXBhY2hlMi40JTJCUEhQNy4xJTJCTXlTUUw1LjclMjZQaGFsY29uMy4xLjIlRTclOTIlQjAlRTUlQTIlODMlRTMlODIlOTIlRTYlQTclOEIlRTclQUYlODklRTMlODElOTklRTMlODIlOEImdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtcGFkPTAmcz0xMDIxODdiMzdmZjAzZTNhNzVlYTYzNDc4MDZmMmYxMA%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBzaGlyb21lZ2FuZSZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1wYWQ9MCZzPWU4ZWY4ZmRiMmFhYWMzMDEyMjg5YmMyOTFiN2FmNTFi%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3Dc986029cd166eb8b204a3762bd42a1c4)
URLエンコード対応表メモ - Qiita
5分で動かせるwebsocketのサンプル3つ - Qiita
ドラッグ＆ドロップでli要素の並べ替え→DB書き換え - Qiita