Node.js®とは Node.jsはスケールできるネットワークアプリケーションを構築するために、非同期でイベント駆動型のJavaScript実行環境として設計されています。次の「hello world」のサンプルコードは多くのネットワーク接続を並列に処理できます。それぞれのネットワーク接続ではコールバック処理が呼び出されますが、実行する処理がなければNode.jsはスリープします。 const http = require('http'); const hostname = '127.0.0.1'; const port = 3000; const server = http.createServer((req, res) => { res.statusCode = 200; res.setHeader('Content-Type', 'text/plain'); res.end('He

Bootstrapではflexboxを利用することでテキストをコンテナの上寄せ・上下中央・下寄せにすることができます。 実際にはd-flexクラスとalign-items-start,align-items-center,align-items-endクラスを組み合わせて指定することで実現します。

Flexboxグリッドシステムを使って、整列、順序付け、オフセットのいくつかのオプションで列を変更する方法。 Bootstrap5（ブートストラップ5）では「列の間隔を両端から均等に配置」が追加されました。

Databricks データインテリジェンスプラットフォームDatabricks は、AI とデータの融合と活用、成果の創出を支援します。

Flex Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary. Enable flex behaviors Apply display utilities to create a flexbox container and transform direct children elements into flex items. Flex containers and items are able to be modified

要素の位置移動（CSS:translate） この記事にはプロモーションが含まれています。 投稿：2021・07・19 更新：2022・12・21 要素の移動は基本的に、positionプロパティで行うのが一般的で、調整もしやすいかと思います。 positionプロパティであれば単に移動させるだけでなく、親要素やビューポートを基準とした位置調整なども行うことができるからです。 ですが、positionプロパティは細かい指定が可能である反面、「ボタンをクリックした時にちょっと動くようにするだけ」など、大した移動ではなく細かい指定も必要ないような場合には、少しだけ面倒くさいとも言えます。 具体的には以下のようなボタンです。（クリックすると、ボタンが押されたように少し移動します） クリックすると動くボタン ▲のサンプルの移動は今回紹介する、transformプロパティを使っています、 もちろんp

HTMLコード記述例 <div class="radius1"> <p>四隅の角を10px丸くしています。</p> </div> <div class="radius2"> <p>四隅の角をそれぞれ丸くしています。</p> </div> 外部ファイルCSS記述例 @charset "utf-8"; div.radius1 { border: 5px solid green; border-radius: 10px; margin-right: 10px; width: 150px; height: 150px; padding: 10px; display: inline-block; } div.radius2 { border: 5px solid orange; border-radius: 10px 20px 30px 40px; width: 150px; height: 150

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Rails 7.0ではフロントエンドサポートが刷新されます。新たなライブラリが多数導入され、選択肢が増えるため、「Rails公式のものを選べばOK」という戦略が通用しなくなります。 本稿では、Railsでフロントエンドを書くための選択肢について、その歴史と実装を踏まえて比較検討します。 結論から言うと(まだアルファ版なので今後も状況が変わる可能性はありますが、) 新規アプリケーションではSprocketsの役割は無くなりそうです。新しいライブラリとして Propshaft, importmap-rails, jsbundling-rails, cssbundling-rails が登場し、主要な選択肢として以下が提供されます。 (各ライブラリの詳細については後述します) Propshaft + importmap-railsデフォルトの選択肢。Node.jsが不要。トランスパイルを含め、複

概要 RuboCop 設定に関するアレコレです。 設定ファイルってどこに何を置くんだろう？ 設定項目一覧ってどこにあるんだろう？ デフォルトの設定ってどこにあるんだろう？ ということが気になったので、それについてまとめています。 RuboCop とは (Omitted) 以下の資料が非常にわかりやすかったため、RuboCop に関する説明は省略します。 RuboCop なるものがあるらしい RuboCopをRailsオプションやLintオプションで使ってみよう 設定ファイル (.rubocop.yml) RuboCop の挙動は.rubocop.ymlで設定可能です。 ホームディレクトリとかプロジェクトディレクトリに配置できるとのことですが、基本はプロジェクトのルートディレクトリに配置しておくと良いと思います。 The behavior of RuboCop can be controll

RuboCopとは RuboCopとはRuby用のLintツールです。 設定ファイルを編集することでコーディングスタイルのチェック項目をカスタマイズできたり、RuboCop用のgemを追加することで機能の拡張ができたりします。 コードに対して行われるさまざまなチェックをRuboCopではCopと呼びます。 RuboCopの設定ファイルについて RuboCopを利用するうえで重要な.rubocop.ymlと.rubocop_todo.ymlについて紹介します。 設定ファイルの詳細はRuboCop//Docs『Configuration』を参照してください。 .rubocop.ymlとは .rubocop.ymlとはRuboCopの設定ファイルです。 RuboCop自身に関する設定だけでなく、Copの有効無効の制御やCopのカスタマイズをする際にも利用します。 .rubocop_todo.ym

オブザーバビリティも、セキュリティも、検索ソリューションも、Elasticsearchプラットフォームならすべて実現できます。

はじめに（Get started with Bootstrap） v5.2.0更新 Bootstrapは、強力な機能満載のフロントエンドツールキット。試作品から製品まで、何でも数分で構築できる。 ※"v5.0.0"での変更はv5.0.0-alpha版、v5.0.0-beta版での変更も含みます。 ※"v5.2.0"での変更はv5.2.0-beta1での変更も含みます。 ※"v5.3.0"での変更はv5.3.0-alpha版での変更も含みます。 クイックスタート（Quick start）v5.3.3時点 Bootstrapの本番環境に対応したCSSとJavaScriptをCDN経由で取り込めば、構築のステップを踏むことなく、すぐに使い始めることができる。このBootstrap CodePenデモで実際に試してみて下さい。 プロジェクトのルートディレクトリに新しい index.html ファイ

Railsのconfigにはconsider_all_requests_localという設定項目があって、こいつをtrueにすると、すべてのエラーをブラウザに表示をするかことがでいる。逆に、falseに設定すると、ブラウザには詳細情報が表示されない。 デフォルトでは、 development環境はtrue、 production環境はfalse になっている。 エラー時の動作を確認する際、developmentでもproductionと同様の動作をさせたいときは、こいつをconfig.consider_all_requests_local = falseとしてあげればproductionと同様の動作を確認できる。 ちなみに、設定ファイルはここにあります。 - development: config/environments/development.rb - production: conf

[ec2-user@ip-10-0-0-133 twitter_clone_2019]$ bundle exec unicorn_rails -E development -c config/unicorn/development.rb -D master failed to start, check stderr log for details このエラーは何か？？ check stderr log for details（詳細はstderrlogを確認するように）とあるので調べてみると以下のような結果が出ました。ここで注目するのがAlready running on PID:17739となります。unicornは接続する度にプロセスIDが割り当てられます。そのため、このエラーは以前に行ったunicorn接続のプロセスが残っており、それが実行中のため再度接続できません、という意味です。

本ガイドは、アプリケーションをテストするためにRailsに組み込まれているメカニズムについて解説します。 このガイドの内容: Railsテスティング用語 アプリケーションに対する単体テスト、機能テスト、結合テスト、システムテスト（system test）の実施 その他の著名なテスティング方法とプラグインの紹介 1 Railsアプリケーションでテストを作成する理由 Railsでは、テストをきわめて簡単に作成できます。テストの作成は、モデルやコントローラを作成する時点でテストコードのスケルトンを作成することから始まります。 Railsのテストが作成されていれば、後はそれを実行するだけで、特に大規模なリファクタリングを行なう際にコードが期待どおりに動作していることを即座に確認できます。 Railsのテストはブラウザのリクエストをシミュレートできるので、ブラウザを手動で操作せずにアプリケーションの

商品をお気に入り登録する機能をajaxを利用して実装していた私。 そこで初めて .js.erb と呼ばれる拡張子があることを知りました。 .js.erbとは 一言で言えば、Rubyを埋め込むことのできるjsファイルです。 普通のjsファイルと違う点は、erbタグが使用できること。従って、このファイル形式ではコントローラで定義したインスタンス変数を記述することも可能。 これによってイベント発火時、更新されたインスタンスを呼び出すと同時に、非同期通信を実現する事ができます。 .html.erbと似てる。。。 初見で思ったのは、.html.erbと似ていると言うこと。 .erbの前にある.jsと.htmlはただ単にファイルの形式を表しているものだと思っていました。 しかし、こちら[1]の記事でその答えを発見。 コントローラは「app/views/コントローラ名/アクション名.リクエストの形式.〇

はじめに Rails6のアップデートで、JavaScriptを設置する場所や設定方法がRails5以前とは変わったので、Rails6でJavaScriptを使う方法について書きます。 この記事に書いてあること Rails6でJavaScriptを使うには、具体的にどのようなコードを書けば良いのか この記事に書いていないこと Webpackerとは アセットパイプラインとは Ajaxとは

発生した問題1 Capistrano でデプロイしようとしたら、次のエラーが出た。 OpenSSH keys only supported if ED25519 is available (NotImplementedError) net-ssh requires the following gems for ed25519 support: * ed25519 (>= 1.2, < 2.0) * bcrypt_pbkdf (>= 1.0, < 2.0) See https://github.com/net-ssh/net-ssh/issues/565 for more information Gem::LoadError : "ed25519 is not part of the bundle. Add it to your Gemfile." 解決 以下の2つのgemを追加する。 gr

Popovers (ポップオーバー) · Bootstrap v5.0 https://getbootstrap.jp/docs/5.0/components/popovers/ を使おうとしていたのですが、期待する動作にならずに少し困っていました。 具体的には data-bs-trigger というオプションが用意されていて、 click、hover、foucs 時にpopoverが発動するようになっています。 やりたいこと リンクのhoverとclick時にpopoverを表示 popoverに表示された内容をコピペできる popover以外をクリックするとpopoverを非表示にする 上記なのですが、デフォルトのoptionでは対応できないようでした。 問題点 hoverは欲しいので、これは入れる前提で、他のoptionを組み合わせてみると、以下の問題が発生していました。 data-

Don't mind tech-related ads? Consider disabling your ad-blocker to help us! They are small and unobtrusive. Alternatively, support us on Open Collective!

たくさんのイラストレーターの方から投稿された全307点の「ラジャー」に関連したフリーイラスト素材・画像1〜70点掲載しております。気に入った「ラジャー」に関連したフリーイラスト素材・画像が見つかったら、イラストの画像をクリックして、無料ダウンロードページへお進み下さい。ダウンロードをする際には、イラストを作成してくれたイラストレーターへのコメントをお願いいたします。イラストダウンロードページには、イラストレーターのプロフィールページへのリンクもあり、直接オリジナルイラスト作成のお仕事を依頼することもできますよ。 全て表示 ≫

本ガイドではWebpackerのインストール方法と、Railsアプリケーションのクライアント側で用いるJavaScriptやCSSなどのアセットをWebpackerで利用する方法について解説します。ただしWebpackerの開発は終了した点にご注意ください。(訳注: 移行方法は末尾の参考資料をご参照ください) このガイドの内容: Webpackerとは何か、およびSprocketsと異なっている理由 Webpackerのインストール方法、および選択したフレームワークとの統合方法 JavaScriptアセットをWebpackerで管理する方法 CSSアセットをWebpackerで管理する方法 静的アセットをWebpackerで管理する方法 Webpackerを利用しているサイトのデプロイ方法 WebpackerをRailsエンジンやDockerコンテナなどの異なるコンテキストで利用する方法

Railsは、初期状態でapp/assets/javascriptsディレクトリ以下の全てのJavaScriptを自動で読み込みます。 読み込ませるJavaScriptを個別に指定するには次のようにします。 目標 app/assets/javascripts/sample.jsを個別に読み込む。 準備 JavaScriptファイルは次のように実装しています。 $(document).ready(function() { $("p").css("color", "blue"); }); Step1. ツリー読み込みの停止 自動で読み込まれるJavaScriptはapp/assets/javascripts/application.jsで管理されています。この中に//= require_tree .があるかと思いますが、これが定義されていると、app/assets/javascripts以下の