jQueryは、Webサイトに動きをつけることのできる言語です。 この記事では、Webサイトでよく見る このような、クリックすると画面TOPに行くボタンをどうやって作ればいいのかについて説明しました。 jQueryを読み込む jQueryのファイルを作成する htmlファイ…

筆者の環境 具体的な手順 必要なファイルをサーバーにアップロードする 「ロリポップ！レンタルサーバーFTP」にログインする themesディレクトリ( / > wp-content > themes )に新しいフォルダを作成する 新しいフォルダの中身 index.phpにテンプレートタグを…

Sassとは 読み込ませる方法 特徴をいくつか紹介します @importで他のSassファイルを読み込める 親子構造を持つ 変数が使える アンパサンド(&)が使える 参考にしたサイト Sassとは CSSは、Webページの見た目を整える言語ですが、SassはCSSをより効率的に書く…

slickerとは 導入手順 スライドさせたい画像を用意する スライドの骨格を作る 公式サイトからフォルダをダウンロードする 必要なファイルをSlickを導入したいフォルダに配置する スライドを動かすためのコードを書く autoplay: true, autoplaySpeed: 5000 do…

先日C#に関する案件をエージェントの方から紹介してもらいました。 しかし、私はC#について全く知らなかったため、インターネットで検索した情報をここにまとめておきます。 C#とは Macでも開発可能か？ おすすめ参考書 参考サイト C#とは - マイクロソフト…

非同期通信とは 非同期通信を使用する案件 非同期通信を使った簡単なアプリ 事前準備 作業用ディレクトリを作成する 新規rails アプリを立ち上げる ルーティング、コントローラー、ビューを設定する ローカルサーバーを再起動して、ブラウザを確認する 完成…

ランサーズで「CMS構築・WordPress制作・導入」のカテゴリーに絞って検索すると、31件の仕事が見つかりました。 www.lancers.jp Wordpressのカスタム投稿タイプ記事のアーカイプデザイン変更 wordpressのブログ内の編集と改善 既存サイトのコメント欄改修 な…

HTML / CSSでwebサイトを作っている時に、アイコンを使用したくなることがあるかと思います。 そんな時便利なのが、Font Awesomeです。 しかし、英語で書かれているので、使う時に少し戸惑ってしまうかも知れません。 そこで、Font Awesomeの読み込み方につ…

WordPress入門 ドットインストールのWordPress入門を始めてみました。 しかし、早い段階で上手くいかないことに遭遇しました。 レッスンの中で、 http://dev.dotinstall.com/wordpress にアクセスする場面があるのですが、アドレスバーに打ち込んでアクセス…

作ったもの こんなサイトをReactで作ってみました(画像はgoogle検索で出てきたものを使用しました)。 Progateを大いに参考にしました。 それぞれの画像をクリックすると、こんなモーダルが用事されます。 とじるボタンを押すと元の画面に戻ります。 App.js i…

react2(GitHub DesktopのRepository名)をreact-appに変更するまでの手順を書きます。 ①View on Githubをクリックして、リモートのGithubページに飛ぶ 画面中央のNo local changesにあります。 3つある内の一番下です。 ②settingタブを開く ③新しい名前をRepo…

まずは、React Appを編集してHello Reactと表示させる 色々ファイルはありますが、App.jsを編集するとブラウザの表示が変わるので、このファイルを編集していきます。 import React from 'react'; この記述はもともとありました。 class App extends React.C…

progateでReactのⅡまで学習したので、ローカル環境でも試してみたいと思いました。 まずは、手軽に始められそうなReact Appを導入してみました。 公式サイトの説明 公式サイト https://ja.reactjs.org/ node.jsのインストール 推奨版をダウンロードしました…

deviseを使えば、Ruby on Railsにユーザー機能を付け加えることが出来ます。 今回は、以前作りかけていたアプリケーションに、deviseを使ってユーザー機能を付けていきたいと思います。 まずは、Gemfileに以下の記述をします。 gem 'devise' その後、bundle …

このようなフォームがあるとします。 html(haml)はこちら = form_tag("/create") do %input{placeholder: "webサイトの名前",name: "site_name"} %input{placeholder: "URL",name: "site_url"} %input{placeholder: "ID",name: "site_id"} %input{placeholde…

ターミナルで、rails g model info と入力するとinfosテーブルを作るために必要なモデルファイルやマイグレーションファイルが生成されます。 マイグレーションファイルの中身を編集していきます。 class CreateInfos < ActiveRecord::Migration[5.0] def ch…

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"> </script> まずは、この1行をapplication.htmlのheadタグ内に記述します。 <script src="script.js"></script> 次に、この1行をbodyの閉じタグの直前に記述します。 そして、app > assets > javascripts に、script.jsファイルを作成します。 $(function() { alert("読み込みに成功しました。") }); そ…

InformationsController#index is missing a template for this request Informationsコントローラーのindexアクションがこのリクエストに対して、テンプレートが欠けている。 ルーティングはこちら Rails.application.routes.draw do get "/" => "informati…

このようなアップロードスペースのどこをクリックしてもファイルの選択画面が開けるようにしたい。 現状、この部分をクリックした時にしか開けない。 さらに、この部分を非表示にしたい。 現在のHTML <div class="upload-space"> <input type="file"> </div> CSS .upload-space { background-color: #f5f5f5; hei…

hamlはerbよりも簡単に記述できますが、規則を知っていないとerbで書いた方が書きやすいと思ってしまいます。 そこで今回は、hamlの規則について書いていきます。 %h1 A <h1> A </h1> このコードは、 ブラウザでこのように表示されます。 つまりhamlの%h1は、htmlの<h1>~<h1></h1></h1>…

gemfileに、 gem 'haml-rails' を追記します(全ての環境に適応させます)。 bundle installをします。 ---------------------------------------------------------------------------------- shibataakanoMBP:new-chat-space shibatahiroshitaka$ bundle ins…

railsで新しいアプリケーションを開発し始めた頃に起こるかもしれないエラーです。 「開発環境のデータベースがないよ」と言われています。 無いなら作りましょう。 rails db:createを実行します。 config > database.yml の記述に従って、データベースが作…

ノートPCは、スマホと画面幅が異なるため、デプロイ後にスマホで確認するとレイアウトが崩れている・・・ということがあります。 例えば、ノートPCだとこんな感じだったのが、 スマホの画面だと(GoogleChromeの検証ツールを使用しています)、 こんな感じに崩…

Rails で開発をしていて新規投稿を繰り返すと、このように、データベースの主キー(一番左のカラムのID)が徐々に増えていきます。 ここで、削除機能を試して、アプリからデータを削除したとします。 そして再び新規投稿をすると、データベースの主キーはこう…