In commemoration of the 100th follower milestone, Blog Application and Multilingualization
- 100 Follower Celebration, App, blog, DeepL, DEKOBOKO FRIENDS, Google, Google Analytics, Multilingual, PWA, SNS, Translation, website
The other day, two days before the end of January, we successfully achieved our goal of 100 followers on Instagram and Twitter for the end of January🎊!
Thank you so much for reading our blog, DEKOBOKO FRIENDS!
As I was planning to do something to commemorate the occasion, I saw and heard about “web apps” from IT specialist Mitta.
I thought, wouldn’t it be great if I could “appify” my blog as well? So I came up with the idea of implementing a website like an app.
Recently, I started to pursue various things about websites, and when I was analyzing the data in Google Analytics, I was surprised by the results!
Top 5 visitor ranking by city and ward
5th Bowling Green
As of February 7, 2022
We noticed a surprisingly large number of visitors from the U.S. and demand for English.
About 25% of the total users, or about a quarter of the total users, were from overseas.
Therefore, I decided to try to “multilingualize” my blog.
In this article, I’ll start with the basics of what an app is. In this article, I would like to introduce the basics of what an app is, how to browse with it, and how to switch languages.
- 1. What is an app?
- 2. Turning a website into an app
- 3. Push Notifications
- 4. Making the Blog Multilingual
What is an app?
The word “app” that we often hear in our daily lives is an abbreviation for “application,” meaning software that is installed on an OS and used in general. Whenever we use a smartphone, computer, or tablet to do something, we are running some kind of application to do the work.
OS: Operating System (basic software)
When it comes to operating systems for personal computers.
Microsoft’s “Windows” and Apple’s “Mac” OS
When it comes to smartphone operating systems
Apple’s “iOS” for iPhone and
Google’s “Android” is the mainstream OS.
Basically, there are two types of applications.
”Native apps” that you install and use
”Web apps” that do not require installation.
In addition, a new type of web technology called “PWA” has been gaining attention in recent years.
PWA is an innovative system announced by Google that combines the excellent characteristics of native apps and web apps!
I will now explain the characteristics of each.
Native applications are those that you download and use on your PC or smartphone.
They can be used even when they are not connected to the Internet (with some exceptions).
Typical examples :
Excel, Word, PowerPoint, etc. often used at school or work
Design software (Adobe Illustrator, Photoshop, etc.)
Anything you install from the App Store or Google Play.
Development languages :
C language, C++, C#, VisualBasic, ASP
Advantages of native apps
– Can be used in an offline environment
– Fast loading speed and comfortable operation
– In-app billing
– Push notifications
– Strict review before release
– High development cost
– Time consuming to download
– WEB Apps
What is a web app?
Web application is an application that runs in a web browser.
You need to be connected to the Internet to view them.
Typical examples :
In the gourmet food industry, sites such as Shokuroku, Cookpad, Gurunavi, etc.
EC sites such as Amazon and Rakuten
Gmail, YouTube, and Google Maps from Google.
SNS: Instagram, Twitter, Facebook
Yahoo!, note, Dropbox, and Skype.
Development languages :
Advantages of web applications
– Development cost can be reduced.
– Can be used regardless of device or OS.
– No installation required, saving gigabytes.
– No need to update on the user side.
Disadvantages of web apps
– No notification
– Vulnerability in terms of security
– Cannot be used without an internet environment
– Web application environment is affected by performance
PWA” recommended by Google
What is a PWA, which is a fusion of the two applications described above, and is a combination of the ease of a website and the high functionality of a native application?
The official name … Progressive Web Apps
A technology that makes it possible to install a website/web app as an app like a native app.
With PWAs, you can put icons on your home screen, send push notifications, and implement “user-friendly and convenient functions” without having to use native apps ✨.
To put it simply, it’s like “turning a website into an app“.
To quote Google’s official website.
Progressive Web Apps (PWAs) allow you to quickly interact with the web on your computer or mobile device, install PWAs for easy access, and take advantage of additional features (such as extra storage for offline content).
Typical examples :
Retty, SUUMO, Twitter, Nikkei E-Edition, Spotify, Forbes JAPAN, The Weather Channel, Pinterest, The Washington Post
Development Languages :
Working with “ServiceWorker”
ServiceWorker continues to run in the background even when tabs are closed.
Five advantages of PWAs
(1) Icon placement on the smartphone home screen
Push notifications can be used.
(2) Push notifications are available
(3) Site browsing while offline
(4) Display splash screen when loading
(5) Full screen display of web pages
I have the impression that more and more companies are gradually adopting PWAs.
The weak point of PWAs is that push notifications are not yet supported on iOS💦.
If it is supported in the future, it will surely spread to the whole world at once!
PWA will change the way the web and apps work, and the conventional wisdom.
I think it will be a big turning point.
How do you compare the three apps on Instagram?
If you look at Instagram on your iPhone, you may think there is nothing wrong with it.
However, when you look at it on your iPad, have you ever found it a bit inconvenient?
In fact, let’s compare it with an example of Instagram on an iPad!
When you view it horizontally on an iPad, you have to turn the screen upright to see it at the size of a smartphone…it’s small and hard to see…you also get a little blank space.
There is a search bar at the top.
I can’t see it with the screen fully open…
I’ve been using it for a while now, and it’s really nice.
If you want to view Instagram on your iPad, I suggest you convert it to a PWA!
Turning a website into an app
First thing on any search engine, search the URL for [DEKOBOKO FRIENDS]!
You can bookmark (register as a favorite) sites you frequently visit with a star mark, but it would be more convenient if you could add them to your home screen as an app!
How to install the application
❶ Click on the icon next to the URL of the website in the search window that looks like a combination of a computer and the bottom arrow.
When you place the cursor over the icon, the message “Install DEKOBOKO FRIENDS” will appear.
❷Install the software.
❸The “PWA-ized application” has been launched!
The bar on top is gone, so it’s clean!
Returning to the home screen…
When you return to the home screen, you’ll see that DEKOBOKO FRIENDS app has been created☺.
What a website! The website has turned into an app!
When I opened the website from the home screen again, it was instantly up and running!
Follow the same procedure as Chrome.
You can convert a website into an application in Edge as well.
However, the shape of the symbol is different from Chrome.
Note that it has been changed to an icon with three squares and a + button!
Once you install it, allow it!
You can customize the ✓ by yourself if you like.
If you check Desktop Shortcut, it will be added to your home screen as an app as before.
Open a web site by searching the URL in Safari.
Share symbol that pops up at the top => Add to Home Screen
The DEKOBOKO FRIENDS app has been added to your iPad!
This is the reason why there are two apps for Instagram as well. It’s your imagination that the colors are slightly different!
The native app and the app that was made into a PWA are side by side, so it’s too much.
It may look suspicious, but… it’s not a back-up (laughs).
It’s just an app of Instagram opened on a website!
If you look closely, Lightroom actually has two apps as well.
If you look closely, you’ll see that Lightroom actually has two apps, one for viewing, one for editing the admin screen (dashboard), and one for analyzing. You can even change the name for each use!
You can also change the name for each use. First, search the URL in Safari.
Then, to add it to your home screen, click the share button with the up arrow that pops up.
Add to Home Screen
The DEKOBOKO FRIENDS app has been added ♥.
If you turn on push notifications, you will receive notifications of newly posted articles and notifications from the blog owner. This has the advantage of making it easier for you to notice new posts when you want to see them.
There are various browsers and models that support push notifications.
Browsers that support push notifications
Chrome (Desktop & Android)
Safari (Mac OS X)
Microsoft Edge (Desktop & Android)
Opera (Desktop & Android)
Firefox (Desktop & Android)
Both HTTP and HTTPS sites are supported.
* Push notifications are not supported for iPhone.
How to set up push notifications is explained below.
PC (Chrome & Edge & PWA)
❸ Press the red bell.
If you get a notification at the bottom, OK.
Push notifications seem to be possible on smartphones, even on Android!
Making the Blog Multilingual
How to change the display to English
If you are using a PC, you can change the language to English by clicking on the English button.
If you are using an iPad, you can view the blog in the same way as on a PC.
So, here is the bottom part of the screen for your reference.
If you are using an iPhone, the upper bar is within the three lines of a round circle, so please click on English from there.
I also added a language switcher not only in the header at the top of the site, but also in the footer at the bottom.
You can switch between English and Japanese.
If you are an English-speaking person, please use this site as a website to read in your own language, or to learn a foreign language other than your own.
I thought about using an automatic translation plugin for WordPress, but I was told that it uses Google and Microsoft translations.
If the accuracy is good, there is room to consider it.
However, “DeepL” has recently surpassed them and can provide native-like natural translations.
In order to meet the needs of a wide range of users so that people from overseas can read our website, we have decided to incorporate “DeepL”, which provides excellent, highly accurate automatic translation.
I’ll be translating manually, but I’ll do my best to translate steadily in my free time!
I will also create an English translated article page, and will add articles in other languages if there is enough demand and capacity.
Without forgetting the original purpose of running DEKOBOKO FRIENDS, we aim to create a website that provides useful and fun information to people around the world.
We hope that everyone will try to convert the website into a PWA and turn it into an application so that you can view DEKOBOKO FRIENDS at any time♪