VS Code内でブラウザ画面プレビューとDevTools表示、そのままコード編集もできるVS Code拡張「Microsoft Edge Tools for VS Code」正式版に マイクロソフトは、コードエディタのVisual Studio Code（以下VS Code）とWebブラウザのMicrosoft Edgeを組み合わせて、Webアプリケーションの開発を効率的に行えるVS Codeの拡張機能「Microsoft Edge Tools for VS Code」正式版のリリースを発表しました。 Are you a fan of the browser developer tools but not a fan of switching from editor to browser to use them? We heard you! Today we moved the "Mic
WYSIWYGのエディタSummernoteではファイルアップロード機能を実装できる Data URI schemeとFile Upload Bootstrap3でデザインされたWYSIWYGのエディタSummernoteに画像アップロード機能を実装する。 SummernoteをCakePHPで利用する SummernoteにはデフォルトでData URI schemeで画像ファイルをエディタに貼り付けることが可能。実際に画像を貼り付けて、HTMLのソースコードを確認してみたのが下の画像の状態になる。 Data URI schemeの方法を用いると画像をサーバ側にアップロードすることなく、画像をすべてエンコードしてテキスト状態にして貼り付けるため、画像を参照するためのHTTPリクエストが発生しないというメリットがある。 File Upload方式にて画像を管理したい場合には、Summern
どうも、まさとらん（@0310lan）です！ 今回は、ドラッグ＆ドロップで誰でも簡単にWebサイトを製作できるサービスのご紹介です！ そのままでもWebオーサリングツールとして大変便利なのですが、JavaScriptで好きなようにカスタマイズしてオリジナルのエディタを開発＆公開できるという面白い特徴があります。 現在、オープンソースとして活発に開発が進められているので、ぜひこの機会にみなさんも試してみてください！ 【 GrapesJS 】 ■「GrapesJS」の使い方！ それでは「GrapesJS」を使ったWeb製作エディタがどのようなツールなのかを見ていきましょう！ トップページにある「Webpage Demo」というボタンからアクセスすることができます。 登録なども不要で、すぐにブラウザ上で「エディタ」が表示されます。 この画面上で、自分の好きなようにWebサイトを製作することができ
こんにちは、たかとーです🧑🎤 こちらは、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
{"is_any_tile":false,"sources":[{"source":"bmc_bonus_type","table_games":false,"bonus_types":false,"game_providers":false,"slots":false,"live_games":false,"is_live_dealer":false,"payment_methods":false,"sport_types":false,"live_streaming":false,"cash_out":false}]} ウェルカムボーナス {"is_any_tile":false,"sources":[{"source":"bmc_bonus_type","table_games":false,"bonus_types":false,"game_providers":false,"sl
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エンドポイント
Introduction Mobile devices such as smartphones and tablets usually have a capacitive touch-sensitive screen to capture interactions made with the user's fingers. As the mobile web evolves to enable increasingly sophisticated applications, web developers need a way to handle these events. For example, nearly any fast-paced game requires the player to press multiple buttons at once, which, in the c
PythonによるWebスクレイピングの実践入門を書きたいと思います。 概論的なところは除いて、フィーリングで理解していくスタイルで行きたいと思います。 ※追記 本記事は少し難しいやり方をとっていますが、学習すると言う意味ではとても価値あるものだと思います。 本記事を読み終えた後はこちらのテクニック編をご覧になるとサクッと出来たりします。 Python Webスクレイピング テクニック集「取得できない値は無い」JavaScript対応 やること 最終的には「1時間ごとに日本経済新聞にアクセスを行いその時の日経平均株価をcsvに記録する」 プログラムを組んでみたいと思います。 注意 注意事項です。よく読みましょう。 岡崎市立中央図書館事件(Librahack事件) - Wikipedia Webスクレイピングの注意事項一覧 何を使うの？ 言語:Python 2.7.12 ライブラリ:urll
クローラー／Webスクレイピング Advent Calendar 2016 - Qiitaのクローザーとしてマウンドに立ちます@shinyorke(しんよーく)ともうします. このエントリーではみんな大好きな野球(メジャーリーグ)を題材に, Webスクレイパーを開発するコツ スポーツデータ特有の困った話 メジャーリーグベースボールのスクレイパーをガチで開発した話 を,自分の実体験を元に紹介します. 年末年始?来年とかに, 「俺もスポーツデータで機械学習やるぞ！」 という方(と自分)の参考になればと幸いです.*1 というわけでプレイボール⚾ 対象読者&取りあつかわないこと 対象読者 スクレイピングおよびPythonのプログラミング初〜中級者 何かしらのテーマ,特にスポーツでWebスクレイピングをされたい方 データに強いPythonでスクレイピング&分析したい方 とにかくスポーツ,特に球技が大
XPathとは XPath(XML Path Language)とは、XML形式の文書から、特定の部分を指定して抽出するための簡潔な構文(言語)です。HTML形式の文書にも対応します。 CSSではセレクタを使ってHTML文書内の特定の部分を抽出しますが、XPathはより簡潔かつ柔軟に指定ができるとされています。以下の例はbody以下のリンク要素(hogeクラス)を取り出す書き方です。 CSSセレクタ html > body a.hoge XPath /html/body//a[@class="hoge"] XPathを試してみる 上記のとおり、XPathはHTMLのパースに使えます。なのでHTMLに対してXPathでデータを抽出するのがお試しとしては簡単でしょう。 Google Chrome で XPath を書いてみる Google Chrome の開発者ツールには、XPathによる検索
この記事は12/21 クローラー／Web スクレイピングの記事です。 最近、自社システムのシナリオテストの実施方法周りの調査をやっているのですが、 GUI からテストコードの原型を作成できる テストコードを編集しても GUI で編集できる可逆性が有る CI のためにヘッドレスで実行できる 環境構築が簡単 な手法を調べており、selenese-runnerというツールと Selenium が提供している Selenium Hub というツールを利用したらいいんじゃないか、という結論になりました。 この方法なら専門的な技能がなるべく少なくて済むんじゃないか。 と思っている方法を紹介します。 Selenium IDE Firefox のアドオンとして配布されています。 ブラウザでの操作をマクロとして記録する機能があります。 また、IDE 上で記録したマクロを編集したりアサーションを追記したりでき
Googleさんが4月21日までにモバイルフレンドリーなサイトにしないと、スマホ検索結果の順位を落とす（もしくはフレンドリーサイトを上げる）事を正式に発表した。 ということで、 レスポンシブウェブデザイン化を行なう際に必要なメディアクエリー等を使用するため、所有サイトをXHTML（XHTML1.0 Transitional）からHTML5に変換した。 といっても、HTML5で使えなくなったタグや要素は結構な量あるので、あくまでヘッダー部分とかのパッと見て目につく部分のみを変換しただけの簡易的なものなので注意。 まあ、検索エンジンはhtml5として読み取ってくれるからOKなんだけど、きっちりhtml5にするなら、がっつり勉強が必要と思われ。 とりあえず、以下置換した手順っていうか、置換したコード一覧。 置換したコード 以下の置換前・置換後のコードを置換ツールを使って変換した。 宣言文1 XH
HTML5でWebページを作成する時のベースになる必要最小限の構成で記述されたHTML5のテンプレートを紹介します。 スニペットに登録しておくと、便利ですね。 イラスト: Girls Design Materials HTML5 Boilerplate -GitHub HTML5のテンプレート HTML5のテンプレートの解説 HTML5のテンプレート HTML5 Boilerplateのテンプレートを日本語化しました。 オリジナルライセンスで、商用利用、修正、配布、サブライセンス可です。 <!doctype html> <html class="no-js" lang=""> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>タイトル</title> <met
HTMLで、Webページやアプリを作成する時に役立つ、フロントエンド用に必要最小限をまとめたシンプルなHTMLの基本テンプレートのファイル一式を紹介します。 v.8.0.0がリリースされ、現在の環境に合わせた設計にアップデートされました。 IE11を含む、すべてのモダンブラウザをサポートしています。 HTML5 Boilerplate -GitHub HTML5 Boilerplateの特徴 HTMLの基本テンプレート HTML5 Boilerplateの使い方 HTML5 Boilerplateの特徴 HTML5 Boilerplateは、Webサイトやアプリを実装するためのプロフェッショナルなフロントエンド用のHTMLの基本テンプレートです。 実践的な基本のテンプレート 200人を超える貢献者による分析・研究・実験をもとにしています。 ブラウザの見え方を最適化 プログレッシブエンハンス
チャットやオンラインゲームなどのアプリではリアルタイム通信機能が必要になります。実装の難易度が高そうに感じられるかもしれませんが、Monacaアプリで使われるHTML5であれば、WebSocketという技術を使うことで比較的簡単に実現できます。 こちらの記事ではWebSocketの概要と、その導入方法について紹介します。 WebSocketとは WebSocketは読んで字のごとく、Web上でソケット通信を実現する技術になります。これまでのHTTP通信では一回の接続ごとに情報が送受信されて切断される仕組みでした。そのため、サーバ側からクライアントに対して情報を送る（プッシュする）のが困難でした。 サーバ側から情報をプッシュする技術として、WebSocket登場以前にも幾つかの方法がありました。 multipart/x-mixed-replace Firefoxの前身であるWebブラウザ、N
静的HTMLのためのテンプレートエンジン 第1回 共通部分が多いHTML 共通部分が多いHTMLを効率よく作るには、さまざまな手法が考えられます。このシリーズでは、テンプレートエンジンを使用してHTMLを生成するという手法を取り上げ、解説していきます。 はじめに ピクセルグリッドでは、企業サイトのリニューアル案件やWebアプリケーションのフロント側の制作が主になっています。中でも、リニューアル案件では、ページの量産は行わず、量産のもととなるページのHTMLを作成しています。量産は行いませんが、サイトの規模によっては、それなりの量のHTMLを作成していく必要があります。 最近関わった案件ではPC用40ページとSP用40ページ、合計80ページを作成する必要がありました。それらのHTMLには、ヘッダーやフッターであったり、サイドバーであったりと、共通する部分が多く存在します。筆者はその80ページ
※【2018/04/17追記】 Phantom.jsはメンテナンスが終了したようです。今後はGoogle Chromeを使用してJavascriptの処理を行っていくことになります。以下の記事で解説していますので合わせてご覧ください。 zipsan.hatenablog.jp 【追記終わり】 最近スクレイピングのスクリプト書いて遊んでいるのでそれについてのメモがてらに。 Pythonでスクレイピングする方法は多々あるみたいなんですが，個人的に一番使いやすかった（慣れ？）のがこの組み合わせでした。 以前Pythonのurllib.request＋Beautifulsoupでレスポンスhtmlの解析をして次々とたどっていくようなスクリプトを書いていたんですが、これだとJavascriptで追加されたエレメントは受け取れなかったり、リダイレクト処理がめっちゃ大変だったり色々と面倒でしたが今回Se
とほほのBootstrap 3入門 トップ Bootstrap 3入門 はじめに このページは 「Bootstrap 3」について説明しています。Bootstrap 4 については、「Bootstrap 4入門」を参照してください。 Bootstrap とは Bootstrap は、スマートフォンなどのモバイル端末にも対応し、レスポンシブデザインを採用した HTML, CSS, JavaScript フレームワークです。 Twitter 社で開発され、最初は「Twitter Bootstrap」と呼ばれていましたが、現在は「Bootstrap」となりました。 ライセンスは MIT License で、商用利用も可能です。 現時点(2018年5月6日)の最新バージョンは 4.1.1 です。 Bootstrap 2 と Bootstrap 3 以降では一部互換性の無い機能があります。 2018
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
