どうも、まさとらん（@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
独自開発するのにコストや手間がかかるスマホアプリ。しかしCMSを活用することで、スマホアプリは気軽に作成できます。扱うのに専門知識を必要としないため、アプリ開発のハードルが大幅に下がるでしょう。 この記事では、CMSの製品を紹介するとともに、製品選定ポイントや導入メリットについて解説します。スマホアプリの開発・運用のコスト軽減に役立ててください。
AWS Lambda + AWS API Gateway + websocketでお手軽双方向通信チャットアプリをサーバレスで簡単構築してみたAWSwebsocketlambdaAPIGatewayserverless この記事は全部俺 Advent Calendar 2018の19日目の記事です。 この記事について Amazon API GatewayでWebsocketが利用可能になりました。 これによって、Websocketを使用した双方向通信がサーバレスで実現できます！ Websocketでつながっているユーザであれば、バックエンド側からのpush通知も可能になります！ 早速試してみたので記事にしてみます。 ちなみに動作しているところはこんな感じです。 websocket chat app on AWS Lambda(serverless) pic.twitter.com/AGZ1
アプリケーションを実行しているスマホの画面サイズや向きを動的に取得できれば、それに応じて表示するコンテンツを調整できますよね。 画面サイズを取得する JavaScriptで画面サイズを取得するためのプロパティが用意されています。 ウィンドウサイズを取得できる関数 screen.width document.write(screen.width); 画面の幅を取得することが出来ます。 screen.height document.write(screen.height); 画面の高さを取得することが出来ます。 画面サイズとタスクバーを除いたスクリーンサイズを取得することが出来ます。 コンテンツ領域を取得できる関数 window.innerWidth document.write(window.innerWidth); ウィンドウ内側の横幅を、取得したい場合に使用。 ※ スクロールバー領域を含
Hyperloopというフレームワークがあります。 OpalでReactをラップしたフレームワークとなっております。 つまりRubyでWebのフロントエンドを作るためのフレームワークですね。 ところで、WebフロントエンドがあればElectronアプリ化ができます。 つまりHyperloop（生Opalでも良いけど） + Electronで、Rubyを使ったマルチプラットフォーム・デスクトップアプリの開発が可能では？ という事で、やってみました。 対象読者 Rubyを使ったことがある Reactを使ったことがある Hyperloopアプリ まず普通にHyperloopアプリを作ってみましょう。 いつもは足し算アプリを作るのですが、今回は気分を変えてTODOアプリにしてみました。JSフレームワークのサンプルっぽいですよね。 Hyperloopの導入 Opalアプリの環境はRubyと同じくBu
とほほの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
この記事はシステムエンジニア Advent Calendar 2015 - Qiitaの記事です。 弊社アーキ部で@kawasimaさんに教えてもらったさいきょうの二重サブミット対策について書いていきます！ 二重サブミットが発生するケース 不正な更新リクエストが発生するケースとして、以下のものが考えられます。 サブミットボタンをダブルクリックする 戻るボタンで戻って、再度保存ボタンを押す 完了ページでブラウザリロードする CSRF攻撃による不正な更新リクエスト 1. サブミットボタンをダブルクリックする 確定ボタンをダブルクリックすることによって、ユーザが意図していないリクエストが発生してしまうケース。 2. 戻るボタンで戻って、再度保存ボタンを押す 処理完了画面から戻るボタンで前の画面に遷移し、再び確定ボタンを押すケース。 本来は入力➡︎確認➡︎完了の画面遷移が適切だが、その画面遷移にな
第6回 ASP.NETによるWebアプリ開発（アプリケーションの開発 3）：連載：ASP.NETによる軽量業務アプリ開発（1/3 ページ） コマンドラインとエディターのみでWeb開発する方法を説明。今回は前回作成したASPXのWebサービスを利用するクライアント側JavaScriptについて説明する。 連載目次 本連載の目的 本連載では、部門コンピューティング（Excel＋VBAで簡単な業務アプリを開発するようなこと）レベルの開発手法として、ASP.NETを利用した軽量Webアプリ開発を説明する。タブレットを利用した業務アプリのプロトタイプ実装や、Excel＋VBAの業務アプリのWebアプリへの移行などの参考にしていただきたい。 なお本連載では、最小限のセットアップでWindowsを活用できるよう、可能な限りGUIツールを利用することなくコマンドラインとエディターのみで開発する方法を説明し
Bootstrap 4ではそのインストール方法をはじめ、グリッドの単位やレスポンシブ用のclassが変わり、そしてカードやツールチップなどの新しいコンポーネントやレイアウトにFlexboxも利用できるようになりました。 Bootstrap 3からBootstrap 4に移行する時に知っておく必要がある注意点をまとめたリストを紹介します。 How to Migrate from Bootstrap Version 3 to 4 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 Bootstrap 4で変わった点 Bootstrapのファイル構造 Bootstrap 4のインストール グリッドシステムのアップデート リセットは、「normalize.css」から「reboot.css」に classの変更とアップデート タイポグラフィ テー
AngularJS と Angular は別物です。バージョン 1.x を AngularJS、2.0 以降を Angular と呼びますが、根本から作り直しているので互換性はありません。AngularJS は 1.8.x で開発を停止しており、2021年12月31日にサポートも停止されました。現在は拡張LTS (XLTS) のフェーズにはいっています。(2022/1/2追記) AngularJSとは？ サンプル フィルタ モジュールとコントローラ リスト リストフィルタ アクション フォームバリデーション もう少し複雑なサンプル {{...}} をそのまま表示するには リンク AngularJSとは？ AngularJS は、下記の様な特徴を持つ JavaScript フレームワークのひとつです。 Google社とコミュニティが開発するJavaScriptフレームワーク ライセンスはMI
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 随時更新します。 対象の人 使ったことないけど、軽く理解はしておきたい人 本格的に勉強する前に、大まかな概要を知りたい人 特徴 サーバーサイドのJavaScript 非同期 (I/Oの処理結果を待たず処理を進める) ノンブロッキングI/O (I/Oの結果を待たないで処理をすすめる。I/O処理が終了したらコールバック関数を実行。) イベントドリブン (何かしらのキッカケで動き始める) シングルスレッド (メモリ消費が少ない、仕事切り替えが少ないので速い) JavaScript エンジンが Google の V8 で速い Node.jsで作
どうも、まさとらん（@0310lan）です。 最近は、暇な時間を見つけると、ついつい「YouTube動画」をボーッと見てしまうのですが、同じような方はいらっしゃいますか？ 私の場合、YouTubeに時間を費やしてるうちに…、 「もっと効率よく、興味のある動画だけを見たい！」 という欲求が湧いてきたのでいろいろ模索した結果、簡単にWebスクレイピングができる「Kimono」で動画キュレーションプレイヤーを作る！…という結論に至りました。 そこで今回は、作り方をゼロから順を追ってご紹介しようと思いますので、快適な動画ライフを送りたい方はぜひ参考にしてみてください！ ■「Kimono」とは？ 「Kimono」を簡単に説明すると、任意のWebページのHTMLソースを定期的に取得し、必要な箇所だけを抽出して再利用できるようにしてくれるサービスと言えるでしょう。 例えば今回の事例だと、定期的にYouT
WebOS Goodies へようこそ！ WebOS はインターネットの未来形。あらゆる Web サイトが繋がり、共有し、協力して創り上げる、ひとつの巨大な情報システムです。そこでは、あらゆる情報がネットワーク上に蓄積され、我々はいつでも、どこからでも、多彩なデバイスを使ってそれらにアクセスできます。 WebOS Goodies は、さまざまな情報提供やツール開発を通して、そんな世界の実現に少しでも貢献するべく活動していきます。 本日は、久しぶりに JavaScript のライブラリを公開します。よく、画像ギャラリー等でマウスのドラッグ＆ドロップで画像の並べ替えができるものがありますが、そんな UI を簡単に実現できるものを作ってみました。以前に公開してご好評をいただいた DragResize.js のノウハウを引き継いでおり、以下の特徴があります。 JavaScript の呼び出しひとつ
Windows環境のChromeでiPhoneSafariのデバッグをする Edge Inspect使用 2012/11/6 iOS5までは、端末のSafariに開発メニューがあり、そこからコンソールログなど、Webサイトのデバッグ表示ができたのですが、見当たらないと思ってたら、iOS6からはWebインスペクタに変わっていました。 weinreというリモートで動くWebサイトのデバッグツールが使われています。 Adobe Community: Forum: Edge Inspect どんなものか試してみましたので、ここではWindows環境のChromeでiPhoneSafariをデバッグする手順を簡単にご説明します。 必要なものはこちら。一度インストールしてしまえばあとは接続するだけなので簡単です。 iPhone：実機（WiFi接続）＋「Edge Inspect」アプリ Windows：
ということで、タイトル通りのことをしてみようと思います。空のASP.NETのプロジェクトからいろいろ足していく形でやろうと思います。 プロジェクトの作成とAPIの作成 まず、空のASP.NETのプロジェクトを作ります。 ASP.NET WebAPIに必要なアセンブリを追加します。特に縛りがない限りは最新を利用したほうがいいのでNuGetからMicrosoft ASP.NET Web API 2 Web Hostをインストールします。ぱっと見た感じ以下のアセンブリが参照に追加されました。 Nwetonsoft.Json System.Net.Http System.Net.Http.Formatting System.Web.Http System.Web.Http.WebHost 次にプロジェクトに以下のものを追加します。 プロジェクトの右クリックメニューから「追加」→「フォルダ」を選びC
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
![[Node.js] Webサーバ＋アプリ構築が速すぎる件 〜 JSおくのほそ道 #004 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/bd11ad1fa690ff13e101521121dc7cbec590ac1f/height=288;version=1;width=512/https%3A%2F%2F2.zoppoz.workers.dev%3A443%2Fhttps%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%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGMzkzMzAlMkZwcm9maWxlLWltYWdlcyUyRjE1MjY4ODU0NDY_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmZtPXBuZzMyJnM9ZWJkYzFhZTg1MDg3M2QwOTZmMzExNDA0MDhlZjA4Yjc%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D5126823b99606645c55a20cd5c84b61e%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCTm9kZS5qcyU1RCUyMFdlYiVFMyU4MiVCNSVFMyU4MyVCQyVFMyU4MyU5MCVFRiVCQyU4QiVFMyU4MiVBMiVFMyU4MyU5NyVFMyU4MyVBQSVFNiVBNyU4QiVFNyVBRiU4OSVFMyU4MSU4QyVFOSU4MCU5RiVFMyU4MSU5OSVFMyU4MSU4RSVFMyU4MiU4QiVFNCVCQiVCNiUyMCVFMyU4MCU5QyUyMEpTJUUzJTgxJThBJUUzJTgxJThGJUUzJTgxJUFFJUUzJTgxJUJCJUUzJTgxJTlEJUU5JTgxJTkzJTIwJTIzMDA0JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9MTVkNmQxYjIyMDRhZmExZDA3M2I3MWJiODJhNmE3YmM%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBob3NvbWljaGkmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz1jZDVlMGZjYWRlYjFlZWZkOTc3ZDg1NjBkOTFmYTM4Nw%26blend-x%3D242%26blend-y%3D454%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26txt64%3DaW4gVW5pcG9z5qCq5byP5Lya56S-%26txt-x%3D242%26txt-y%3D539%26txt-width%3D838%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%25231E2121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D28%26s%3Daa7660c34125930d588d328ff2512702)
