巷では、このような質問が話題になっているようです? HTML Javascriptを使わないでforが実行したい 例 <p>str1</p> <p>str2</p> ... <p>str100</p> → for(i=0;i<n;i++) HTMLはスクリプト言語じゃないから無理だ！と言われても、執拗に質問をいろんなプラットフォームで続けているとのこと…。 そこで今回は、できる限り希望に近い解決策を個人的に考えてみました！? 前提と考察 HTML 解釈１：HTMLで複数の同じマークアップを繰り返し記述する方法を探しています。という意味。 解釈２：HTMLと同じように記述するけど、JavaScriptを動かせない不思議な環境があって（XML）、そこで実現したい。でもこれがなんだかわからないし、HTMLでできるならXMLでもできるやろ！HTMLって書いとこ。的なノリ Javascriptを使わないでforが実行したい 解釈３：具体的には、JavaScriptのfor文のような「イメージ」であることを表している 解釈４：単純に「ループ」と記載していない　→　コピペでは実現できない　→　連番をコンテンツに含む必要がある（次のマークアップ例からもそんな印象がある。） 例 <p>str1</p> <p>str2</p> ... <p>str100</p> → for(i=0;i<n;i++) → つまり、質問内容は「静的に、連番テキストを伴う１００個のマークアップを記述したい。最も効率的な方法を教えて欲しい。」（独自解釈） おまけ考察１：JavaScriptを使わない理由 スキル上の問題は、for(i=0;i<n;i++)がわかっているならできそうなので除外。 もしかしたらHTMLじゃなくてXMLなのではないか？（解釈２より） HTMLを編集する仕事をしているJavaScriptが使えない第３者のために、楽な実装方法を探してあげている？ セキュリティ上の理由でJavaScriptを無効にしたブラウザで業務を行わなければならない環境向けに、HTMLを納品する必要がある？ JavaScriptをサポートしていない独自ブラウザ向けにHTMLを納品する必要がある？ おまけ考察２：PHPやPythonなどのバックエンドの技術も使えない理由 HTTPを使わずに、fileスキームで閲覧する前提？ あるいはスキル上の問題？ おまけ考察3：EJSや、ReactなどのSSG、HTMLプリプロセッサを使わない理由 既存の運用作業で、開発環境に手を入れられる立場にいない？ 使えるなら使ってると思うのでスキル上の問題？（なげやり） 複雑なコーディングスキルを伴わないHTMLだけでできる方法の結論。 → Visual Studio Codeで「vscode-input-sequence」を使う HTMLファイルを開く 自力でループに必要なだけ改行する すべての改行を矩形選択する マークアップを記述する vscode-input-sequenceの機能で連番を入力する option+command+0キーを押下 最初の数字を入力（0始まりなら0） Enterキーを押下 完成 使い方

まずは完成品をどうぞ 渋谷のギラギラ感を出したかったのでネオンライト風CSSを使った。 スクロールするとこんな感じ。 試しにGoogleMapAPIも使ってみた。 スマホで見るとちょっとデザインが変わります。 実際にWeb公開しているURLはここです。 ちょっと重たいかも。 作り方 まずは作った動機 vue-CLIとGitHub Pagesの組み合わせで簡単にweb公開できることを知って 試しに何か作ってみたくなったというお話。 総制作時間6時間くらいで、もちろん費用はかかっていない。 結局一通り出来上がってからレスポンシブやらなんやらの調整に一番時間かかった。 割と見た目ができていればOKくらいの気持ちで作った。 Web公開の方法 まずGitHubでリポジトリを作ってクローンして、vue-CLIを使って実装をしていく。 実装する前にまずPagesの設定をして、vueのサンプルページがうまく表示されるかを確認した。 実際にvueの生成物をPagesでの公開する方法の詳細はこちらの記事から。 XDを使ってデザインをなんとなく考える XDはadobeのデザイン作成ソフト。 Web制作ではよく使われる上に、無料で使える模様。 adobe公式サイトのスターターキットダウンロードで入手できる。 トップのイメージを探す 素材に関してはおなじみのunsplashで見つけた。 無料とは思えないクオリティの素材を発掘できるので重宝している。 vueでトップページを作成 詳しい説明は割愛するが、HTMLとCSSに関しては、ドットインストールのはじめてのWeb制作とvue-cliの使い方をググればできるレベル。 ドットインストールは初心者におすすめ。 ネオンライト風のCSS CSSで美しいネオンライトのエフェクトをテキストやボタン、ボーダーに実装するテクニックのまとめを参考にした。 GoogleMapAPI ライブラリなしでGoogle MapをVue.jsで使う方法を参考にした。 レスポンシブデザイン PCで見るのとスマホで見るのとで幅が変わるのでデザインを変更した。 これも"レスポンシブデザイン"でググったら出てくるレベルで作成。(全然解説になってない) まとめ 以上が全貌。 結局何が難しいってフレームワークを決めることとデザイン自体の2つ。 この2点に関しては正解がないので常に最適解に近づけていく必要がある。 それ以外に関しては大体ググったら正解が手に入る。 あとは、デザインの勉強のためにWebサイト制作をしてみたが、 正直XDでお絵描きして終わりでもいいような気がする。 デザイン＋実装するなると半日はかかるので、量産ができない。 いずれにしても、今後も架空のWebサイトデザインを作っていきたい。

はじめに この記事を読めば、 ファイルを分割し、ローカル引数を渡す方法 について理解できましす。 ※この記事ではerbを使用しています。 やり方 分割前 index.html.erb <h2>レシピ一覧</h2> <% @posts.each do |post| %> <p><%= post.title %></p> <% end %> 分割後 index.html.erb <h2>レシピ一覧</h2> <%= render "posts", posts: @posts %> _posts.html.erb <% posts.each do |post| %> <p><%= post.title %></p> <% end %> 解説 <%= render "posts", posts: @posts %> render "posts" _posts.html.erbを呼び出しています。 posts: @posts postsに@postsを代入しています。 _posts.html.erb内で@postsをpostsとして使えます。 このページのみではわかりませんが、他の要素を代入したりする際にかなり有効です。 _posts.html.erbでは@postsがpostsに変わっているので気をつけましょう。 さいごに ファイルを分割し、ローカル引数を渡す方法 について解説しました。 参考になったら、LGTMしていただけると幸いです！ 最後まで読んでいただきありがとうございました！

説明 本記事はslickを使用した自動スライドを導入に関する記事です。 前提条件 javascriptを導入できている。スライド化するビューが用意されている。 完成コード application.html.erb <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/> <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> index.html.erb <% if @recommend_tweets != [] && user_signed_in? %> <div class="recommend"> <ul class="recoTweet-lists slider"> <% @recommend_tweets.each do |tweet| %> <li class='recoTweet-list'> <%= link_to tweet_path(tweet.id), remote: true, class: "show-link" do %> <% if tweet.image.attached? %> <%= image_tag tweet.image, class: "recoTweet-img" %> <% else %> <div class="recoTweet-img"></div> <% end %> <div class="recoTweet-ttl"><%= tweet.title %></div> <div class="recoTweet-message"><%= tweet.message %></div> <div class="recoTweet-txt"><%= current_user.name %>さんへオススメの投稿</div> <% end %> </li> <% end %> </ul> </div> <% end %> tweet.scss .slider{ margin: 50px auto; width: 100%; @media (max-width: 1024px) { width: 90%; } @media (max-width: 767px) { width: 100%; } } .slick-next { right: 10px !important; z-index: 100; } .slick-prev { left: 0 !important; z-index: 100; } .slick-prev:before, .slick-next:before { font-size: 30px !important; color: #000 !important; } script.js //slide $('.slider').slick({ dots: true, autoplay: true, autoplaySpeed: 3000, slidesToScroll:1, slidesToShow: 3, pauseOnHover: false, arrows: true, responsive: [ { breakpoint: 1025, settings: { slidesToShow: 1, arrows: false, } }, ] }); slick導入 application.html.erb <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/> <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> htmlのhead部分に上記の記載をすることでslickを使えるようにします。 ビューの修正 index.html.erb <ul class="recoTweet-lists slider"> </ul> 自身のスライドにしたい複数の要素を囲んでいる一つ上の要素にsliderクラスを追加してあげます slick設定 script.js //slide $('.slider').slick({ dots: true, autoplay: true, autoplaySpeed: 3000, slidesToScroll:1, slidesToShow: 3, pauseOnHover: false, arrows: true, responsive: [ { breakpoint: 1025, settings: { slidesToShow: 1, arrows: false, } }, ] }); ビューの修正で追加した、sliderクラスに対して設定します。上から順に解説します。 dots: true ｜　ページ送りを確認できるドットを表示する autoplay: true ｜　自動でスライドするようにする autoplaySpeed: 3000 ｜　スライドする感覚を3秒にする slidesToScroll:1 ｜　スライドの際何枚分スライドするかの設定 slidesToShow: 3 ｜　スライドを何枚表示するか pauseOnHover: false ｜　ホバーした際にスライドが止まらない設定 arrows: true ｜　スライドを送るアローボタンを表示する設定 responsive部分はbreakpointで指定したい幅の時に設定が変わるようにするレスポンシブ用の記述です。 スライドの見た目の詳細設定 tweet.scss .slider{ margin: 50px auto; width: 100%; @media (max-width: 1024px) { width: 90%; } @media (max-width: 767px) { width: 100%; } } .slick-next { right: 10px !important; z-index: 100; } .slick-prev { left: 0 !important; z-index: 100; } .slick-prev:before, .slick-next:before { font-size: 30px !important; color: #000 !important; } スライドのアローボタンには右のボタンにslick-nextクラス、左にはslick-prevクラスが設定されているのでアローの見た目はそのクラスに当てることで設定できます。!importantはcssが反映されない時にこのcssを優先させるという記述なのでcssが効かない時だけ記述してください。 まとめ 今回はslickを用いた自動スライドとその見た目の書き方について記載しました。閲覧ありがとうございました。

概要 基本Railsの記法に則り書いていきます！ １から全ての説明ではなく その中であれ？どうやるの？と 疑問に思った点や実装に困った箇所を ピックアップして紹介していきます♩ 設定と準備 ・Rails ・HTML ・CSS ・Javascript(jQuery) ↑上記の言語とフレームワークを使い 架空(自分で考えたテキトーなもの)のCafeの HPを作っていこうと思います！ 11日目の作業内容 ・ビューの作成(deviseのデフォルト画面をレイアウト) 11日目の気になった箇所 deviseのsign up画面ではエラーメッセージが表示されるのに sign in画面ではエラーメッセージが表示されない。 仮説 deviseにはデフォルトでエラーメッセージを表示させるための shared/_error_messages.html.erbというファイルが存在するため、 renderでそのファイルを呼び出せば表示できるのではないか。 sign up画面の場合 registrations/new.html.erb <%= render "/shared/error_messages" %> と記述することでエラーメッセージの表示に成功できたので 同じようにようにsign in画面でも sessions/new.html.erb <%= render "/shared/error_messages" %> とすれば表示されるのではないかと思ったが表示されなかった。 結論 sign in画面では違う記述の仕方でなければ エラーメッセージの表示ができないことがわかった。 sessions/new.html.erb <%= flash[:notice] %> <%= flash[:alert] %> 上記の記述をエラーメッセージを表示させたい箇所に追加することで 可能となる。 flashとはRailsでようされているオブジェクトのことらしい。 一時的にメッセージを表示してくれる機能のようなものらしいです。 これでエラーメッセージの表示には成功！ 補足になりますがdevise.ja.ymlを導入し 日本語でエラーメッセージを表示させる方法をとられている方は devise.ja.yml ja: devise: failure: not_found_in_database: "%{authentication_keys}またはパスワードが違います。" こちらの箇所を変更するとsign in画面でのエラーメッセージ内容を変更できるので お試しください！

はじめに BootstrapとBulmaは共にデザインテンプレートとして使われることが多いフレームワークです。BootstrapはCSS,JSを含み、BulmaはCSSのみのフレームワークとなります。私は両方使った経験があるので、その経験を基に使い所を説明します。 簡単なメリデメ Bootstrap メリット ・使い方の情報量が多い。 ・JSのテンプレートもあるので動きを簡単につくれる ・コンテンツが多いので、マニアックなデザインをつくろうってなったときに意外とみつかる ・細かなレスポンシブ対応ができる デメリット ・読み込み量が多くなるのでレスポンススピードを気にすると一工夫必要 ・既視感があるサイトになりやすい ・全体に反映させてつくると、カスタマイズ性が低い Bulma メリット ・シンプルなドキュメンテーションなので実装しやすい ・cssのみなのでVueやらReactやらに組み込みやすい ・デザインがシンプルでカスタマイズ性が高い デメリット ・グローバルスコープなので、CDNで呼び出すとクラス名が被りやすい ・JSを別途つくって動きをつくる必要がある ・それほど軽量ではない（CSSのみのBootstrapとそんな変わらない） レスポンシブ対応について BootstrapもBulmaもレスポンシブ対応するための機能は十分備わってます。グリッドシステムで実装していく点も同じなので変わらない印象です。Bulmaの方がクラス名が単純明快であるのでコードみたときにわかりやすいと個人的には思います。ただ、CDNの場合はクラス名が被るので気をつけてください。ローカルの場合はスコープ設ければ問題ないかと思います。 デザインについて Bootstrapは一番使われているフロントエンドフレームワークと言われてるように、既視感が高くなってしまうのが難点ですね。初心者が使う分には情報量を多く簡単に基盤をつくれるので良いのですが、型にはまったサイトになりがちなのでデザインこだわる場合はお勧めできません。 Bulmaに関しても同じことは言えるのですが、既視感はBootstrapと比較して下げられます。シンプルで丸みのある可愛いデザインがデフォルトです。 Bootstrap Bulma まとめ BootstrapやBulmaの他にもskeltonなど多くのフロントエンドフレームワークがあるので、一度ドキュメンテーションを覗いてみて、もし用途にあったら導入してみるって感じで開発を進めていくのも良いのではないでしょうか。一からwebデザインを構築するのは時間やコストがかかりがちなので、こういったテンプレートを無料で用意していただいてるのは本当ありがたいことですね。オープンソースに感謝。