class CreateItems < ActiveRecord::Migration[5.2]
def change
create_table :items do |t|
t.string :items <= nameに変更
t.integer :price
t.integer :user_id
t.timestamps
end
end
end
Ruby on Railsを学習すると決めたからには、誰もがやるであろうRailsチュートリアです。Twitterで検索すると多くのプログラミン初学者が挑戦しているのを見かけます（私もその一人）。
では、プログラミング初心者の私がRailsチュートリアをやることで、どのレベルにまで到達できたのか、紹介したいと思います。
Ruby on Railsを学習すると決めたからには、誰もがやるであろうRailsチュートリアです。Twitterで検索すると多くのプログラミン初学者が挑戦しているのを見かけます（私もその一人）。
では、プログラミング初心者の私がRailsチュートリアをやることで、どのレベルにまで到達できたのか、紹介したいと思います。
$ bin/webpack-dev-server
The CLI moved into a separate package: webpack-cli.
Please install 'webpack-cli' in addition to webpack itself to use the CLI.
-> When using npm: npm install webpack-cli -D-> When using yarn: yarn add webpack-cli -Dmodule.js:557
throw err; ^
Error: Cannot find module '@rails/webpacker'
at Function.Module._resolveFilename (module.js:555:15)
at Function.Module._load (module.js:482:25)
at Module.require (module.js:604:17)
at require (internal/module.js:11:18)
at Object.<anonymous>(.../appname/node_modules/webpack-dev-server/bin/webpack-dev-server.js:64:1) at Module._compile (module.js:660:30)
at Object.Module._extensions..js (module.js:671:10)
at Module.load (module.js:573:32)
at tryModuleLoad (module.js:513:12)
at Function.Module._load (module.js:505:3)
原因
@rails/webpackerがインストールされていない。
(私の場合、yarnがインストールいなかった為、rails new app --webpack=vue実行後にrails/webpackerがインストール出来ない旨のエラーが出力されていた。)
Some setup you must do manually if you haven't yet:
1. Ensure you have defined default url options in your environments files. Here
is an example of default_url_options appropriate for a development environment
in config/environments/development.rb:
config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }
In production, :host should be set to the actual host of your application.
2. Ensure you have defined root_url to *something* in your config/routes.rb.
For example:
root to: "home#index"
3. Ensure you have flash messages in app/views/layouts/application.html.erb.
For example:
<p class="notice"><%= notice %></p>
<p class="alert"><%= alert %></p>
4. You can copy Devise views (for customization) to your app by running:
rails g devise:views
Confirmablet.string:confirmation_tokent.datetime:confirmed_att.datetime:confirmation_sent_at<imgwidth="982"alt="スクリーンショット 2019-07-28 13.23.24.png"src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/460758/9a233b84-0dff-a80c-384d-01b96e2c6675.png">t.string:unconfirmed_email# Only if using reconfirmable
<!-- Styles --><style>#chartdiv{width:100%;height:500px;}</style><!-- Resources --><script src="https://www.amcharts.com/lib/4/core.js"></script><script src="https://www.amcharts.com/lib/4/charts.js"></script><script src="https://www.amcharts.com/lib/4/themes/animated.js"></script><!-- Chart code --><script>am4core.ready(function(){// Themes beginam4core.useTheme(am4themes_animated);// Themes end// Create chart instancevarchart=am4core.create("chartdiv",am4charts.XYChart);// Add datachart.data=[{"date":"2012-07-27","value":13},{"date":"2012-07-28","value":11},{"date":"2012-07-29","value":15},{//~省略~"date":"2013-01-30","value":81}];// Set input format for the dateschart.dateFormatter.inputDateFormat="yyyy-MM-dd";// Create axesvardateAxis=chart.xAxes.push(newam4charts.DateAxis());varvalueAxis=chart.yAxes.push(newam4charts.ValueAxis());// Create seriesvarseries=chart.series.push(newam4charts.LineSeries());series.dataFields.valueY="value";series.dataFields.dateX="date";series.tooltipText="{value}"series.strokeWidth=2;series.minBulletDistance=15;// Drop-shaped tooltipsseries.tooltip.background.cornerRadius=20;series.tooltip.background.strokeOpacity=0;series.tooltip.pointerOrientation="vertical";series.tooltip.label.minWidth=40;series.tooltip.label.minHeight=40;series.tooltip.label.textAlign="middle";series.tooltip.label.textValign="middle";// Make bullets grow on hovervarbullet=series.bullets.push(newam4charts.CircleBullet());bullet.circle.strokeWidth=2;bullet.circle.radius=4;bullet.circle.fill=am4core.color("#fff");varbullethover=bullet.states.create("hover");bullethover.properties.scale=1.3;// Make a panning cursorchart.cursor=newam4charts.XYCursor();chart.cursor.behavior="panXY";chart.cursor.xAxis=dateAxis;chart.cursor.snapToSeries=series;// Create vertical scrollbar and place it before the value axischart.scrollbarY=newam4core.Scrollbar();chart.scrollbarY.parent=chart.leftAxesContainer;chart.scrollbarY.toBack();// Create a horizontal scrollbar with previe and place it underneath the date axischart.scrollbarX=newam4charts.XYChartScrollbar();chart.scrollbarX.series.push(series);chart.scrollbarX.parent=chart.bottomAxesContainer;chart.events.on("ready",function(){dateAxis.zoom({start:0.79,end:1});});});// end am4core.ready()</script><!-- HTML --><divid="chartdiv"></div>
<!-- Styles --><style>#chartdiv{width:100%;height:500px;}</style><!-- Resources --><script src="https://www.amcharts.com/lib/4/core.js"></script><script src="https://www.amcharts.com/lib/4/charts.js"></script><script src="https://www.amcharts.com/lib/4/themes/kelly.js"></script><script src="https://www.amcharts.com/lib/4/themes/animated.js"></script><!-- Chart code --><script>am4core.ready(function(){// Themes beginam4core.useTheme(am4themes_kelly);am4core.useTheme(am4themes_animated);// Themes end// Create chart instancevarchart=am4core.create("chartdiv",am4charts.XYChart);constweights=<%==JSON.dump(@weights)%>;constdates=<%==JSON.dump(@dates)%>;varfirstDate=newDate(dates[0])varlastDate=newDate(dates.slice(-1)[0])vartermDate=(lastDate-firstDate)/1000/60/60/24+1// Add datachart.data=[];for(varj=0;j<weights.length;j++){for(vari=0;i<termDate;i++){varnewDate=newDate(firstDate)newDate.setDate(newDate.getDate()+i);//初日からi日分たすif((newDate(dates[j]))-(newDate)==0){weight=weights[j]chart.data.push({date:newDate,weight:weight});}}}// Set input format for the dateschart.dateFormatter.inputDateFormat="yyyy-MM-dd";// Create axesvardateAxis=chart.xAxes.push(newam4charts.DateAxis());varvalueAxis=chart.yAxes.push(newam4charts.ValueAxis());// Create seriesvarseries=chart.series.push(newam4charts.LineSeries());series.dataFields.valueY="weight";series.dataFields.dateX="date";series.tooltipText="{weight}"series.strokeWidth=2;series.minBulletDistance=15;// Drop-shaped tooltipsseries.tooltip.background.cornerRadius=20;series.tooltip.background.strokeOpacity=0;series.tooltip.pointerOrientation="vertical";series.tooltip.label.minWidth=40;series.tooltip.label.minHeight=40;series.tooltip.label.textAlign="middle";series.tooltip.label.textValign="middle";// Make bullets grow on hovervarbullet=series.bullets.push(newam4charts.CircleBullet());bullet.circle.strokeWidth=2;bullet.circle.radius=4;bullet.circle.fill=am4core.color("#fff");varbullethover=bullet.states.create("hover");bullethover.properties.scale=1.3;// Make a panning cursorchart.cursor=newam4charts.XYCursor();chart.cursor.behavior="panXY";chart.cursor.xAxis=dateAxis;chart.cursor.snapToSeries=series;// Create vertical scrollbar and place it before the value axischart.scrollbarY=newam4core.Scrollbar();chart.scrollbarY.parent=chart.leftAxesContainer;chart.scrollbarY.toBack();// Create a horizontal scrollbar with previe and place it underneath the date axischart.scrollbarX=newam4charts.XYChartScrollbar();chart.scrollbarX.series.push(series);chart.scrollbarX.parent=chart.bottomAxesContainer;chart.events.on("ready",function(){dateAxis.zoom({start:1-7/termDate,end:1});});});// end am4core.ready()</script><!-- HTML --><divid="chartdiv"></div>
$(function(){let$image=$('#imageModal'),$img_field=$('#user_image'),$croppedImage=$('#croppedImage'),$cropModal=$('#cropModal'),$beforeUpload=$('#beforeUpload'),$button=$('#btn-save'),$dataX=$('#dataX'),$dataY=$('#dataY'),$dataWidth=$('#dataWidth'),$dataHeight=$('#dataHeight');letoptions={dragmode:'crop',aspectRatio:1/1,restore:false,guides:false,center:false,highlight:true,cropBoxMovable:true,cropBoxResizable:true,modal:true,crop:(e)=>{$dataX.val(Math.round(e.detail.x));$dataY.val(Math.round(e.detail.y));$dataWidth.val(Math.round(e.detail.width));$dataHeight.val(Math.round(e.detail.height));}};// when file upload$img_field.change((e)=>{$image.cropper('destroy').removeAttr('src');file=e.target.files[0];reader=newFileReader();if(file.type.indexOf('image')<0){window.alert("画像を選択してください");return;}reader.onload=((e)=>{$image.attr('src',"");$image.attr('src',e.target.result);$cropModal.modal('show');$cropModal.on('shown.bs.modal',()=>{$image.cropper(options);});});reader.readAsDataURL(file);})// onclick save button$button.click(()=>{imgCropping();});// modalを閉じたとき、cropper要素を初期化$cropModal.on('hidden.bs.modal',function(){$image.cropper('destroy').removeAttr('src');let$cropperContainer=$('.cropper-container');$cropperContainer.remove();});functionimgCropping(){if(!croppable){alert('トリミングする画像が用意されていません')returnfalse;}$beforeUpload.hide();letcroppedData=$image.cropper('getCroppedCanvas').toDataURL();$croppedImage.attr('src',croppedData);$cropModal.modal('hide');}});
Example of forcing condition inversion of BuildStrategy (create / build / attributes_for) forcibly without using association in #FactoryBot of #ruby #rails
dockerでERROR: for mysql Cannot start service mysql: driver failed programming external connectivity on endpoint test-mysqlが出た時の対処
docker-compose run web rails new . --force --database=mysql --skip-bundleを実行するとエラーが出る
dockerでrailsの環境構築をしている中でいざ、railsのアプリを作成しようと以下のコマンドを実行
docker-compose run web rails new . --force --database=mysql --skip-bundle
そうすると以下のようなエラーが出る。
ERROR: for mysql Cannot start service mysql: driver failed programming external connectivity on endpoint test-mysql (b2c5bfe3339ba18ad0892ba8fc5a1f427a89b3915035bc12b0c4c1207e016f75): Error starting userland proxy: Bind for 0.0.0.0:3306 failed: port is already allocated
ERROR: Encountered errors while bringing up the project.
hamlで書いています。
