Hello, this is Matsunaga from the operations team.
When operating a website, production often has to be carried out within a short deadline, but it can be difficult to maintain quality while streamlining production and keeping costs down.
For example, if you have to create separate PC and mobile pages rather than a responsive page, you will need to enter the same information on each page.
Inputting information takes time and effort, and there is also the risk of quality errors occurring, such as information being reflected on only one page.
This time, we will introduce a method that reduces labor hours and ensures quality by centrally managing input information for multiple pages and creating HTML.
The amount of work is huge and the schedule is short...this is a problem.
If the labor hours required to input information during coding are broken down into smaller steps, each input requires two labor hours: "production labor hours" and "verification labor hours."
If the information you submit is small, this is not much of a problem, but if the information is large, the above two steps will be required for each entry, which will increase the amount of work required.
Furthermore, if the schedule between submission and publication is short, the coding workload becomes extremely heavy.
At one point, we were hit with a high-load project like the one described above, and we found ourselves in a situation where all of our coding resources (production man-hours) and verification resources (verification man-hours) were being taken up by that one project.
For operations teams that have to work on multiple projects in parallel, this situation is fatal. We need to think of ways to reduce the burden.
Trial and error to reduce the load
Our first thought was to create templates and reduce the number of input fields, but since the designs and layouts were different, there were very few areas that could be made into templates, so this did not have a significant effect.
We tried breaking down the layout code into components, but this did not reduce the amount of work required to enter the data.
As we went through various trials and errors, we noticed that the submitted manuscripts had several common elements.
Examples of common items:
- Product name
- Shop name
- Destination (URL)
And so on.
So I wondered if there was a way to automatically enter data for the same items.
Automate data entry with the template engine "EJS"
First, to automate the process, we introduced the template engine " EJS ", which can create HTML from a database and templates.
"EJS" is a template engine that can be controlled by Javascript and can output in HTML format while applying input data to specified locations.
Since the input data is read in JSON format, it was necessary to create a simple database in JSON format.
Template engine concept diagram
The work procedure is as follows.
2. Creating a JSON file 2-1. Creating a CSV file from the submitted data using Excel 2-1. Changing the format from CSV to JSON
3. Create HTML file from EJS and CSV (build process)
However, creating data in JSON format was not expected to reduce the amount of work required compared to entering data into HTML code, so we decided to create the data in CSV format, which can be entered into Excel.
We won't go into detailed explanations of EJS and JSON, but we now use a template engine, which means that submission data can be automatically entered.
What changed after automating data entry into HTML
A few things have changed since we introduced EJS and automated data entry into HTML.
1. The amount of HTML code required has been reduced
When it comes to coding, previously it was necessary to write lengthy code in HTML for each piece of input data, but now the code for the same input field only requires creating one template, so the amount of code written has been reduced.
In addition, there was less rework due to mistakes such as copying code.
2. Submitting data in Excel reduces the amount of data entry required
In order to automate data entry, we changed the submission format to Excel, which allows data to be entered in a list format, which reduces input errors and therefore the amount of verification work required.
3. Verification man-hours were reduced
As mistakes were reduced, the number of revisions was also reduced, and verification work was also reduced.
--
Although there was an initial cost to introduce the template engine, automating data entry led to a reduction in two man-hours, and the number of coders required was reduced from multiple people to just one person.
After automating data entry, I realized that reducing errors also leads to reduced labor costs.
If the amount of submitted material is large, not only will the production and verification work hours increase, but the increased data entry also increases the chance of errors, which can result in even more work being spent.
In order to prevent mistakes and improve quality, as well as reduce production costs, we would like to continue to move forward with automation in areas other than just template engines.
This time, we introduced the automation of data entry, which was actually used in one project, as one method to streamline production projects with a lot of submitted information.
MATSUNAGA Satoru